"use client";

import dynamic from "next/dynamic";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { useIncident } from "@/lib/useIncidents";
import { useCallsByIncident } from "@/lib/useCalls";
import { useSystems } from "@/lib/useSystems";
import { useAuth } from "@/components/AuthProvider";
import { CallRow } from "@/components/CallRow";
import { c2api } from "@/lib/c2api";
import type { IncidentRecord } from "@/lib/types";

const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });

const TYPE_COLORS: Record<string, string> = {
  fire:     "bg-red-900 text-red-300",
  police:   "bg-blue-900 text-blue-300",
  ems:      "bg-yellow-900 text-yellow-300",
  accident: "bg-orange-900 text-orange-300",
  other:    "bg-gray-800 text-gray-300",
};

function TypeBadge({ type }: { type: string | null }) {
  const cls = TYPE_COLORS[type ?? "other"] ?? TYPE_COLORS.other;
  return (
    <span className={`text-xs font-mono px-2 py-0.5 rounded-full capitalize ${cls}`}>
      {type ?? "other"}
    </span>
  );
}

function StatusBadge({ status }: { status: IncidentRecord["status"] }) {
  return (
    <span className={`text-xs px-2 py-0.5 rounded-full font-mono ${
      status === "active" ? "bg-green-900 text-green-300" : "bg-gray-800 text-gray-400"
    }`}>
      {status}
    </span>
  );
}

type Tab = "summary" | "units" | "details";

export default function IncidentDetailPage() {
  const params = useParams();
  const id     = params.id as string;
  const router = useRouter();

  const { incident, loading }            = useIncident(id);
  const { calls, loading: callsLoading } = useCallsByIncident(id);
  const { systems }                      = useSystems();
  const { isAdmin }                      = useAuth();

  const [tab, setTab]                 = useState<Tab>("summary");
  const [summarizing, setSummarizing] = useState(false);
  const [resolving, setResolving]     = useState(false);

  const systemMap = Object.fromEntries(systems.map((s) => [s.system_id, s]));

  async function handleResolve() {
    setResolving(true);
    try { await c2api.updateIncident(id, { status: "resolved" }); }
    catch (e) { console.error(e); }
    finally   { setResolving(false); }
  }

  async function handleSummarize() {
    setSummarizing(true);
    try { await c2api.summarizeIncident(id); }
    catch (e) { console.error(e); }
    finally   { setSummarizing(false); }
  }

  if (loading)   return <p className="text-gray-500 text-sm font-mono p-6">Loading…</p>;
  if (!incident) return <p className="text-gray-500 text-sm font-mono p-6">Incident not found.</p>;

  const displayTags = incident.tags.filter((t) => t !== "auto-generated");

  return (
    <div className="space-y-4">
      {/* Back */}
      <button
        onClick={() => router.back()}
        className="text-xs text-gray-500 hover:text-gray-300 font-mono transition-colors"
      >
        ← Incidents
      </button>

      {/* Header */}
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-center gap-3 flex-wrap">
          <TypeBadge type={incident.type} />
          <h1 className="text-xl font-bold text-white font-mono">
            {incident.title ?? "Incident"}
          </h1>
          <StatusBadge status={incident.status} />
        </div>
        {isAdmin && (
          <div className="flex gap-2 shrink-0">
            <button
              onClick={handleSummarize}
              disabled={summarizing}
              className="text-xs bg-indigo-700 hover:bg-indigo-600 disabled:opacity-50 text-white px-3 py-1.5 rounded-lg transition-colors"
            >
              {summarizing ? "Generating…" : "Regenerate summary"}
            </button>
            {incident.status === "active" && (
              <button
                onClick={handleResolve}
                disabled={resolving}
                className="text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-50 text-gray-300 px-3 py-1.5 rounded-lg transition-colors"
              >
                {resolving ? "Resolving…" : "Resolve"}
              </button>
            )}
          </div>
        )}
      </div>

      {/* Tags */}
      {displayTags.length > 0 && (
        <div className="flex flex-wrap gap-1">
          {displayTags.map((t) => (
            <span key={t} className="text-xs bg-gray-800 text-gray-300 px-2 py-0.5 rounded-full">
              {t}
            </span>
          ))}
        </div>
      )}

      {/* Map */}
      {incident.location_coords && (
        <div style={{ height: "280px" }}>
          <MapView nodes={[]} activeCalls={[]} incidents={[incident]} />
        </div>
      )}

      {/* Two-panel body */}
      <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">

        {/* Left: tabs — Summary / Units / Details */}
        <div className="lg:col-span-2 bg-gray-900 border border-gray-800 rounded-xl overflow-hidden flex flex-col">
          {/* Tab bar */}
          <div className="flex border-b border-gray-800 shrink-0">
            {(["summary", "units", "details"] as Tab[]).map((t) => (
              <button
                key={t}
                onClick={() => setTab(t)}
                className={`flex-1 px-4 py-2.5 text-xs font-mono capitalize transition-colors ${
                  tab === t
                    ? "text-white border-b-2 border-indigo-500 bg-gray-800/40"
                    : "text-gray-500 hover:text-gray-300"
                }`}
              >
                {t}
              </button>
            ))}
          </div>

          {/* Tab content */}
          <div className="p-4 flex-1 overflow-y-auto">
            {tab === "summary" && (
              incident.summary ? (
                <p className="text-sm text-gray-300 leading-relaxed">{incident.summary}</p>
              ) : (
                <p className="text-sm text-gray-600 font-mono italic">
                  No summary yet.{" "}
                  {isAdmin && (
                    <button
                      onClick={handleSummarize}
                      disabled={summarizing}
                      className="text-indigo-400 hover:text-indigo-300 not-italic transition-colors"
                    >
                      Generate now
                    </button>
                  )}
                </p>
              )
            )}

            {tab === "units" && (
              <div className="space-y-4">
                <div>
                  <p className="text-xs text-gray-500 uppercase tracking-wider font-mono mb-2">Units</p>
                  {incident.units?.length > 0 ? (
                    <div className="flex flex-wrap gap-1">
                      {incident.units.map((u) => (
                        <span key={u} className="text-xs bg-gray-800 text-gray-300 px-2 py-0.5 rounded font-mono">{u}</span>
                      ))}
                    </div>
                  ) : (
                    <p className="text-xs text-gray-600 font-mono italic">None extracted.</p>
                  )}
                </div>
                <div>
                  <p className="text-xs text-gray-500 uppercase tracking-wider font-mono mb-2">Vehicles</p>
                  {incident.vehicles?.length > 0 ? (
                    <div className="flex flex-wrap gap-1">
                      {incident.vehicles.map((v) => (
                        <span key={v} className="text-xs bg-gray-800 text-gray-300 px-2 py-0.5 rounded font-mono">{v}</span>
                      ))}
                    </div>
                  ) : (
                    <p className="text-xs text-gray-600 font-mono italic">None extracted.</p>
                  )}
                </div>
              </div>
            )}

            {tab === "details" && (
              <div className="space-y-3 text-xs font-mono">
                {incident.location && (
                  <div>
                    <p className="text-gray-500 uppercase tracking-wider mb-1">Location</p>
                    <p className="text-gray-300">{incident.location}</p>
                  </div>
                )}
                <div>
                  <p className="text-gray-500 uppercase tracking-wider mb-1">Started</p>
                  <p className="text-gray-300">{new Date(incident.started_at).toLocaleString()}</p>
                </div>
                <div>
                  <p className="text-gray-500 uppercase tracking-wider mb-1">Last activity</p>
                  <p className="text-gray-300">{new Date(incident.updated_at).toLocaleString()}</p>
                </div>
                {incident.talkgroup_ids?.length > 0 && (
                  <div>
                    <p className="text-gray-500 uppercase tracking-wider mb-1">Talkgroups</p>
                    <p className="text-gray-300">{incident.talkgroup_ids.join(", ")}</p>
                  </div>
                )}
                {incident.severity && (
                  <div>
                    <p className="text-gray-500 uppercase tracking-wider mb-1">Severity</p>
                    <p className="text-gray-300 capitalize">{incident.severity}</p>
                  </div>
                )}
                <div>
                  <p className="text-gray-500 uppercase tracking-wider mb-1">Total calls</p>
                  <p className="text-gray-300">{incident.call_ids.length}</p>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Right: calls */}
        <div className="lg:col-span-3">
          <p className="text-xs text-gray-500 uppercase tracking-wider font-mono mb-2">
            Calls ({calls.length})
          </p>
          {callsLoading ? (
            <p className="text-gray-600 text-sm font-mono">Loading…</p>
          ) : calls.length === 0 ? (
            <p className="text-gray-600 text-sm font-mono">No calls linked yet.</p>
          ) : (
            <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="text-xs text-gray-500 uppercase tracking-wider border-b border-gray-800">
                    <th className="px-4 py-2 text-left">Time</th>
                    <th className="px-4 py-2 text-left">Talkgroup</th>
                    <th className="px-4 py-2 text-left">System</th>
                    <th className="px-4 py-2 text-left">Node</th>
                    <th className="px-4 py-2 text-left">Duration</th>
                    <th className="px-4 py-2 text-left">Audio</th>
                    <th className="px-4 py-2"></th>
                  </tr>
                </thead>
                <tbody>
                  {calls.map((c) => (
                    <CallRow
                      key={c.call_id}
                      call={c}
                      systemName={systemMap[c.system_id ?? ""]?.name}
                      isAdmin={isAdmin}
                    />
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>

      </div>
    </div>
  );
}