"use client";

import { type CSSProperties, useEffect, useState } from "react";

type Branding = { displayName: string; logoUrl: string | null; primaryColor: string; accentColor: string; backgroundColor: string };
const vehicleTypes = [
  { id: "light", name: "Veículo leve", description: "Carros, SUVs e utilitários", icon: "▱", tone: "light" },
  { id: "motorcycle", name: "Moto", description: "Roteiro específico para motocicletas", icon: "⌁", tone: "motorcycle" },
  { id: "heavy", name: "Pesado", description: "Caminhões e implementos", icon: "▰", tone: "heavy" },
];

export default function ClientNewInspectionPage() {
  const [vehicleType, setVehicleType] = useState("light");
  const [branding, setBranding] = useState<Branding | null>(null);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState("");
  const [created, setCreated] = useState<{ externalId: string; expiryMinutes: number } | null>(null);
  const [linkMessage, setLinkMessage] = useState("");
  const [linkBusy, setLinkBusy] = useState(false);

  useEffect(() => { fetch("/api/client/branding").then((response) => response.ok ? response.json() : null).then((data) => { if (data?.branding) setBranding(data.branding); }).catch(() => undefined); }, []);
  const brandStyle = branding ? { "--client-primary": branding.primaryColor, "--client-accent": branding.accentColor, "--client-background": branding.backgroundColor } as CSSProperties : undefined;

  async function createInspection(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formElement = event.currentTarget;
    const form = new FormData(formElement);
    setSaving(true); setMessage(""); setCreated(null); setLinkMessage("");
    try {
      const response = await fetch("/api/inspections", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({
        externalId: form.get("externalId"), vehicleType, plate: form.get("plate"), chassis: form.get("chassis"), vehicleDescription: form.get("vehicleDescription"), modelYear: form.get("modelYear"), responsibleName: form.get("responsibleName"), responsiblePhone: form.get("responsiblePhone"), responsibleEmail: form.get("responsibleEmail"),
      }) });
      const body = await response.json();
      if (!response.ok) throw new Error([body.error, body.hint].filter(Boolean).join(" ") || "Não foi possível criar a solicitação.");
      const expiryMap: Record<string, number> = { "15m": 15, "1h": 60, "6h": 360, "24h": 1440, "42h": 2520 };
      setCreated({ externalId: String(form.get("externalId")), expiryMinutes: expiryMap[String(form.get("linkExpiry"))] || 1440 });
      setMessage("Solicitação criada. Agora gere o link seguro para o responsável realizar a vistoria.");
      formElement.reset();
    } catch (error) { setMessage(error instanceof Error ? error.message : "Não foi possível criar a solicitação."); } finally { setSaving(false); }
  }

  async function generateLink() {
    if (!created) return;
    setLinkBusy(true); setLinkMessage("Gerando link seguro...");
    try {
      const response = await fetch(`/api/inspections/${encodeURIComponent(created.externalId)}/link`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ expiryMinutes: created.expiryMinutes }) });
      const body = await response.json();
      if (!response.ok) throw new Error([body.error, body.hint].filter(Boolean).join(" ") || "Não foi possível gerar o link.");
      const url = `${window.location.origin}${body.path}`;
      await navigator.clipboard?.writeText(url);
      setLinkMessage(`Link gerado e copiado. Válido até ${new Date(body.expiresAt).toLocaleString("pt-BR")}.`);
    } catch (error) { setLinkMessage(error instanceof Error ? error.message : "Não foi possível gerar o link."); } finally { setLinkBusy(false); }
  }

  return <main className="client-shell client-new-inspection" style={brandStyle}>
    <header className="client-topbar"><a className="client-brand" href="/cliente">{branding?.logoUrl ? <img className="client-brand-logo" src={`${branding.logoUrl}?v=${encodeURIComponent(branding.primaryColor)}`} alt={`Logo ${branding.displayName}`} /> : <><span>✓</span><b>{branding?.displayName || "Portal do cliente"}</b><i>·</i> Autovistoria Veicular</>}</a><nav><a href="/cliente">← Voltar ao portal</a></nav></header>
    <section className="form-page-wrap">
      <div className="form-intro"><div><p className="eyebrow">NOVA SOLICITAÇÃO</p><h1>Iniciar uma vistoria</h1><p>Cadastre a solicitação. O sistema a vincula automaticamente à sua empresa e permite gerar o link seguro para o responsável.</p></div></div>
      <div className="stepper"><span className="step active"><i>1</i> Dados da vistoria</span><em /><span className="step"><i>2</i> Validação</span><em /><span className="step"><i>3</i> Envio do link</span></div>
      <div className="form-layout"><form className="form-card" onSubmit={createInspection}>
        <div className="form-section"><div><p className="eyebrow">TIPO DE VEÍCULO</p><h2>Qual vistoria deseja criar?</h2></div><div className="vehicle-options">{vehicleTypes.map((type) => <button type="button" key={type.id} onClick={() => setVehicleType(type.id)} className={vehicleType === type.id ? `vehicle-option chosen ${type.tone}` : "vehicle-option"}><span className="vehicle-icon">{type.icon}</span><span><b>{type.name}</b><small>{type.description}</small></span>{vehicleType === type.id && <i>✓</i>}</button>)}</div></div>
        <div className="form-section"><p className="eyebrow">IDENTIFICAÇÃO DO VEÍCULO</p><div className="two-columns"><Field name="externalId" label="Proposta / identificador" placeholder="Ex.: PAN-87421" required /><Field name="plate" label="Placa" placeholder="ABC-1D23" pattern="[A-Za-z0-9-]{7,8}" maxLength={8} required /></div><div className="two-columns"><Field name="chassis" label="Chassi (opcional)" placeholder="Preencha se disponível para comparação" pattern="[A-Za-z0-9]{11,32}" maxLength={32} /><Field name="vehicleDescription" label="Marca e modelo" placeholder="Ex.: Honda CG 160 Titan" required /></div><Field name="modelYear" label="Ano / modelo" placeholder="2024" type="number" inputMode="numeric" min={1900} max={2035} required /></div>
        <div className="form-section"><p className="eyebrow">RESPONSÁVEL PELA VISTORIA</p><div className="two-columns"><Field name="responsibleName" label="Nome completo" placeholder="Nome de quem executará a vistoria" required /><Field name="responsiblePhone" label="Celular" placeholder="(11) 99999-9999" type="tel" inputMode="tel" pattern="[0-9()+ -]{10,20}" maxLength={20} required /></div><div className="two-columns"><Field name="responsibleEmail" label="E-mail (opcional)" placeholder="nome@empresa.com.br" type="email" /><label className="field"><span>Validade do link</span><select name="linkExpiry" defaultValue="24h"><option value="15m">15 minutos</option><option value="1h">1 hora</option><option value="6h">6 horas</option><option value="24h">24 horas</option><option value="42h">42 horas</option></select></label></div></div>
        <div className="form-footer"><a href="/cliente">Cancelar</a><button className="primary-button" type="submit" disabled={saving}>{saving ? "Criando solicitação..." : "Criar solicitação →"}</button></div>
        {message && <div className={`save-message ${created ? "" : "error"}`}>{created ? "✓ " : "! "}{message}{created && <div className="created-link-actions"><button type="button" onClick={generateLink} disabled={linkBusy}>{linkBusy ? "Gerando link..." : "Gerar e copiar link da vistoria"}</button>{linkMessage && <small>{linkMessage}</small>}</div>}</div>}
      </form><aside className="side-preview"><p className="eyebrow">PRÓXIMOS PASSOS</p><h2>Solicitação digital</h2><p className="muted">Após gerar o link, o responsável recebe uma jornada guiada pelo celular, sem instalar aplicativo.</p><div className="photo-list"><div><span>1</span>Cadastro</div><div><span>2</span>Link seguro</div><div><span>3</span>Captura guiada</div><div><span>4</span>Análise e laudo</div></div><div className="rule-note"><b>Vínculo protegido</b><p>Esta solicitação será criada exclusivamente para a empresa conectada neste portal.</p></div></aside></div>
    </section>
  </main>;
}

function Field({ name, label, placeholder, required = false, type = "text", inputMode, pattern, min, max, maxLength }: { name: string; label: string; placeholder: string; required?: boolean; type?: "text" | "number" | "tel" | "email"; inputMode?: "numeric" | "tel"; pattern?: string; min?: number; max?: number; maxLength?: number }) {
  return <label className="field"><span>{label}{required && <b> *</b>}</span><input name={name} placeholder={placeholder} required={required} type={type} inputMode={inputMode} pattern={pattern} min={min} max={max} maxLength={maxLength} /></label>;
}