"use client";

import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
import Link from "next/link";
import { useNodes } from "@/lib/useNodes";
import { useActiveCalls } from "@/lib/useCalls";
import { useActiveIncidents } from "@/lib/useIncidents";
import type { IncidentRecord } from "@/lib/types";

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

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

function IncidentCard({ incident }: { incident: IncidentRecord }) {
  const cls = TYPE_COLORS[incident.type ?? "other"] ?? TYPE_COLORS.other;
  return (
    <Link
      href={`/incidents/${incident.incident_id}`}
      className={`block border rounded-lg p-3 hover:brightness-110 transition-all ${cls}`}
    >
      <div className="flex items-center justify-between gap-2 mb-1">
        <span className="text-xs font-mono font-semibold uppercase tracking-wide">
          {incident.type ?? "other"}
        </span>
        <span className="text-xs opacity-60 font-mono">
          {incident.call_ids.length} call{incident.call_ids.length !== 1 ? "s" : ""}
        </span>
      </div>
      <p className="text-sm font-bold leading-tight">{incident.title ?? "Incident"}</p>
      {incident.location && (
        <p className="text-xs opacity-70 mt-1 font-mono truncate">{incident.location}</p>
      )}
      {!incident.location_coords && (
        <p className="text-xs opacity-40 mt-1 font-mono italic">location not geocoded yet</p>
      )}
    </Link>
  );
}

export default function MapPage() {
  const { nodes, loading } = useNodes();
  const activeCalls        = useActiveCalls();
  const incidents          = useActiveIncidents();
  const [kiosk, setKiosk]               = useState(false);
  const [lastUpdated, setLastUpdated]   = useState<Date | null>(null);

  // Track when data last refreshed
  useEffect(() => {
    if (!loading) setLastUpdated(new Date());
  }, [nodes, activeCalls, incidents, loading]);

  // Kiosk mode: full-viewport fixed overlay sits above the sticky nav (z-40 → z-50)
  if (kiosk) {
    return (
      <div className="fixed inset-0 z-50 bg-gray-950">
        <MapView
          nodes={nodes}
          activeCalls={activeCalls}
          incidents={incidents}
          lastUpdated={lastUpdated}
        />
        <button
          onClick={() => setKiosk(false)}
          title="Exit fullscreen"
          className="absolute top-3 left-3 z-[1002] bg-gray-950/90 border border-gray-700 rounded px-3 py-1.5 text-xs font-mono text-gray-300 hover:text-white hover:border-gray-500 transition-colors flex items-center gap-1.5"
        >
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
          </svg>
          Exit fullscreen
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-bold text-white font-mono">Map</h1>
        <button
          onClick={() => setKiosk(true)}
          title="Fullscreen / kiosk mode"
          className="text-xs font-mono text-gray-500 hover:text-gray-300 transition-colors flex items-center gap-1.5"
        >
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
          </svg>
          Fullscreen
        </button>
      </div>

      {loading ? (
        <div className="flex items-center justify-center h-96 text-gray-600 font-mono text-sm">
          Loading map…
        </div>
      ) : (
        <div className="h-[50vh] sm:h-[65vh] min-h-[400px]">
          <MapView
            nodes={nodes}
            activeCalls={activeCalls}
            incidents={incidents}
            lastUpdated={lastUpdated}
          />
        </div>
      )}

      {incidents.length > 0 && (
        <section>
          <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
            Active Incidents ({incidents.length})
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
            {incidents.map((inc) => (
              <IncidentCard key={inc.incident_id} incident={inc} />
            ))}
          </div>
        </section>
      )}
    </div>
  );
}