"use client";

import { useState } from "react";

type Result = { id: string; externalId: string; status: string; inspectionPath: string; expiresAt: string; delivery: { channel: string; status: string; message: string }; message: string };

const nowId = () => `SIM-${new Date().toISOString().replace(/[-:.TZ]/g, "").slice(0, 14)}`;

export default function IntegrationSimulatorPage() {
  const [apiKey, setApiKey] = useState("");
  const [form, setForm] = useState({ externalId: nowId(), vehicleType: "light", plate: "ABC1D23", chassis: "", vehicleDescription: "Veículo de demonstração", modelYear: "2024", responsibleName: "Responsável de teste", responsiblePhone: "11999999999", responsibleEmail: "", deliveryChannel: "whatsapp" });
  const [result, setResult] = useState<Result | null>(null);
  const [message, setMessage] = useState("");
  const [sending, setSending] = useState(false);
  const origin = typeof window === "undefined" ? "" : window.location.origin;
  const link = result ? `${origin}${result.inspectionPath}` : "";
  const phone = (() => { const digits = form.responsiblePhone.replace(/\D/g, ""); return digits.length === 10 || digits.length === 11 ? `55${digits}` : digits; })();
  const deliveryText = `Olá, ${form.responsibleName}! Sua Autovistoria Veicular está pronta. Abra o link para iniciar: ${link}`;

  function change(name: keyof typeof form, value: string) { setForm(current => ({ ...current, [name]: value })); }
  async function copy(value: string) { try { await navigator.clipboard?.writeText(value); setMessage("Copiado para a área de transferência."); } catch { setMessage("Não foi possível copiar automaticamente."); } }
  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault(); setSending(true); setMessage("Enviando a solicitação de teste para a API..."); setResult(null);
    try {
      const response = await fetch("/api/public/v1/inspections", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}` }, body: JSON.stringify(form) });
      const body = await response.json();
      if (!response.ok) throw new Error([body.error, body.hint].filter(Boolean).join(" "));
      setResult(body); setMessage("Solicitação recebida pela API. A vistoria e o link seguro foram criados.");
    } catch (error) { setMessage(error instanceof Error ? error.message : "Não foi possível executar a simulação."); } finally { setSending(false); }
  }

  return <main className="integration-simulator-page"><header className="rules-header"><a href="/integracoes">← Integrações</a><a href="/">Dashboard Capital</a></header><section className="rules-heading"><p className="eyebrow">SIMULADOR DE ORIGEM EXTERNA</p><h1>Testar recebimento automático</h1><p>Esta tela reproduz a chamada que o sistema do PAN ou de outro cliente fará. Ela usa a API pública real, cria a vistoria e gera o link seguro automaticamente.</p></section><section className="simulator-grid"><form className="simulator-form" onSubmit={submit}><p className="eyebrow">REQUISIÇÃO DE TESTE</p><h2>Dados enviados pelo cliente</h2><label>Chave da API da conexão de entrada<input type="password" value={apiKey} onChange={event => setApiKey(event.target.value)} placeholder="cav_..." autoComplete="off" required /><small>A chave não é salva neste navegador pelo sistema.</small></label><div className="two-columns"><label>Proposta / identificador<input value={form.externalId} onChange={event => change("externalId", event.target.value)} required /></label><label>Tipo do veículo<select value={form.vehicleType} onChange={event => change("vehicleType", event.target.value)}><option value="light">Veículo leve</option><option value="motorcycle">Moto</option><option value="heavy">Pesado</option></select></label></div><div className="two-columns"><label>Placa<input value={form.plate} onChange={event => change("plate", event.target.value)} required /></label><label>Chassi (opcional)<input value={form.chassis} onChange={event => change("chassis", event.target.value)} /></label></div><div className="two-columns"><label>Marca e modelo<input value={form.vehicleDescription} onChange={event => change("vehicleDescription", event.target.value)} /></label><label>Ano / modelo<input type="number" value={form.modelYear} onChange={event => change("modelYear", event.target.value)} /></label></div><div className="two-columns"><label>Responsável<input value={form.responsibleName} onChange={event => change("responsibleName", event.target.value)} required /></label><label>Celular<input value={form.responsiblePhone} onChange={event => change("responsiblePhone", event.target.value)} required /></label></div><div className="two-columns"><label>E-mail do responsável <span className="optional">Opcional</span><input type="email" value={form.responsibleEmail} onChange={event => change("responsibleEmail", event.target.value)} /></label><label>Canal automático<select value={form.deliveryChannel} onChange={event => change("deliveryChannel", event.target.value)}><option value="whatsapp">WhatsApp</option><option value="sms">SMS</option><option value="email">E-mail</option></select></label></div><button type="submit" disabled={sending}>{sending ? "Enviando para a API..." : "Simular envio externo"}</button></form><aside className="simulator-result"><p className="eyebrow">RESULTADO DA INTEGRAÇÃO</p>{result ? <><h2>Vistoria criada</h2><p className="simulator-success">✓ {result.message}</p><dl><div><dt>Proposta</dt><dd>{result.externalId}</dd></div><div><dt>Status</dt><dd>Link gerado</dd></div><div><dt>Canal</dt><dd>{result.delivery.channel.toUpperCase()}</dd></div><div><dt>Validade</dt><dd>{new Date(result.expiresAt).toLocaleString("pt-BR")}</dd></div></dl><label>Link retornado pela API<input readOnly value={link} onFocus={event => event.currentTarget.select()} /></label><div className="simulator-actions"><button onClick={() => copy(link)}>Copiar link</button><a href={link} target="_blank" rel="noreferrer">Abrir vistoria ↗</a></div><div className="simulator-delivery"><b>Disparo automático</b><p>{result.delivery.message}</p><div><a href={`https://wa.me/${phone}?text=${encodeURIComponent(deliveryText)}`} target="_blank" rel="noreferrer">Testar WhatsApp</a><a href={`sms:${phone}?body=${encodeURIComponent(deliveryText)}`}>Testar SMS</a><a href={`mailto:${form.responsibleEmail}?subject=${encodeURIComponent("Autovistoria Veicular")}&body=${encodeURIComponent(deliveryText)}`}>Testar e-mail</a></div></div></> : <><h2>Aguardando teste</h2><p>Informe uma chave de integração de entrada e envie os dados. O resultado exibirá exatamente a resposta que uma integração externa recebe.</p><code>POST /api/public/v1/inspections</code></>}{message && <small className="simulator-message">{message}</small>}</aside></section></main>;
}