// View components — one per tab

// =========================
// OVERVIEW
// =========================
function OverviewView({ data, onCall, onSelectAlarm, onGoTab }) {
  const alarms = data.alarms || [];
  const calls = data.calls || [];

  const active = alarms.filter(a => a.status === "active" || a.status === "dispatching" || a.status === "in_progress");
  const fires = alarms.filter(a => a.crmssStatus === "FIRE");
  const faults = alarms.filter(a => a.crmssStatus === "FAULT");
  const noResponse = alarms.filter(a => a.crmssStatus === "NO RESPONSE" || a.crmssStatus === "NO AVAILABLE");

  const today = new Date().toISOString().split("T")[0];
  const callsToday = calls.filter(c => c.startedAt?.startsWith(today));
  const answeredCalls = calls.filter(c => c.status === "answered" || c.status === "completed");
  const responseRate = calls.length > 0 ? Math.round((answeredCalls.length / calls.length) * 100) : 0;

  // Activity feed — recent calls
  const recentCalls = React.useMemo(() =>
    [...calls].sort((a, b) => new Date(b.startedAt) - new Date(a.startedAt)).slice(0, 15),
    [calls]
  );

  return (
    <div className="flex flex-col gap-6">
      <SectionHeader
        title="Dashboard"
        subtitle="Fire alarm monitoring overview"
        action={
          <div className="flex items-center gap-2 text-xs text-ink-400 font-mono">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 pulse-dot"></span>
            Nova active · monitoring
          </div>
        }
      />

      {/* KPIs */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
        <KpiCard label="Active Alarms" value={active.length} sub="pending dispatch" icon={<I.Flame size={14} />} tone="amber" />
        <KpiCard label="Calls Today" value={callsToday.length} sub="outbound + inbound" icon={<I.Phone size={14} />} tone="sky" />
        <KpiCard label="Response Rate" value={`${responseRate}%`} sub="answered / total" icon={<I.Activity size={14} />} tone="emerald" />
        <KpiCard label="Confirmed Fires" value={fires.length} sub="real fire events" icon={<I.Flame size={14} />} tone="rose" />
        <KpiCard label="False Alarms" value={faults.length} sub="confirmed faults" icon={<I.AlertTriangle size={14} />} />
        <KpiCard label="No Response" value={noResponse.length} sub="unreachable" icon={<I.PhoneOff size={14} />} tone="amber" />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Activity feed */}
        <div className="card rounded-xl p-5 lg:col-span-3 flex flex-col">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h2 className="text-sm font-semibold text-ink-100">Recent Activity</h2>
              <p className="text-xs text-ink-400 mt-0.5">Calls and alarm verifications</p>
            </div>
            <button onClick={() => onGoTab("calls")} className="text-xs text-amber-300 hover:text-amber-200 inline-flex items-center gap-1">
              View all <I.ArrowRight size={12} />
            </button>
          </div>

          {recentCalls.length === 0 ? <Empty>No activity yet</Empty> : (
            <div className="flex flex-col">
              {recentCalls.map((call, idx) => {
                const alarm = alarms.find(a => a.id === call.alarmRecordId);
                const isLast = idx === recentCalls.length - 1;
                const time = new Date(call.startedAt);
                const timeStr = fmtClock(time);
                const typeMeta = alarmTypeMeta(call.parameterType);
                const Icn = I[typeMeta.icon];

                return (
                  <div key={call.id} className="relative pl-9 pb-3">
                    {!isLast && <span className="absolute left-3 top-7 bottom-0 w-px bg-white/8"></span>}
                    <span className={`absolute left-0 top-0.5 w-6 h-6 rounded-md ${typeMeta.bg} ${typeMeta.color} inline-flex items-center justify-center`}>
                      <Icn size={12} />
                    </span>
                    <div className="flex items-baseline justify-between gap-3">
                      <button onClick={() => alarm && onSelectAlarm(alarm)} className="text-sm text-ink-100 hover:text-amber-300 text-left font-medium truncate">
                        {call.buildingName || "Unknown Building"}
                      </button>
                      <span className="text-[11px] text-ink-500 font-mono whitespace-nowrap">{fmtDate(call.startedAt)} {timeStr}</span>
                    </div>
                    <div className="text-xs text-ink-400 flex items-center gap-2 mt-0.5 flex-wrap">
                      <span className="inline-flex items-center gap-1">
                        {call.direction === "outbound" ? <I.ArrowUpRight size={12} /> : <I.ArrowDownLeft size={12} />}
                        {call.direction === "outbound" ? "Outbound" : "Inbound"}
                      </span>
                      <span className="text-ink-600">·</span>
                      <span>{call.contactPerson}</span>
                      <span className="text-ink-600">·</span>
                      {call.crmssStatus && <CrmssStatusBadge status={call.crmssStatus} />}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// =========================
// ALARMS
// =========================
function AlarmsView({ data, onCall, onSelectAlarm, onGoTab }) {
  const [query, setQuery] = React.useState("");
  const [statusFilter, setStatusFilter] = React.useState("all");
  const alarms = data.alarms || [];

  const filtered = React.useMemo(() => {
    const q = query.toLowerCase().trim();
    return alarms.filter(a => {
      if (statusFilter !== "all" && a.status !== statusFilter) return false;
      if (!q) return true;
      return (
        a.buildingName?.toLowerCase().includes(q) ||
        a.contactPerson?.toLowerCase().includes(q) ||
        a.phoneNo?.toLowerCase().includes(q) ||
        String(a.alarmId).includes(q) ||
        a.parameterType?.toLowerCase().includes(q)
      );
    });
  }, [alarms, query, statusFilter]);

  return (
    <div className="flex flex-col gap-5">
      <SectionHeader
        title="Alarms"
        subtitle={`${alarms.length} total · ${filtered.length} shown`}
      />

      <div className="flex flex-wrap items-center gap-2">
        <div className="relative flex-1 min-w-[260px]">
          <I.Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-ink-500" />
          <input
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="Search by building, contact, phone, or alarm ID…"
            className="w-full bg-ink-900 border border-white/10 rounded-lg pl-9 pr-3 py-2 text-sm text-ink-100 placeholder-ink-500 ring-focus"
          />
        </div>
        <div className="inline-flex rounded-lg border border-white/10 bg-ink-900 p-0.5">
          {[
            { id: "all", label: "All" },
            { id: "active", label: "Active" },
            { id: "in_progress", label: "In Progress" },
            { id: "completed", label: "Completed" },
            { id: "failed", label: "Failed" },
          ].map(opt => (
            <button
              key={opt.id}
              onClick={() => setStatusFilter(opt.id)}
              className={`px-3 py-1.5 text-xs rounded-md transition-colors ${
                statusFilter === opt.id ? "bg-white/10 text-ink-100" : "text-ink-400 hover:text-ink-200"
              }`}
            >{opt.label}</button>
          ))}
        </div>
      </div>

      <div className="card rounded-xl overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left text-[11px] uppercase tracking-wider text-ink-500 border-b border-white/5 bg-white/2">
                <th className="px-4 py-3 font-medium">Alarm</th>
                <th className="px-4 py-3 font-medium">Building</th>
                <th className="px-4 py-3 font-medium">Contact</th>
                <th className="px-4 py-3 font-medium">Type</th>
                <th className="px-4 py-3 font-medium">Status</th>
                <th className="px-4 py-3 font-medium">CRMSS</th>
                <th className="px-4 py-3 font-medium">Lang</th>
                <th className="px-4 py-3 font-medium text-right">Actions</th>
              </tr>
            </thead>
            <tbody>
              {filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).map(a => (
                <tr
                  key={a.id}
                  onClick={() => onSelectAlarm(a)}
                  className="border-b border-white/5 last:border-0 hover:bg-white/3 cursor-pointer transition-colors"
                >
                  <td className="px-4 py-3">
                    <span className="text-ink-100 font-mono text-xs">#{a.alarmId}</span>
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex flex-col">
                      <span className="text-ink-100 font-medium">{a.buildingName}</span>
                      <span className="text-[11px] text-ink-500 font-mono mt-0.5">{timeAgo(a.createdAt)}</span>
                    </div>
                  </td>
                  <td className="px-4 py-3">
                    <div className="flex flex-col">
                      <span className="text-ink-200">{a.contactPerson}</span>
                      <span className="text-[11px] text-ink-500 font-mono">{a.phoneNo}</span>
                    </div>
                  </td>
                  <td className="px-4 py-3"><AlarmTypeBadge type={a.parameterType} /></td>
                  <td className="px-4 py-3"><AlarmStatusBadge status={a.status} /></td>
                  <td className="px-4 py-3">{a.crmssStatus ? <CrmssStatusBadge status={a.crmssStatus} /> : <span className="text-ink-500">—</span>}</td>
                  <td className="px-4 py-3"><LangBadge lang={a.defaultLanguage} /></td>
                  <td className="px-4 py-3">
                    <div className="flex justify-end gap-1">
                      <CallButton alarm={a} onCall={onCall} />
                    </div>
                  </td>
                </tr>
              ))}
              {filtered.length === 0 && <tr><td colSpan={8}><Empty>No alarms found</Empty></td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// =========================
// CALLS
// =========================
function CallsView({ data, onSelectAlarm, onDelete }) {
  const [modalId, setModalId] = React.useState(null);
  const calls = data.calls || [];
  const alarms = data.alarms || [];

  const sorted = React.useMemo(() =>
    [...calls].sort((a, b) => new Date(b.startedAt) - new Date(a.startedAt)),
    [calls]
  );

  // Group by day
  const grouped = React.useMemo(() => {
    const now = new Date();
    const todayStr = now.toISOString().split("T")[0];
    const yesterday = new Date(now); yesterday.setDate(yesterday.getDate() - 1);
    const yesterdayStr = yesterday.toISOString().split("T")[0];
    const groups = {};
    for (const c of sorted) {
      const d = (c.startedAt || "").split("T")[0];
      let label = d === todayStr ? "Today" : d === yesterdayStr ? "Yesterday" : fmtDate(c.startedAt);
      if (!groups[label]) groups[label] = [];
      groups[label].push(c);
    }
    return groups;
  }, [sorted]);

  const modalCall = modalId ? sorted.find(c => c.id === modalId) : null;
  const modalAlarm = modalCall ? alarms.find(a => a.id === modalCall.alarmRecordId) : null;
  const modalParsed = modalCall ? parseTranscript(modalCall.transcript) : null;

  return (
    <div className="flex flex-col gap-5">
      <SectionHeader title="Calls" subtitle={`${calls.length} total calls`} />

      {Object.entries(grouped).map(([dayLabel, items]) => (
        <div key={dayLabel} className="flex flex-col gap-1">
          <div className="flex items-center gap-2 mb-2 px-1">
            <span className="text-ink-400"><I.Calendar size={13} /></span>
            <span className="text-xs font-semibold text-ink-300 uppercase tracking-wider">{dayLabel}</span>
            <span className="text-[10px] text-ink-500 font-mono bg-white/5 px-1.5 py-0.5 rounded">{items.length}</span>
          </div>
          <div className="card rounded-xl overflow-hidden">
            <table className="w-full text-sm">
              <thead>
                <tr className="text-left text-[10px] uppercase tracking-wider text-ink-500 border-b border-white/5 bg-white/2">
                  <th className="px-4 py-2.5 font-medium w-20">Time</th>
                  <th className="px-4 py-2.5 font-medium">Building</th>
                  <th className="px-4 py-2.5 font-medium">Contact</th>
                  <th className="px-4 py-2.5 font-medium w-24">Direction</th>
                  <th className="px-4 py-2.5 font-medium w-28">Result</th>
                  <th className="px-4 py-2.5 font-medium w-20 text-center">Msgs</th>
                  <th className="px-4 py-2.5 font-medium w-16 text-right"></th>
                </tr>
              </thead>
              <tbody>
                {items.map(c => {
                  const time = new Date(c.startedAt);
                  const timeStr = fmtClock(time);
                  const { turns } = parseTranscript(c.transcript);
                  return (
                    <tr
                      key={c.id}
                      onClick={() => setModalId(c.id)}
                      className="border-b border-white/5 last:border-0 hover:bg-amber-500/5 cursor-pointer transition-colors group"
                    >
                      <td className="px-4 py-3"><span className="font-mono text-xs text-ink-300">{timeStr}</span></td>
                      <td className="px-4 py-3"><span className="text-ink-100 font-medium">{c.buildingName || "—"}</span></td>
                      <td className="px-4 py-3">
                        <div className="flex flex-col">
                          <span className="text-ink-200">{c.contactPerson || "—"}</span>
                          <span className="text-[10px] text-ink-500 font-mono">{c.phoneNo}</span>
                        </div>
                      </td>
                      <td className="px-4 py-3">
                        <Badge tone="default">
                          {c.direction === "outbound" ? <I.ArrowUpRight size={11} /> : <I.ArrowDownLeft size={11} />}
                          {c.direction === "outbound" ? "Out" : "In"}
                        </Badge>
                      </td>
                      <td className="px-4 py-3">
                        {c.crmssStatus ? <CrmssStatusBadge status={c.crmssStatus} /> : <span className="text-ink-500">—</span>}
                      </td>
                      <td className="px-4 py-3 text-center">
                        {turns.length > 0 ? (
                          <span className="inline-flex items-center gap-1 text-xs text-ink-300">
                            <I.MessageSquare size={11} /> {turns.length}
                          </span>
                        ) : <span className="text-xs text-ink-500">—</span>}
                      </td>
                      <td className="px-4 py-3 text-right">
                        <div className="flex items-center justify-end gap-1">
                          <button
                            onClick={e => { e.stopPropagation(); if (confirm("Delete this call?")) onDelete(c.id); }}
                            className="text-ink-600 hover:text-rose-300 p-1 rounded hover:bg-rose-500/10 transition-colors opacity-0 group-hover:opacity-100"
                          ><I.Trash size={13} /></button>
                          <span className="text-ink-500 group-hover:text-amber-300 transition-colors"><I.ChevronRight size={14} /></span>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      ))}
      {sorted.length === 0 && <Empty>No calls yet</Empty>}

      {/* Transcript Modal */}
      {modalCall && (
        <div className="fixed inset-0 z-[70] flex items-center justify-center fade-in">
          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setModalId(null)} />
          <div className="relative w-full max-w-lg mx-4 card rounded-2xl overflow-hidden shadow-2xl border border-white/10 flex flex-col" style={{ maxHeight: "80vh" }}>
            <div className="px-5 py-4 bg-ink-800/80 border-b border-white/5 shrink-0">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="text-sm font-semibold text-ink-100 flex items-center gap-2">
                    {modalCall.buildingName || "Call"}
                    {modalCall.crmssStatus && <CrmssStatusBadge status={modalCall.crmssStatus} />}
                  </h3>
                  <div className="text-[11px] text-ink-400 mt-0.5 flex items-center gap-2 font-mono">
                    <span>{fmtDateTime(modalCall.startedAt)}</span>
                    <span className="text-ink-600">·</span>
                    <span>{modalCall.contactPerson} ({modalCall.phoneNo})</span>
                  </div>
                </div>
                <button onClick={() => setModalId(null)} className="w-7 h-7 rounded-lg hover:bg-white/10 inline-flex items-center justify-center text-ink-400 hover:text-ink-200">
                  <I.X size={16} />
                </button>
              </div>
            </div>

            <div className="flex-1 overflow-y-auto px-5 py-4 bg-ink-950/60">
              {modalParsed.turns.length > 0 ? (
                <div className="flex flex-col gap-2.5">
                  {modalParsed.turns.map((t, idx) => {
                    if (t.speaker === "tool_call" || t.speaker === "tool_result") {
                      const isTool = t.speaker === "tool_call";
                      return (
                        <div key={idx} className="flex justify-center">
                          <div className={`inline-flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-mono max-w-[85%]`}
                            style={{ background: isTool ? "rgba(139,92,246,0.08)" : "rgba(52,211,153,0.06)", border: `1px solid ${isTool ? "rgba(139,92,246,0.2)" : "rgba(52,211,153,0.2)"}` }}>
                            {isTool ? <I.Wrench size={11} className="text-violet-400 shrink-0" /> : <I.Check size={11} className="text-emerald-400 shrink-0" />}
                            <span className={isTool ? "text-violet-300 break-all" : "text-emerald-300/80 break-all"}>{t.text}</span>
                          </div>
                        </div>
                      );
                    }
                    return (
                      <div key={idx} className={`flex ${t.speaker === "bot" ? "justify-start" : "justify-end"}`}>
                        <div className={`bubble ${
                          t.speaker === "bot"
                            ? "bg-amber-500/10 text-ink-100 ring-1 ring-amber-500/20 rounded-tl-sm"
                            : "bg-white/5 text-ink-100 ring-1 ring-white/10 rounded-tr-sm"
                        }`}>
                          <div className="text-[10px] uppercase tracking-wider opacity-60 mb-1">
                            {t.speaker === "bot" ? "🤖 Nova" : "👤 Contact"}
                          </div>
                          {t.text}
                        </div>
                      </div>
                    );
                  })}
                </div>
              ) : <Empty>No transcript available</Empty>}
            </div>

            <div className="px-5 py-3 bg-ink-800/50 border-t border-white/5 flex items-center justify-between shrink-0">
              <div className="flex items-center gap-2">
                <LangBadge lang={modalCall.language} />
                {modalAlarm && <AlarmTypeBadge type={modalAlarm.parameterType} />}
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => { if (confirm("Delete this call?")) { onDelete(modalCall.id); setModalId(null); } }}
                  className="text-xs text-rose-400 hover:text-rose-300 px-3 py-1.5 rounded-lg hover:bg-rose-500/10 transition-colors inline-flex items-center gap-1"
                ><I.Trash size={12} /> Delete</button>
                <button onClick={() => setModalId(null)} className="text-xs text-ink-400 hover:text-ink-200 px-3 py-1.5 rounded-lg hover:bg-white/5 transition-colors">Close</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// =========================
// BUILDINGS (extracted from alarms)
// =========================
function BuildingsView({ data }) {
  const alarms = data.alarms || [];
  const calls = data.calls || [];

  const buildings = React.useMemo(() => {
    const map = {};
    for (const a of alarms) {
      const key = a.buildingName || "Unknown";
      if (!map[key]) map[key] = { name: key, alarms: [], calls: [], contacts: new Set(), languages: new Set() };
      map[key].alarms.push(a);
      map[key].contacts.add(a.contactPerson);
      map[key].languages.add(a.defaultLanguage || "en");
    }
    for (const c of calls) {
      const key = c.buildingName || "Unknown";
      if (map[key]) map[key].calls.push(c);
    }
    return Object.values(map).sort((a, b) => b.alarms.length - a.alarms.length);
  }, [alarms, calls]);

  return (
    <div className="flex flex-col gap-5">
      <SectionHeader title="Buildings" subtitle={`${buildings.length} buildings with alarms`} />

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
        {buildings.map(b => {
          const fires = b.alarms.filter(a => a.crmssStatus === "FIRE").length;
          const faults = b.alarms.filter(a => a.crmssStatus === "FAULT").length;

          return (
            <div key={b.name} className="card rounded-xl p-4 card-hover">
              <div className="flex items-start gap-3">
                <span className="w-9 h-9 rounded-lg bg-amber-500/10 text-amber-300 inline-flex items-center justify-center shrink-0">
                  <I.Building size={18} />
                </span>
                <div className="flex-1 min-w-0">
                  <h3 className="text-sm font-semibold text-ink-100 truncate">{b.name}</h3>
                  <div className="text-[11px] text-ink-500 mt-0.5">{[...b.contacts].join(", ")}</div>
                </div>
              </div>

              <div className="flex items-center gap-3 mt-4 pt-3 border-t border-white/5">
                <div className="flex items-center gap-1 text-xs text-ink-300">
                  <I.Flame size={12} /> {b.alarms.length} alarms
                </div>
                <div className="flex items-center gap-1 text-xs text-ink-300">
                  <I.Phone size={12} /> {b.calls.length} calls
                </div>
                {fires > 0 && <Badge tone="rose">🔥 {fires}</Badge>}
                {faults > 0 && <Badge tone="amber">⚠️ {faults}</Badge>}
                <div className="ml-auto flex gap-1">
                  {[...b.languages].map(l => <LangBadge key={l} lang={l} />)}
                </div>
              </div>
            </div>
          );
        })}
      </div>
      {buildings.length === 0 && <Empty>No buildings with alarms</Empty>}
    </div>
  );
}