"use client";

import { useState } from "react";

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 PAN", icon: "⌁", tone: "motorcycle" },
  { id: "heavy", name: "Pesado", description: "Caminhões e implementos", icon: "▰", tone: "heavy" },
];

export default function NewInspectionPage() {
  const [vehicleType, setVehicleType] = useState("light");
  const [saveState, setSaveState] = useState<"idle" | "saving" | "success" | "error">("idle");
  const [saveMessage, setSaveMessage] = useState("");
  const [createdInspection, setCreatedInspection] = useState<{ externalId: string; expiryMinutes: number } | null>(null);
  const [linkMessage, setLinkMessage] = useState("");
  const [linkBusy, setLinkBusy] = useState(false);

  async function generateCreatedLink() {
    if (!createdInspection) return;
    setLinkBusy(true); setLinkMessage("Gerando link seguro...");
    try {
      const response = await fetch(`/api/inspections/${encodeURIComponent(createdInspection.externalId)}/link`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ expiryMinutes: createdInspection.expiryMinutes }) });
      const result = await response.json();
      if (!response.ok) throw new Error([result.error, result.hint].filter(Boolean).join(" "));
      const url = `${window.location.origin}${result.path}`;
      await navigator.clipboard?.writeText(url);
      setLinkMessage(`Link gerado e copiado. Ele é válido até ${new Date(result.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="admin-page">
    <header className="admin-header"><a className="mini-brand" href="/"><span>✓</span> GRUPO <b>CAPITAL</b></a><div className="header-link"><a href="/">← Voltar ao dashboard</a><span className="avatar">GB</span></div></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 uma vistoria manualmente, importe uma planilha ou receba solicitações pela API antes de enviar o link ao responsável.</p></div><div className="source-card"><span className="source-icon">⌘</span><div><b>Integração disponível</b><small>Para alto volume, envie solicitações pela API do cliente.</small></div><button>Ver API →</button></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={async (event) => {
          event.preventDefault();
          setSaveState("saving");
          setSaveMessage("");
          setLinkMessage(""); setCreatedInspection(null);
          const formElement = event.currentTarget;
          const form = new FormData(formElement);
          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 result = await response.json();
            if (!response.ok) throw new Error([result.error, result.hint].filter(Boolean).join(" ") || "Não foi possível criar a vistoria.");
            setSaveState("success");
            const expiryMap: Record<string, number> = { "15m": 15, "1h": 60, "6h": 360, "24h": 1440, "42h": 2520 };
            setCreatedInspection({ externalId: String(form.get("externalId")), expiryMinutes: expiryMap[String(form.get("linkExpiry"))] || 1440 });
            setSaveMessage("Vistoria criada. Você já pode gerar o link seguro para o responsável, sem abrir o detalhe.");
            formElement.reset();
          } catch (error) {
            setSaveState("error");
            setSaveMessage(error instanceof Error ? error.message : "Não foi possível criar a vistoria.");
          }
        }}>
          <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>
          {vehicleType === "heavy" && <div className="form-section extra-fields"><p className="eyebrow">DADOS DE PESADOS</p><div className="two-columns"><Field name="trailerPlate" label="Placa do implemento" placeholder="Opcional" pattern="[A-Za-z0-9-]{7,8}" maxLength={8} /><Field name="hourMeter" label="Horímetro" placeholder="Ex.: 4390" type="number" inputMode="numeric" min={0} /></div></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-section"><p className="eyebrow">ORIGEM E REGRAS</p><div className="two-columns"><Field name="client" label="Cliente" placeholder="Banco PAN" /><Field name="ruleset" label="Conjunto de regras" placeholder="PAN - Crédito Auto v1.0" /></div></div>
          <div className="form-footer"><a href="/">Cancelar</a><button className="primary-button" type="submit" disabled={saveState === "saving"}>{saveState === "saving" ? "Criando vistoria..." : "Criar e validar →"}</button></div>
          {saveState !== "idle" && <div className={`save-message ${saveState === "error" ? "error" : ""}`}>{saveState === "success" ? "✓ " : "! "}{saveMessage}{createdInspection && <div className="created-link-actions"><button type="button" onClick={generateCreatedLink} 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">RESUMO DO ROTEIRO</p><h2>{vehicleType === "motorcycle" ? "Moto" : vehicleType === "heavy" ? "Pesado" : "Veículo leve"}</h2><p className="muted">O roteiro será enviado automaticamente conforme o tipo de veículo selecionado.</p><div className="photo-list">{(vehicleType === "motorcycle" ? ["Lateral direita", "Lateral esquerda", "Traseira", "Chassi", "Painel ligado"] : vehicleType === "heavy" ? ["Cabine e dianteira", "Laterais e traseira", "Chassi e motor", "Pneus e eixos", "Implemento e painel"] : ["Dianteira", "Lateral motorista", "Traseira", "Lateral passageiro", "Chassi", "Motor", "Painel ligado"]).map((item, index) => <div key={item}><span>{String(index + 1).padStart(2, "0")}</span>{item}</div>)}</div><div className="rule-note"><b>IA ativa durante a captura</b><p>O responsável recebe orientação imediata se a foto estiver desfocada, fora do enquadramento ou incorreta.</p></div><a className="preview-link" href="/vistoria/exemplo">Ver experiência do vistoriador →</a></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>;
}