"use client";

import { useState, useMemo } from "react";
import { useCalls } from "@/lib/useCalls";
import { useSystems } from "@/lib/useSystems";
import { CallRow } from "@/components/CallRow";
import { useAuth } from "@/components/AuthProvider";
import type { CallRecord } from "@/lib/types";

const inputCls =
  "bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-white font-mono " +
  "placeholder:text-gray-600 focus:outline-none focus:border-indigo-500 w-full";

function filterCalls(calls: CallRecord[], filters: Filters): CallRecord[] {
  const q        = filters.query.trim().toLowerCase();
  const tgid     = filters.tgid.trim();
  const fromMs   = filters.dateFrom ? new Date(filters.dateFrom).getTime() : null;
  const toMs     = filters.dateTo   ? new Date(filters.dateTo + "T23:59:59").getTime() : null;

  return calls.filter((c) => {
    // System filter
    if (filters.systemId && c.system_id !== filters.systemId) return false;

    // TGID filter (exact match on the number)
    if (tgid && String(c.talkgroup_id ?? "") !== tgid) return false;

    // Date range
    const ts = new Date(c.started_at).getTime();
    if (fromMs !== null && ts < fromMs) return false;
    if (toMs   !== null && ts > toMs)   return false;

    // Free-text: talkgroup name, node_id, transcript, tags
    if (q) {
      const hay = [
        c.talkgroup_name ?? "",
        c.node_id,
        c.transcript ?? "",
        c.transcript_corrected ?? "",
        ...(c.tags ?? []),
      ].join(" ").toLowerCase();
      if (!hay.includes(q)) return false;
    }

    return true;
  });
}

interface Filters {
  query:    string;
  tgid:     string;
  systemId: string;
  dateFrom: string;
  dateTo:   string;
}

const DEFAULT_FILTERS: Filters = {
  query:    "",
  tgid:     "",
  systemId: "",
  dateFrom: "",
  dateTo:   "",
};

function isActive(f: Filters) {
  return f.query || f.tgid || f.systemId || f.dateFrom || f.dateTo;
}

export default function CallsPage() {
  const [limitCount, setLimitCount] = useState(100);
  const { calls, loading } = useCalls(limitCount);
  const { systems } = useSystems();
  const { isAdmin } = useAuth();
  const systemMap = Object.fromEntries(systems.map((s) => [s.system_id, s]));

  const [filters, setFilters] = useState<Filters>(DEFAULT_FILTERS);
  const [showFilters, setShowFilters] = useState(false);

  function set<K extends keyof Filters>(key: K, value: string) {
    setFilters((f) => ({ ...f, [key]: value }));
  }

  const active  = calls.filter((c) => c.status === "active");
  const ended   = calls.filter((c) => c.status === "ended");
  const filtered = useMemo(() => filterCalls(ended, filters), [ended, filters]);

  const activeFilters = isActive(filters);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-bold text-white font-mono">Calls</h1>
        <div className="flex items-center gap-3">
          <span className="text-xs text-gray-500 font-mono">{calls.length} loaded</span>
          <button
            onClick={() => setShowFilters((v) => !v)}
            className={`text-xs font-mono px-3 py-1.5 rounded-lg border transition-colors ${
              activeFilters
                ? "border-indigo-600 bg-indigo-950 text-indigo-300"
                : "border-gray-700 bg-gray-900 text-gray-400 hover:text-gray-200"
            }`}
          >
            {showFilters ? "Hide filters" : "Filter"}
            {activeFilters && " •"}
          </button>
        </div>
      </div>

      {/* Filter bar */}
      {showFilters && (
        <div className="bg-gray-900 border border-gray-800 rounded-xl p-4 space-y-3">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
            {/* Text search */}
            <div className="lg:col-span-2">
              <label className="text-xs text-gray-500 block mb-1">Search (talkgroup, node, transcript, tags)</label>
              <input
                type="text"
                value={filters.query}
                onChange={(e) => set("query", e.target.value)}
                placeholder="fire, Engine 5, dispatch…"
                className={inputCls}
              />
            </div>

            {/* TGID */}
            <div>
              <label className="text-xs text-gray-500 block mb-1">Talkgroup ID</label>
              <input
                type="number"
                value={filters.tgid}
                onChange={(e) => set("tgid", e.target.value)}
                placeholder="e.g. 9048"
                className={inputCls}
              />
            </div>

            {/* System */}
            <div>
              <label className="text-xs text-gray-500 block mb-1">System</label>
              <select
                value={filters.systemId}
                onChange={(e) => set("systemId", e.target.value)}
                className={inputCls}
              >
                <option value="">All systems</option>
                {systems.map((s) => (
                  <option key={s.system_id} value={s.system_id}>{s.name}</option>
                ))}
              </select>
            </div>

            {/* Date from */}
            <div>
              <label className="text-xs text-gray-500 block mb-1">From date</label>
              <input
                type="date"
                value={filters.dateFrom}
                onChange={(e) => set("dateFrom", e.target.value)}
                className={inputCls}
              />
            </div>

            {/* Date to */}
            <div>
              <label className="text-xs text-gray-500 block mb-1">To date</label>
              <input
                type="date"
                value={filters.dateTo}
                onChange={(e) => set("dateTo", e.target.value)}
                className={inputCls}
              />
            </div>
          </div>

          {activeFilters && (
            <div className="flex items-center justify-between pt-1">
              <p className="text-xs text-gray-500 font-mono">
                {filtered.length} of {ended.length} calls match
              </p>
              <button
                onClick={() => setFilters(DEFAULT_FILTERS)}
                className="text-xs text-gray-500 hover:text-gray-300 font-mono transition-colors"
              >
                Clear all
              </button>
            </div>
          )}
        </div>
      )}

      {/* Live calls — never filtered */}
      {active.length > 0 && (
        <section>
          <h2 className="text-sm font-semibold text-orange-400 uppercase tracking-wider mb-3">
            Live ({active.length})
          </h2>
          <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
            <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>
                {active.map((c) => (
                  <CallRow key={c.call_id} call={c} systemName={systemMap[c.system_id ?? ""]?.name} isAdmin={isAdmin} />
                ))}
              </tbody>
            </table>
          </div>
        </section>
      )}

      {/* History */}
      <section>
        <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
          History{activeFilters && <span className="ml-2 text-indigo-400">({filtered.length} filtered)</span>}
        </h2>
        {loading ? (
          <p className="text-gray-600 text-sm font-mono">Loading…</p>
        ) : filtered.length === 0 ? (
          <p className="text-gray-600 text-sm font-mono">
            {activeFilters ? "No calls match the current filters." : "No calls recorded yet."}
          </p>
        ) : (
          <>
            <div className="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
              <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>
                  </tr>
                </thead>
                <tbody>
                  {filtered.map((c) => (
                    <CallRow key={c.call_id} call={c} systemName={systemMap[c.system_id ?? ""]?.name} isAdmin={isAdmin} />
                  ))}
                </tbody>
              </table>
            </div>
            {!activeFilters && ended.length >= limitCount && (
              <button
                onClick={() => setLimitCount((n) => n + 100)}
                className="mt-4 text-sm text-indigo-400 hover:text-indigo-300 font-mono transition-colors"
              >
                Load more
              </button>
            )}
          </>
        )}
      </section>
    </div>
  );
}