import { notFound } from "next/navigation";
import { requireOrg, canEditLeads } from "@/lib/ctx";
import { STAGE_LABEL, STAGE_EVENT, isStage, type Stage } from "@/lib/stage-defs";
import { setStage, markLost, closeSale, appendChat } from "./actions";

export const maxDuration = 60;

type Row = Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any

const fmt = (iso?: string | null) =>
  iso ? new Date(iso).toLocaleString("id-ID", { day: "2-digit", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit", timeZone: "Asia/Jakarta" }) : "-";
const idr = (n: number) => new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR", maximumFractionDigits: 0 }).format(n);
const nowLocal = () => new Date(Date.now() + 7 * 3600e3).toISOString().slice(0, 16); // WIB untuk datetime-local

const ERR: Record<string, string> = {
  amount: "Nominal closing wajib diisi.",
  order: "Gagal menyimpan order.",
  chat: "Isi chat tidak terbaca.",
};
const EV_STATUS: Record<string, string> = { sent: "terkirim", pending: "menunggu", failed: "gagal (dicoba ulang otomatis)", skipped: "dilewati" };

export default async function LeadPage({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<{ e?: string }> }) {
  const { id } = await params;
  const { e } = await searchParams;
  const c = await requireOrg();

  const { data: lead } = await c.db.from("leads").select("*").eq("id", id).maybeSingle();
  if (!lead) notFound();
  const canEdit = canEditLeads(c.role);

  const [scoreR, histR, eventsR, productsR, chatR, ordersR] = await Promise.all([
    c.db.from("lead_scores").select("*").eq("lead_id", id).order("created_at", { ascending: false }).limit(1).maybeSingle(),
    c.db.from("lead_stage_history").select("stage, occurred_at, source, confidence").eq("lead_id", id).order("occurred_at"),
    // log event milik lead ini; akses lead sudah lolos RLS di atas
    c.admin.from("meta_events").select("event_name, status, event_time, error").eq("lead_id", id).eq("org_id", c.orgId).order("event_time"),
    c.db.from("products").select("id, name, price").eq("is_active", true).order("name"),
    canEdit ? c.db.from("chat_imports").select("raw_text, message_count, last_message_at").eq("lead_id", id).order("created_at", { ascending: false }).limit(1).maybeSingle() : Promise.resolve({ data: null }),
    c.db.from("orders").select("amount, paid_at, payment_method").eq("lead_id", id).order("paid_at"),
  ]);

  const score: Row | null = scoreR.data;
  const hist: Row[] = histR.data ?? [];
  const events: Row[] = eventsR.data ?? [];
  const products: Row[] = productsR.data ?? [];
  const chat: Row | null = chatR.data;
  const orders: Row[] = ordersR.data ?? [];
  const reached = new Set<string>(hist.map((h) => h.stage));

  const sug: string | null = score?.suggested_stage ?? null;
  const sugTs: string | undefined = (score?.stages as Row[] | undefined)?.find((x) => x.stage === sug)?.ts;
  const showSug = canEdit && sug && isStage(sug) && sug !== "purchased" && sug !== "lost" && !reached.has(sug);
  const manual: Stage[] = ["product_selected", "checkout", "payment_info"];

  return (
    <>
      <h1>{lead.customer_name || lead.phone || "Lead"}</h1>
      {e && <div className="alert">{ERR[e] ?? "Terjadi kesalahan."}</div>}

      <div className="card">
        <div className="row">
          <span className="badge">{STAGE_LABEL[lead.stage as Stage]}</span>
          {lead.temperature && <span className={`badge ${lead.temperature}`}>{lead.temperature} · {lead.score}</span>}
          {lead.phone && <a href={`https://wa.me/${lead.phone}`} target="_blank" rel="noreferrer">Buka di WhatsApp ↗</a>}
        </div>
        <p className="muted">Chat pertama {fmt(lead.first_message_at)} · terakhir {fmt(lead.last_message_at)}</p>
        {lead.source_click_id ? <p className="ok">Terhubung ke klik iklan (atribusi OK)</p> : <p className="muted">Belum terhubung ke klik iklan. Event tetap dikirim dengan nomor WA ter-hash saja.</p>}
      </div>

      {score && (
        <div className="card">
          <h2>Analisis chat</h2>
          <p>{score.reasoning}</p>
          {score.next_action && <p><b>Saran untuk CS:</b> {score.next_action}</p>}
          {(score.signals as Row[])?.length > 0 && (
            <ul>
              {(score.signals as Row[]).map((x, i) => (
                <li key={i} className={x.type === "negative" ? "hot" : x.type === "positive" ? "ok" : ""}>
                  {x.label} <span className="muted">— “{x.evidence}”</span>
                </li>
              ))}
            </ul>
          )}
          <p className="muted">Metode: {score.model}</p>
        </div>
      )}

      {canEdit && (
        <div className="card">
          <h2>Tahap &amp; event Meta</h2>
          {showSug && (
            <form action={setStage} className="alert row">
              <input type="hidden" name="lead_id" value={id} />
              <input type="hidden" name="stage" value={sug!} />
              <input type="hidden" name="at" value={sugTs ?? ""} />
              <input type="hidden" name="from_ai" value="1" />
              <span>AI menyarankan <b>{STAGE_LABEL[sug as Stage]}</b> ({Math.round(Number(score?.stage_confidence ?? 0) * 100)}% yakin).</span>
              <button className="btn">Terapkan</button>
            </form>
          )}
          {sug === "purchased" && !reached.has("purchased") && <div className="alert">AI mendeteksi indikasi pembayaran. Cek chatnya, lalu isi form Closing di bawah.</div>}
          {sug === "lost" && lead.stage !== "lost" && <div className="alert">AI mendeteksi customer berhenti/menolak. Kalau benar, tandai Lost di bawah.</div>}
          <div className="row">
            {manual.map((st) => (
              <form action={setStage} key={st}>
                <input type="hidden" name="lead_id" value={id} />
                <input type="hidden" name="stage" value={st} />
                <button className="btn ghost" disabled={reached.has(st)}>{reached.has(st) ? "✓ " : ""}{STAGE_LABEL[st]} → {STAGE_EVENT[st]}</button>
              </form>
            ))}
          </div>
        </div>
      )}

      {canEdit && lead.stage !== "lost" && (
        <div className="card">
          <h2>Closing → Purchase</h2>
          {orders.map((o, i) => <p key={i} className="ok">✓ {idr(Number(o.amount))} · {fmt(o.paid_at)} {o.payment_method ? `· ${o.payment_method}` : ""}</p>)}
          <form action={closeSale}>
            <input type="hidden" name="lead_id" value={id} />
            <div className="row fill">
              <div><label>Nominal (Rp)</label><input name="amount" inputMode="numeric" defaultValue={score?.amount_hint ?? ""} required /></div>
              <div><label>Jumlah item</label><input name="quantity" inputMode="numeric" defaultValue="1" /></div>
              <div>
                <label>Produk</label>
                <select name="product_id" defaultValue="">
                  <option value="">(tidak dipilih){score?.product_hint ? ` · AI: ${score.product_hint}` : ""}</option>
                  {products.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
                </select>
              </div>
              <div>
                <label>Metode bayar</label>
                <select name="payment_method" defaultValue="Transfer">
                  <option>Transfer</option><option>COD</option><option>Virtual account</option><option>E-wallet</option>
                </select>
              </div>
              <div><label>Waktu bayar (WIB)</label><input type="datetime-local" name="paid_at" defaultValue={nowLocal()} /></div>
            </div>
            <label>Link bukti bayar (opsional)</label>
            <input name="proof_url" placeholder="https://…" />
            <p><button className="btn">Catat closing &amp; kirim Purchase</button></p>
          </form>
          <form action={markLost} className="row">
            <input type="hidden" name="lead_id" value={id} />
            <input name="reason" placeholder="Alasan lost (opsional)" style={{ maxWidth: 280 }} />
            <button className="btn danger">Tandai Lost</button>
          </form>
        </div>
      )}

      <div className="card">
        <h2>Riwayat tahap</h2>
        <div className="scroll">
          <table>
            <thead><tr><th>Tahap</th><th>Waktu sinyal</th><th>Sumber</th></tr></thead>
            <tbody>
              {hist.map((h, i) => (
                <tr key={i}><td>{STAGE_LABEL[h.stage as Stage]}</td><td>{fmt(h.occurred_at)}</td><td className="muted">{h.source}{h.confidence ? ` ${Math.round(h.confidence * 100)}%` : ""}</td></tr>
              ))}
              {!hist.length && <tr><td colSpan={3} className="muted">Belum ada.</td></tr>}
            </tbody>
          </table>
        </div>
        <h2 style={{ marginTop: 16 }}>Event ke Meta</h2>
        <div className="scroll">
          <table>
            <thead><tr><th>Event</th><th>Waktu</th><th>Status</th></tr></thead>
            <tbody>
              {events.map((x, i) => (
                <tr key={i}>
                  <td>{x.event_name}</td><td>{fmt(x.event_time)}</td>
                  <td className={x.status === "sent" ? "ok" : x.status === "failed" ? "hot" : "muted"}>{EV_STATUS[x.status] ?? x.status}{x.error ? ` · ${x.error}` : ""}</td>
                </tr>
              ))}
              {!events.length && <tr><td colSpan={3} className="muted">Belum ada.</td></tr>}
            </tbody>
          </table>
        </div>
      </div>

      {canEdit && (
        <div className="card">
          <h2>Tambah chat terbaru</h2>
          <form action={appendChat}>
            <input type="hidden" name="lead_id" value={id} />
            <textarea name="chat_text" placeholder="Tempel hasil ekspor chat terbaru" />
            <label>…atau unggah file (.txt)</label>
            <input name="chat_file" type="file" accept=".txt,text/plain" />
            <p><button className="btn">Analisis ulang</button></p>
          </form>
          {chat && (
            <details>
              <summary className="muted">Chat tersimpan terakhir ({chat.message_count} pesan)</summary>
              <pre>{String(chat.raw_text).slice(-6000)}</pre>
            </details>
          )}
        </div>
      )}
    </>
  );
}