// Alarm detail side panel

function AlarmPanel({ alarm, data, onClose, onCall, onDelete }) {
  const calls = (data.calls || []).filter(c => c.alarmRecordId === alarm.id);
  const sortedCalls = [...calls].sort((a, b) => new Date(b.startedAt) - new Date(a.startedAt));

  return (
    <div className="fixed inset-0 z-[60] flex justify-end fade-in">
      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
      <div className="relative w-full max-w-md bg-ink-900 border-l border-white/10 h-full overflow-y-auto slide-in">
        {/* Header */}
        <div className="sticky top-0 z-10 bg-ink-900/95 backdrop-blur-md px-5 py-4 border-b border-white/5">
          <div className="flex items-start justify-between gap-3">
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 flex-wrap">
                <h2 className="text-base font-semibold text-ink-100">Alarm #{alarm.alarmId}</h2>
                <AlarmStatusBadge status={alarm.status} />
              </div>
              <div className="text-xs text-ink-400 mt-1">{alarm.buildingName}</div>
            </div>
            <button
              onClick={onClose}
              className="w-8 h-8 rounded-lg hover:bg-white/10 inline-flex items-center justify-center text-ink-400 hover:text-ink-200 shrink-0"
            >
              <I.X size={16} />
            </button>
          </div>
        </div>

        <div className="px-5 py-5 flex flex-col gap-5">
          {/* Alarm info */}
          <div className="grid grid-cols-2 gap-3">
            <div className="card rounded-lg p-3">
              <div className="text-[10px] text-ink-500 uppercase tracking-wider mb-1">Contact</div>
              <div className="text-sm text-ink-100 font-medium">{alarm.contactPerson}</div>
              <div className="text-xs text-ink-400 font-mono mt-0.5">{alarm.phoneNo}</div>
            </div>
            <div className="card rounded-lg p-3">
              <div className="text-[10px] text-ink-500 uppercase tracking-wider mb-1">Alarm Type</div>
              <AlarmTypeBadge type={alarm.parameterType} />
            </div>
            <div className="card rounded-lg p-3">
              <div className="text-[10px] text-ink-500 uppercase tracking-wider mb-1">Language</div>
              <LangBadge lang={alarm.defaultLanguage} />
            </div>
            <div className="card rounded-lg p-3">
              <div className="text-[10px] text-ink-500 uppercase tracking-wider mb-1">CRMSS Status</div>
              {alarm.crmssStatus ? <CrmssStatusBadge status={alarm.crmssStatus} /> : <span className="text-ink-500 text-sm">Pending</span>}
            </div>
          </div>

          {/* Timestamps */}
          <div className="card rounded-lg p-3">
            <div className="text-[10px] text-ink-500 uppercase tracking-wider mb-2">Timeline</div>
            <div className="flex flex-col gap-1.5 text-xs">
              <div className="flex justify-between">
                <span className="text-ink-400">Created</span>
                <span className="text-ink-200 font-mono">{fmtDateTime(alarm.createdAt)}</span>
              </div>
              {alarm.lastDispatchAt && (
                <div className="flex justify-between">
                  <span className="text-ink-400">Last Dispatch</span>
                  <span className="text-ink-200 font-mono">{fmtDateTime(alarm.lastDispatchAt)}</span>
                </div>
              )}
              <div className="flex justify-between">
                <span className="text-ink-400">Attempts</span>
                <span className="text-ink-200 font-mono">{alarm.attempts} / {alarm.maxAttempts}</span>
              </div>
            </div>
          </div>

          {/* Actions */}
          <div className="flex items-center gap-2">
            <CallButton alarm={alarm} onCall={onCall} />
            <Btn tone="danger" size="sm" icon={<I.Trash size={12} />} onClick={() => { if (confirm("Delete this alarm?")) { onDelete(alarm.id); onClose(); } }}>
              Delete
            </Btn>
          </div>

          {/* Call history */}
          <div>
            <h3 className="text-sm font-semibold text-ink-100 mb-3">Call History ({calls.length})</h3>
            {sortedCalls.length === 0 ? (
              <Empty>No calls for this alarm</Empty>
            ) : (
              <div className="flex flex-col gap-2">
                {sortedCalls.map(c => {
                  const { turns } = parseTranscript(c.transcript);
                  return (
                    <div key={c.id} className="card rounded-lg p-3 card-hover">
                      <div className="flex items-center justify-between gap-2">
                        <div className="flex items-center gap-2">
                          <Badge tone="default">
                            {c.direction === "outbound" ? <I.ArrowUpRight size={11} /> : <I.ArrowDownLeft size={11} />}
                            {c.direction === "outbound" ? "Out" : "In"}
                          </Badge>
                          {c.crmssStatus && <CrmssStatusBadge status={c.crmssStatus} />}
                        </div>
                        <span className="text-[11px] text-ink-500 font-mono">{fmtDateTime(c.startedAt)}</span>
                      </div>
                      {turns.length > 0 && (
                        <div className="mt-2 pt-2 border-t border-white/5">
                          {turns.slice(0, 4).map((t, idx) => (
                            <div key={idx} className="text-xs text-ink-400 mt-1 truncate">
                              <span className="text-ink-500">{t.speaker === "bot" ? "🤖" : "👤"}</span> {t.text}
                            </div>
                          ))}
                          {turns.length > 4 && (
                            <div className="text-[10px] text-ink-500 mt-1">+{turns.length - 4} more messages</div>
                          )}
                        </div>
                      )}
                      {c.duration != null && (
                        <div className="text-[10px] text-ink-500 font-mono mt-1">{c.duration}s</div>
                      )}
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}