"use client";

import { ChangeEvent, FormEvent, useMemo, useState } from "react";
import type { Dealer, DealerContact } from "../../lib/dealer-store";
import type { TrackerRecord } from "../../lib/tracker-store";

const blankDealer: Partial<Dealer> = { name: "", legalName: "", address: "", city: "", province: "Ontario", postalCode: "", phone: "", website: "", omvicUrl: "", active: true, source: "Manual" };
const blankContact: Partial<DealerContact> = { dealerId: "", name: "", title: "", email: "", phone: "", notes: "" };

function parseCsv(text: string) {
  const rows: string[][] = [];
  let row: string[] = [];
  let value = "";
  let quoted = false;
  for (let index = 0; index < text.length; index += 1) {
    const character = text[index];
    if (character === '"' && quoted && text[index + 1] === '"') {
      value += '"';
      index += 1;
    } else if (character === '"') quoted = !quoted;
    else if (character === "," && !quoted) {
      row.push(value);
      value = "";
    } else if ((character === "\n" || character === "\r") && !quoted) {
      if (character === "\r" && text[index + 1] === "\n") index += 1;
      row.push(value);
      if (row.some((cell) => cell.trim())) rows.push(row);
      row = [];
      value = "";
    } else value += character;
  }
  row.push(value);
  if (row.some((cell) => cell.trim())) rows.push(row);
  if (rows.length < 2) return [];
  const headers = rows[0].map((header) => header.trim().toLowerCase().replace(/[^a-z0-9]+/g, ""));
  return rows.slice(1).map((cells) => Object.fromEntries(headers.map((header, index) => [header, cells[index]?.trim() || ""])));
}

function requestVehicle(request: TrackerRecord) {
  return [request.year, request.make, request.model, request.trim].filter(Boolean).join(" ");
}

export default function DealerDirectoryPanel({ dealers, contacts, requests, onReload }: { dealers: Dealer[]; contacts: DealerContact[]; requests: TrackerRecord[]; onReload: () => Promise<void> }) {
  const [dealerDraft, setDealerDraft] = useState<Partial<Dealer>>(blankDealer);
  const [contactDraft, setContactDraft] = useState<Partial<DealerContact>>(blankContact);
  const [query, setQuery] = useState("");
  const [message, setMessage] = useState("");
  const [quoteRequestId, setQuoteRequestId] = useState("");
  const [quoteContactId, setQuoteContactId] = useState("");
  const [busy, setBusy] = useState(false);

  const dealerById = useMemo(() => new Map(dealers.map((dealer) => [dealer.id, dealer])), [dealers]);
  const filteredDealers = useMemo(() => dealers.filter((dealer) => `${dealer.name} ${dealer.legalName} ${dealer.address} ${dealer.city} ${dealer.postalCode}`.toLowerCase().includes(query.toLowerCase())), [dealers, query]);

  async function action(body: Record<string, unknown>) {
    setBusy(true);
    setMessage("Saving…");
    const response = await fetch("/api/admin/dealers", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
    const data = await response.json();
    setBusy(false);
    if (!response.ok) {
      setMessage(data.error || "Directory update failed.");
      return null;
    }
    await onReload();
    setMessage("Saved");
    window.setTimeout(() => setMessage(""), 1800);
    return data;
  }

  async function saveDealer(event: FormEvent) {
    event.preventDefault();
    if (await action({ action: "saveDealer", dealer: dealerDraft })) setDealerDraft(blankDealer);
  }

  async function saveContact(event: FormEvent) {
    event.preventDefault();
    if (await action({ action: "saveContact", contact: contactDraft })) setContactDraft(blankContact);
  }

  async function importCsv(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file) return;
    const rows = parseCsv(await file.text()).map((row) => ({
      name: row.name || row.dealership || row.businessname,
      legalName: row.legalname,
      address: row.address || row.streetaddress,
      city: row.city,
      province: row.province || "Ontario",
      postalCode: row.postalcode,
      phone: row.phone || row.phonenumber,
      website: row.website,
      omvicUrl: row.omvicurl,
      active: !["false", "no", "inactive"].includes((row.active || "true").toLowerCase()),
      source: row.source || "CSV import",
    })).filter((dealer) => dealer.name);
    if (!rows.length) return setMessage("No dealership rows were found. The CSV needs a name or dealership column.");
    const result = await action({ action: "importDealers", dealers: rows });
    if (result) setMessage(`Imported ${result.imported}; updated ${result.updated}.`);
  }

  function prepareQuoteEmail() {
    const request = requests.find((item) => item.id === quoteRequestId);
    const contact = contacts.find((item) => item.id === quoteContactId);
    const dealer = contact ? dealerById.get(contact.dealerId) : undefined;
    if (!request || !contact?.email) return setMessage("Select a customer request and a contact with an email address.");
    const subject = `Quote request: ${requestVehicle(request)}`;
    const body = `Hello ${contact.name.split(/\s+/)[0]},\n\nBeat My Car Quote is researching pricing on behalf of a customer. Please provide your best written quote for the following vehicle:\n\nVehicle: ${requestVehicle(request)}\nCondition: ${request.condition || "Not specified"}\nExterior / interior: ${[request.exteriorColor, request.interiorColor].filter(Boolean).join(" / ") || "Not specified"}\nMust-have options: ${request.mustHaveOptions || "Not specified"}\nMaximum mileage: ${request.maxMileage || "Not specified"}\n\nPlease include the exact vehicle or stock number, availability, complete selling price, every fee, financing conditions, quote expiry date and the name of the person who can honour the quote. Please do not add the customer to marketing communications.\n\nThank you,\nBeat My Car Quote\nbeatmycarquote.com${dealer ? `\n\nDealership selected: ${dealer.name}` : ""}`;
    window.location.href = `mailto:${contact.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
  }

  return (
    <div className="directory-page">
      <div className="directory-summary">
        <article><span>Dealerships</span><strong>{dealers.length}</strong></article>
        <article><span>Contacts</span><strong>{contacts.length}</strong></article>
        <article><span>Active dealers</span><strong>{dealers.filter((dealer) => dealer.active).length}</strong></article>
      </div>

      <section className="directory-card quote-request-card">
        <div><p className="eyebrow-text">Dealer outreach</p><h2>Prepare a quote request</h2><p>Creates an email draft without sharing the customer’s name, email, phone number or address.</p></div>
        <div className="quote-request-controls">
          <select value={quoteRequestId} onChange={(event) => setQuoteRequestId(event.target.value)}><option value="">Select customer request</option>{requests.filter((request) => request.status !== "Delivered").map((request) => <option key={request.id} value={request.id}>{requestVehicle(request)} — {request.customerName || "Customer"}</option>)}</select>
          <select value={quoteContactId} onChange={(event) => setQuoteContactId(event.target.value)}><option value="">Select dealer contact</option>{contacts.filter((contact) => contact.email).map((contact) => <option key={contact.id} value={contact.id}>{contact.name} — {dealerById.get(contact.dealerId)?.name || "Dealership"}</option>)}</select>
          <button className="button" onClick={prepareQuoteEmail}>Open email draft</button>
        </div>
      </section>

      <div className="directory-editor-grid">
        <form className="directory-card" onSubmit={saveDealer}>
          <div className="directory-card-heading"><div><p className="eyebrow-text">Dealership table</p><h2>{dealerDraft.id ? "Edit dealership" : "Add dealership"}</h2></div>{dealerDraft.id && <button type="button" className="text-button" onClick={() => setDealerDraft(blankDealer)}>Cancel edit</button>}</div>
          <div className="field-grid two"><label><span>Dealership name</span><input required value={dealerDraft.name || ""} onChange={(event) => setDealerDraft({ ...dealerDraft, name: event.target.value })} /></label><label><span>Legal name</span><input value={dealerDraft.legalName || ""} onChange={(event) => setDealerDraft({ ...dealerDraft, legalName: event.target.value })} /></label></div>
          <label className="full-field"><span>Street address</span><input value={dealerDraft.address || ""} onChange={(event) => setDealerDraft({ ...dealerDraft, address: event.target.value })} /></label>
          <div className="field-grid three"><label><span>City</span><input value={dealerDraft.city || ""} onChange={(event) => setDealerDraft({ ...dealerDraft, city: event.target.value })} /></label><label><span>Province</span><input value={dealerDraft.province || "Ontario"} onChange={(event) => setDealerDraft({ ...dealerDraft, province: event.target.value })} /></label><label><span>Postal code</span><input value={dealerDraft.postalCode || ""} onChange={(event) => setDealerDraft({ ...dealerDraft, postalCode: event.target.value })} /></label></div>
          <div className="field-grid two"><label><span>Phone</span><input value={dealerDraft.phone || ""} onChange={(event) => setDealerDraft({ ...dealerDraft, phone: event.target.value })} /></label><label><span>Website</span><input value={dealerDraft.website || ""} onChange={(event) => setDealerDraft({ ...dealerDraft, website: event.target.value })} /></label></div>
          <label className="full-field"><span>OMVIC profile or verification URL</span><input value={dealerDraft.omvicUrl || ""} onChange={(event) => setDealerDraft({ ...dealerDraft, omvicUrl: event.target.value })} /></label>
          <div className="directory-form-footer"><label className="checkbox-field"><input type="checkbox" checked={dealerDraft.active !== false} onChange={(event) => setDealerDraft({ ...dealerDraft, active: event.target.checked })} /><span>Active dealership</span></label><button className="button" disabled={busy}>Save dealership</button></div>
        </form>

        <form className="directory-card" onSubmit={saveContact}>
          <div className="directory-card-heading"><div><p className="eyebrow-text">Contact table</p><h2>{contactDraft.id ? "Edit contact" : "Add dealer contact"}</h2></div>{contactDraft.id && <button type="button" className="text-button" onClick={() => setContactDraft(blankContact)}>Cancel edit</button>}</div>
          <label className="full-field"><span>Dealership</span><select required value={contactDraft.dealerId || ""} onChange={(event) => setContactDraft({ ...contactDraft, dealerId: event.target.value })}><option value="">Select dealership</option>{dealers.map((dealer) => <option key={dealer.id} value={dealer.id}>{dealer.name} — {dealer.city}</option>)}</select></label>
          <div className="field-grid two"><label><span>Contact name</span><input required value={contactDraft.name || ""} onChange={(event) => setContactDraft({ ...contactDraft, name: event.target.value })} /></label><label><span>Title or department</span><input value={contactDraft.title || ""} onChange={(event) => setContactDraft({ ...contactDraft, title: event.target.value })} /></label></div>
          <div className="field-grid two"><label><span>Email address</span><input type="email" value={contactDraft.email || ""} onChange={(event) => setContactDraft({ ...contactDraft, email: event.target.value })} /></label><label><span>Phone number</span><input value={contactDraft.phone || ""} onChange={(event) => setContactDraft({ ...contactDraft, phone: event.target.value })} /></label></div>
          <label className="full-field"><span>Notes</span><textarea value={contactDraft.notes || ""} onChange={(event) => setContactDraft({ ...contactDraft, notes: event.target.value })} /></label>
          <div className="directory-form-footer"><span aria-live="polite">{message}</span><button className="button" disabled={busy}>Save contact</button></div>
        </form>
      </div>

      <section className="directory-card directory-table-card">
        <div className="directory-table-tools"><div><p className="eyebrow-text">Ontario directory</p><h2>Dealerships</h2></div><input type="search" placeholder="Search dealership, city or address" value={query} onChange={(event) => setQuery(event.target.value)} /><label className="button-secondary upload-button">Import CSV<input type="file" accept=".csv,text/csv" onChange={(event) => void importCsv(event)} /></label><a className="button-secondary" href="/dealer-directory-template.csv" download>CSV template</a></div>
        <p className="directory-source-note">Use the <a href="https://www.omvic.ca/dealer-search/" target="_blank" rel="noreferrer">official OMVIC dealer search</a> to verify registration before relying on a record. CSV columns: name, legalName, address, city, province, postalCode, phone, website, omvicUrl, active, source.</p>
        {filteredDealers.length > 300 && <p className="directory-source-note">Showing the first 300 matches. Refine your search to find another dealership.</p>}
        <div className="table-scroll"><table className="directory-table"><thead><tr><th>Dealership</th><th>Address</th><th>Phone</th><th>Source</th><th>Actions</th></tr></thead><tbody>{filteredDealers.slice(0, 300).map((dealer) => <tr key={dealer.id}><td><strong>{dealer.name}</strong><span>{dealer.active ? "Active" : "Inactive"}</span></td><td>{[dealer.address, dealer.city, dealer.province, dealer.postalCode].filter(Boolean).join(", ") || "—"}</td><td>{dealer.phone || "—"}</td><td>{dealer.source}</td><td><button className="text-button" onClick={() => setDealerDraft(dealer)}>Edit</button>{dealer.omvicUrl && <a href={dealer.omvicUrl} target="_blank" rel="noreferrer">Verify</a>}<button className="text-button danger" onClick={() => { if (window.confirm(`Delete ${dealer.name} and its contacts?`)) void action({ action: "deleteDealer", id: dealer.id }); }}>Delete</button></td></tr>)}</tbody></table></div>
      </section>

      <section className="directory-card directory-table-card">
        <div className="directory-card-heading"><div><p className="eyebrow-text">Outreach directory</p><h2>Dealer contacts</h2></div></div>
        <div className="table-scroll"><table className="directory-table"><thead><tr><th>Name</th><th>Email address</th><th>Phone number</th><th>Dealership</th><th>Actions</th></tr></thead><tbody>{contacts.map((contact) => <tr key={contact.id}><td><strong>{contact.name}</strong><span>{contact.title}</span></td><td>{contact.email ? <a href={`mailto:${contact.email}`}>{contact.email}</a> : "—"}</td><td>{contact.phone || "—"}</td><td>{dealerById.get(contact.dealerId)?.name || "Unknown dealership"}</td><td><button className="text-button" onClick={() => setContactDraft(contact)}>Edit</button><button className="text-button danger" onClick={() => { if (window.confirm(`Delete ${contact.name}?`)) void action({ action: "deleteContact", id: contact.id }); }}>Delete</button></td></tr>)}</tbody></table></div>
      </section>
    </div>
  );
}