"use client";

import { FormEvent, useState } from "react";

type Inventory = Record<string, string | number | boolean | null>;
const money = (cents: number) => new Intl.NumberFormat("en-CA", { style: "currency", currency: "CAD" }).format(cents / 100);
const dollars = (cents: unknown) => (Number(cents || 0) / 100).toFixed(2);
const date = (value: unknown) => value ? String(value).slice(0, 10) : "";
const formattedInput = (value: string) => { const number = Number(value.replace(/[$,\s]/g, "")); return Number.isFinite(number) ? new Intl.NumberFormat("en-CA", { style: "currency", currency: "CAD" }).format(number) : value; };

export default function GoldInventorySection({ tier, inventory, busy, onUpload, onReload, onMessage }: { tier: string | undefined; inventory: Inventory[]; busy: boolean; onUpload: (event: FormEvent<HTMLFormElement>) => void; onReload: () => Promise<unknown>; onMessage: (message: string) => void }) {
  const [editing, setEditing] = useState<Inventory | null>(null); const [saving, setSaving] = useState(false);
  async function save(event: FormEvent<HTMLFormElement>) { event.preventDefault(); setSaving(true); onMessage("Saving inventory changes…"); const form = new FormData(event.currentTarget); const body = Object.fromEntries(form.entries()); for (const field of ["vehiclePrice", "mandatoryFees", "unconditionalDiscount"]) body[field] = String(body[field] || "").replace(/[$,\sA-Z]/gi, ""); const response = await fetch("/api/dealer/inventory", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }); const result = await response.json(); setSaving(false); onMessage(response.ok ? "Inventory price updated." : result.error || "Inventory update failed."); if (response.ok) { setEditing(null); await onReload(); } }
  async function remove(row: Inventory) { if (!window.confirm(`Remove ${[row.model_year, row.make, row.model, row.trim].filter(Boolean).join(" ")} from current Gold inventory?`)) return; setSaving(true); onMessage("Removing inventory record…"); const response = await fetch("/api/dealer/inventory", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: row.id }) }); const result = await response.json(); setSaving(false); onMessage(response.ok ? "Inventory record removed." : result.error || "Removal failed."); if (response.ok) { if (editing?.id === row.id) setEditing(null); await onReload(); } }
  return <section className="gold-inventory-page"><div className="directory-card"><p className="eyebrow-text">Gold automation</p><h2>Upload current inventory pricing</h2><p>Exact make, model, trim and exterior-colour matches can create offers automatically. Prices must include every mandatory dealer fee before tax.</p>{tier === "gold" ? <form onSubmit={onUpload}><label className="inventory-drop"><span>Choose inventory CSV</span><input type="file" name="inventory" accept=".csv,text/csv" required /></label><div><a className="button-secondary" href="/gold-inventory-template.csv" download>Download CSV template</a><button className="button" disabled={busy || saving}>Validate and upload</button></div></form> : <div className="portal-warning">Gold membership is required to upload and manage automated pricing.</div>}</div>{editing && <form className="directory-card inventory-edit-form" onSubmit={save}><div><p className="eyebrow-text">Edit current inventory</p><h2>{[editing.model_year, editing.make, editing.model, editing.trim].filter(Boolean).join(" ")}</h2></div><input type="hidden" name="id" value={String(editing.id)} /><div className="field-grid three"><label><span>Condition</span><select name="condition" defaultValue={String(editing.condition || "New")}><option>New</option><option>Used</option></select></label><label><span>Year</span><input name="year" inputMode="numeric" defaultValue={String(editing.model_year || "")} /></label><label><span>Stock number</span><input name="stockNumber" defaultValue={String(editing.stock_number || "")} /></label></div><div className="field-grid three"><label><span>Make</span><input name="make" required defaultValue={String(editing.make || "")} /></label><label><span>Model</span><input name="model" required defaultValue={String(editing.model || "")} /></label><label><span>Trim</span><input name="trim" required defaultValue={String(editing.trim || "")} /></label></div><div className="field-grid three"><label><span>Exterior colour</span><input name="exteriorColor" required defaultValue={String(editing.exterior_color || "")} /></label><label><span>Interior colour</span><input name="interiorColor" defaultValue={String(editing.interior_color || "")} /></label><label><span>VIN</span><input name="vin" defaultValue={String(editing.vin || "")} /></label></div><div className="field-grid three"><label><span>Vehicle price</span><input name="vehiclePrice" inputMode="decimal" required defaultValue={formattedInput(dollars(editing.vehicle_price_cents))} onFocus={(e) => { e.currentTarget.value = e.currentTarget.value.replace(/[$,\sA-Z]/gi, ""); }} onBlur={(e) => { e.currentTarget.value = formattedInput(e.currentTarget.value); }} /></label><label><span>Mandatory fees</span><input name="mandatoryFees" inputMode="decimal" required defaultValue={formattedInput(dollars(editing.mandatory_fees_cents))} onFocus={(e) => { e.currentTarget.value = e.currentTarget.value.replace(/[$,\sA-Z]/gi, ""); }} onBlur={(e) => { e.currentTarget.value = formattedInput(e.currentTarget.value); }} /></label><label><span>Unconditional discount</span><input name="unconditionalDiscount" inputMode="decimal" required defaultValue={formattedInput(dollars(editing.unconditional_discount_cents))} onFocus={(e) => { e.currentTarget.value = e.currentTarget.value.replace(/[$,\sA-Z]/gi, ""); }} onBlur={(e) => { e.currentTarget.value = formattedInput(e.currentTarget.value); }} /></label></div><div className="field-grid three"><label><span>Quantity</span><input name="quantity" type="number" min="0" step="1" required defaultValue={String(editing.quantity_available ?? 1)} /></label><label><span>Valid until</span><input name="validUntil" type="date" required defaultValue={date(editing.valid_until)} /></label><label><span>Options</span><input name="options" defaultValue={String(editing.options_text || "")} /></label></div><div className="inventory-edit-actions"><button type="button" className="button-secondary" onClick={() => setEditing(null)}>Cancel</button><button className="button" disabled={saving}>{saving ? "Saving…" : "Save inventory changes"}</button></div></form>}<div className="directory-card directory-table-card"><h2>Current inventory</h2><div className="table-scroll"><table className="directory-table"><thead><tr><th>Stock</th><th>Vehicle</th><th>Colour</th><th>All-in price</th><th>Valid until</th><th>Manage</th></tr></thead><tbody>{inventory.length ? inventory.map((row) => <tr key={String(row.id)}><td>{row.stock_number || "—"}</td><td><strong>{[row.model_year, row.make, row.model, row.trim].filter(Boolean).join(" ")}</strong></td><td>{row.exterior_color || "—"}</td><td><strong>{money(Number(row.comparable_price_cents))}</strong><span>{money(Number(row.vehicle_price_cents))} + {money(Number(row.mandatory_fees_cents))} − {money(Number(row.unconditional_discount_cents))}</span></td><td>{date(row.valid_until)}</td><td><div className="inventory-row-actions"><button disabled={tier !== "gold" || saving} onClick={() => setEditing(row)}>Edit</button><button className="danger" disabled={tier !== "gold" || saving} onClick={() => void remove(row)}>Delete</button></div></td></tr>) : <tr><td colSpan={6}>No active inventory records.</td></tr>}</tbody></table></div></div></section>;
}