import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { ChevronDown, ChevronRight, Search, Filter, ExternalLink, Info, ShieldAlert } from "lucide-react";
import type { ComplianceControlStatus } from "../../api/compliance";

interface ControlsTableProps {
  controls: ComplianceControlStatus[];
}

const STATUS_COLORS: Record<string, { bg: string; text: string; dot: string; border: string }> = {
  covered:          { bg: "bg-green-500/10",  text: "text-green-400",  dot: "bg-green-500",  border: "border-green-500/20" },
  partially_covered:{ bg: "bg-yellow-500/10", text: "text-yellow-400", dot: "bg-yellow-500", border: "border-yellow-500/20" },
  not_covered:      { bg: "bg-red-500/10",    text: "text-red-400",    dot: "bg-red-500",    border: "border-red-500/20" },
  not_evaluated:    { bg: "bg-gray-500/10",   text: "text-gray-400",   dot: "bg-gray-500",   border: "border-gray-600/20" },
};

const STATUS_LABELS: Record<string, string> = {
  covered:           "Covered",
  partially_covered: "Partial",
  not_covered:       "Not Covered",
  not_evaluated:     "Not Evaluated",
};

function ScoreBar({ score }: { score: number }) {
  const color =
    score >= 70 ? "bg-green-500"
    : score >= 30 ? "bg-yellow-500"
    : score > 0  ? "bg-red-500"
    : "bg-gray-700";
  return (
    <div className="flex items-center gap-2">
      <div className="h-1.5 w-16 rounded-full bg-gray-800 overflow-hidden">
        <div className={`h-full rounded-full ${color} transition-all`} style={{ width: `${score}%` }} />
      </div>
      <span className="text-xs font-medium text-gray-300 tabular-nums w-8">{score.toFixed(0)}</span>
    </div>
  );
}

export default function ControlsTable({ controls }: ControlsTableProps) {
  const navigate = useNavigate();
  const [expandedId, setExpandedId] = useState<string | null>(null);
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [categoryFilter, setCategoryFilter] = useState<string>("all");
  const [search, setSearch] = useState("");

  const categories = [...new Set(controls.map((c) => c.category).filter(Boolean))] as string[];

  const filteredControls = controls.filter((c) => {
    if (statusFilter !== "all" && c.status !== statusFilter) return false;
    if (categoryFilter !== "all" && c.category !== categoryFilter) return false;
    if (search) {
      const q = search.toLowerCase();
      return (
        c.control_id.toLowerCase().includes(q) ||
        c.title.toLowerCase().includes(q) ||
        (c.category || "").toLowerCase().includes(q)
      );
    }
    return true;
  });

  const toggleExpand = (id: string) => setExpandedId(expandedId === id ? null : id);

  return (
    <div className="rounded-xl border border-gray-800 bg-gray-900">
      {/* Filters */}
      <div className="flex flex-wrap items-center gap-3 border-b border-gray-800 px-4 py-3">
        <Filter className="h-3.5 w-3.5 shrink-0 text-gray-500" />

        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-xs text-gray-200 focus:border-cyan-500 focus:outline-none"
        >
          <option value="all">All Statuses</option>
          <option value="covered">Covered</option>
          <option value="partially_covered">Partial</option>
          <option value="not_covered">Not Covered</option>
          <option value="not_evaluated">Not Evaluated</option>
        </select>

        {categories.length > 0 && (
          <select
            value={categoryFilter}
            onChange={(e) => setCategoryFilter(e.target.value)}
            className="rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-xs text-gray-200 focus:border-cyan-500 focus:outline-none"
          >
            <option value="all">All Categories</option>
            {categories.map((cat) => (
              <option key={cat} value={cat}>{cat}</option>
            ))}
          </select>
        )}

        <div className="relative max-w-xs flex-1">
          <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-gray-500" />
          <input
            type="text"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search ID or title…"
            className="w-full rounded-lg border border-gray-700 bg-gray-800 py-1.5 pl-8 pr-3 text-xs text-gray-200 placeholder-gray-500 focus:border-cyan-500 focus:outline-none"
          />
        </div>

        <span className="ml-auto text-xs text-gray-500">
          {filteredControls.length} / {controls.length}
        </span>
      </div>

      {/* Table */}
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-gray-800 text-left text-xs text-gray-500 uppercase tracking-wider">
              <th className="w-8 px-4 py-3" />
              <th className="px-4 py-3 whitespace-nowrap">Control ID</th>
              <th className="px-4 py-3">Title</th>
              <th className="hidden px-4 py-3 lg:table-cell whitespace-nowrap">Category</th>
              <th className="px-4 py-3">Status</th>
              <th className="px-4 py-3 whitespace-nowrap">Score</th>
              <th className="px-4 py-3 whitespace-nowrap">Techniques</th>
            </tr>
          </thead>

          <tbody className="divide-y divide-gray-800/50">
            {filteredControls.length === 0 && (
              <tr>
                <td colSpan={7} className="px-4 py-10 text-center text-sm text-gray-500">
                  No controls match the current filters.
                </td>
              </tr>
            )}

            {filteredControls.map((control) => {
              const isExpanded = expandedId === control.control_id;
              const statusStyle = STATUS_COLORS[control.status] || STATUS_COLORS.not_evaluated;

              return (
                <>
                  {/* Main row */}
                  <tr
                    key={control.control_id}
                    className={`cursor-pointer transition-colors hover:bg-gray-800/40 ${
                      isExpanded ? "bg-gray-800/20" : ""
                    }`}
                    onClick={() => toggleExpand(control.control_id)}
                  >
                    <td className="px-4 py-3">
                      {isExpanded
                        ? <ChevronDown className="h-4 w-4 text-cyan-400" />
                        : <ChevronRight className="h-4 w-4 text-gray-500" />
                      }
                    </td>
                    <td className="px-4 py-3 font-mono text-xs font-semibold text-cyan-400 whitespace-nowrap">
                      {control.control_id}
                    </td>
                    <td className="px-4 py-3 text-sm text-gray-200 max-w-[260px]">
                      <span className="line-clamp-2">{control.title}</span>
                    </td>
                    <td className="hidden px-4 py-3 text-xs text-gray-400 lg:table-cell">
                      {control.category || "—"}
                    </td>
                    <td className="px-4 py-3">
                      <span
                        className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[10px] font-medium ${statusStyle.bg} ${statusStyle.text} ${statusStyle.border}`}
                      >
                        <span className={`h-1.5 w-1.5 rounded-full ${statusStyle.dot}`} />
                        {STATUS_LABELS[control.status] ?? control.status}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <ScoreBar score={control.score} />
                    </td>
                    <td className="px-4 py-3 text-xs text-gray-400 whitespace-nowrap">
                      <span className={control.techniques_covered > 0 ? "text-gray-200" : "text-gray-600"}>
                        {control.techniques_covered}
                      </span>
                      <span className="text-gray-600"> / {control.techniques_count}</span>
                    </td>
                  </tr>

                  {/* Expanded detail row */}
                  {isExpanded && (
                    <tr key={`${control.control_id}-expanded`} className="bg-gray-800/10">
                      <td colSpan={7} className="px-6 pb-5 pt-3">
                        <div className="space-y-4">

                          {/* Executive description */}
                          {control.description && (
                            <div className="flex gap-3 rounded-xl border border-blue-500/15 bg-blue-500/5 p-4">
                              <Info className="mt-0.5 h-4 w-4 shrink-0 text-blue-400" />
                              <div>
                                <p className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-blue-400">
                                  What this control requires — and why it matters
                                </p>
                                <p className="text-xs leading-relaxed text-gray-300">
                                  {control.description}
                                </p>
                              </div>
                            </div>
                          )}

                          {/* Techniques grid */}
                          {control.techniques.length === 0 ? (
                            <div className="flex items-center gap-2 text-xs text-gray-500 italic">
                              <ShieldAlert className="h-4 w-4" />
                              No ATT&CK techniques mapped to this control yet.
                            </div>
                          ) : (
                            <div>
                              <p className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
                                ATT&CK techniques covered ({control.techniques.length}) — sorted by coverage score
                              </p>
                              <div className="grid gap-1.5 sm:grid-cols-2 lg:grid-cols-3">
                                {control.techniques.map((tech) => {
                                  const techStyle =
                                    tech.score >= 70 ? "border-green-500/20 bg-green-500/5 text-green-400"
                                    : tech.score >= 30 ? "border-yellow-500/20 bg-yellow-500/5 text-yellow-400"
                                    : tech.score > 0  ? "border-red-500/20 bg-red-500/5 text-red-400"
                                    : "border-gray-700 bg-gray-800/30 text-gray-500";

                                  return (
                                    <div
                                      key={tech.mitre_id}
                                      className={`flex items-center justify-between rounded-lg border px-3 py-2 cursor-pointer hover:brightness-125 transition-all ${techStyle}`}
                                      onClick={(e) => {
                                        e.stopPropagation();
                                        navigate(`/techniques/${tech.mitre_id}`);
                                      }}
                                    >
                                      <div className="flex items-center gap-2 min-w-0">
                                        <span className="shrink-0 font-mono text-xs font-semibold text-cyan-400">
                                          {tech.mitre_id}
                                        </span>
                                        <span className="truncate text-xs text-gray-300">
                                          {tech.name}
                                        </span>
                                      </div>
                                      <div className="flex shrink-0 items-center gap-2 pl-2">
                                        <span className="text-[10px] font-medium tabular-nums">
                                          {tech.score.toFixed(0)}
                                        </span>
                                        <ExternalLink className="h-3 w-3 text-gray-600" />
                                      </div>
                                    </div>
                                  );
                                })}
                              </div>
                            </div>
                          )}
                        </div>
                      </td>
                    </tr>
                  )}
                </>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}