import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import {
  FileText,
  Download,
  BarChart3,
  Shield,
  Wrench,
  Loader2,
  Filter,
  ChevronDown,
} from "lucide-react";
import {
  getCoverageSummary,
  getTestResults,
  getRemediationStatus,
  type CoverageReport,
  type TestResultsReport,
  type RemediationReport,
  type ReportFilters,
} from "../api/reports";

type ReportType = "coverage" | "test-results" | "remediation";

const reportTypes: { id: ReportType; label: string; icon: React.ReactNode; desc: string }[] = [
  {
    id: "coverage",
    label: "Coverage Summary",
    icon: <Shield className="h-5 w-5" />,
    desc: "Technique coverage status across the MITRE ATT&CK framework",
  },
  {
    id: "test-results",
    label: "Test Results",
    icon: <BarChart3 className="h-5 w-5" />,
    desc: "Detailed test execution results with state and detection breakdowns",
  },
  {
    id: "remediation",
    label: "Remediation Status",
    icon: <Wrench className="h-5 w-5" />,
    desc: "Remediation progress across all tests with assigned steps",
  },
];

export default function ReportsPage() {
  const [selectedType, setSelectedType] = useState<ReportType>("coverage");
  const [filters, setFilters] = useState<ReportFilters>({});
  const [showFilters, setShowFilters] = useState(false);

  const coverageQuery = useQuery({
    queryKey: ["reports", "coverage", filters],
    queryFn: () => getCoverageSummary(filters),
    enabled: selectedType === "coverage",
  });

  const testResultsQuery = useQuery({
    queryKey: ["reports", "test-results", filters],
    queryFn: () => getTestResults(filters),
    enabled: selectedType === "test-results",
  });

  const remediationQuery = useQuery({
    queryKey: ["reports", "remediation", filters],
    queryFn: () => getRemediationStatus(filters),
    enabled: selectedType === "remediation",
  });

  const isLoading =
    (selectedType === "coverage" && coverageQuery.isLoading) ||
    (selectedType === "test-results" && testResultsQuery.isLoading) ||
    (selectedType === "remediation" && remediationQuery.isLoading);

  const handleDownloadJson = () => {
    let data: CoverageReport | TestResultsReport | RemediationReport | undefined;
    if (selectedType === "coverage") data = coverageQuery.data;
    if (selectedType === "test-results") data = testResultsQuery.data;
    if (selectedType === "remediation") data = remediationQuery.data;
    if (!data) return;

    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `aegis_${selectedType}_${new Date().toISOString().slice(0, 10)}.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const handleDownloadCsv = () => {
    const token = localStorage.getItem("token");
    const params = new URLSearchParams();
    if (filters.tactic) params.set("tactic", filters.tactic);
    if (filters.platform) params.set("platform", filters.platform);
    window.open(
      `/api/v1/reports/coverage-csv?${params.toString()}${token ? `&token=${token}` : ""}`,
      "_blank",
    );
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Reports</h1>
          <p className="mt-1 text-sm text-gray-400">
            Generate and download coverage, test results, and remediation reports
          </p>
        </div>
        <div className="flex gap-2">
          <button
            onClick={handleDownloadJson}
            disabled={isLoading}
            className="flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-500 transition-colors disabled:opacity-50"
          >
            <Download className="h-4 w-4" />
            Download JSON
          </button>
          {selectedType === "coverage" && (
            <button
              onClick={handleDownloadCsv}
              disabled={isLoading}
              className="flex items-center gap-2 rounded-lg bg-gray-700 px-4 py-2 text-sm font-medium text-white hover:bg-gray-600 transition-colors disabled:opacity-50"
            >
              <FileText className="h-4 w-4" />
              Download CSV
            </button>
          )}
        </div>
      </div>

      {/* Report type selector */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
        {reportTypes.map((rt) => (
          <button
            key={rt.id}
            onClick={() => {
              setSelectedType(rt.id);
              setFilters({});
            }}
            className={`flex items-start gap-3 rounded-xl border p-4 text-left transition-all ${
              selectedType === rt.id
                ? "border-cyan-500/50 bg-cyan-500/10"
                : "border-gray-800 bg-gray-900 hover:border-gray-700"
            }`}
          >
            <div
              className={`rounded-lg p-2 ${
                selectedType === rt.id ? "bg-cyan-500/20 text-cyan-400" : "bg-gray-800 text-gray-400"
              }`}
            >
              {rt.icon}
            </div>
            <div>
              <p className={`text-sm font-medium ${selectedType === rt.id ? "text-cyan-400" : "text-white"}`}>
                {rt.label}
              </p>
              <p className="mt-0.5 text-xs text-gray-500">{rt.desc}</p>
            </div>
          </button>
        ))}
      </div>

      {/* Filters */}
      <div className="rounded-xl border border-gray-800 bg-gray-900">
        <button
          onClick={() => setShowFilters(!showFilters)}
          className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium text-gray-300 hover:text-white transition-colors"
        >
          <span className="flex items-center gap-2">
            <Filter className="h-4 w-4" />
            Filters
          </span>
          <ChevronDown className={`h-4 w-4 transition-transform ${showFilters ? "rotate-180" : ""}`} />
        </button>
        {showFilters && (
          <div className="border-t border-gray-800 px-4 py-4">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
              {(selectedType === "coverage" || selectedType === "test-results") && (
                <>
                  <div>
                    <label className="block text-xs text-gray-400 mb-1">Tactic</label>
                    <input
                      type="text"
                      placeholder="e.g. execution"
                      value={filters.tactic || ""}
                      onChange={(e) => setFilters({ ...filters, tactic: e.target.value || undefined })}
                      className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
                    />
                  </div>
                  <div>
                    <label className="block text-xs text-gray-400 mb-1">Platform</label>
                    <input
                      type="text"
                      placeholder="e.g. windows"
                      value={filters.platform || ""}
                      onChange={(e) => setFilters({ ...filters, platform: e.target.value || undefined })}
                      className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
                    />
                  </div>
                </>
              )}
              {selectedType === "test-results" && (
                <>
                  <div>
                    <label className="block text-xs text-gray-400 mb-1">State</label>
                    <select
                      value={filters.state || ""}
                      onChange={(e) => setFilters({ ...filters, state: e.target.value || undefined })}
                      className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
                    >
                      <option value="">All states</option>
                      <option value="draft">Draft</option>
                      <option value="red_executing">Red Executing</option>
                      <option value="blue_evaluating">Blue Evaluating</option>
                      <option value="in_review">In Review</option>
                      <option value="validated">Validated</option>
                      <option value="rejected">Rejected</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-xs text-gray-400 mb-1">Date From</label>
                    <input
                      type="date"
                      value={filters.date_from || ""}
                      onChange={(e) => setFilters({ ...filters, date_from: e.target.value || undefined })}
                      className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
                    />
                  </div>
                  <div>
                    <label className="block text-xs text-gray-400 mb-1">Date To</label>
                    <input
                      type="date"
                      value={filters.date_to || ""}
                      onChange={(e) => setFilters({ ...filters, date_to: e.target.value || undefined })}
                      className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
                    />
                  </div>
                </>
              )}
              {selectedType === "remediation" && (
                <div>
                  <label className="block text-xs text-gray-400 mb-1">Remediation Status</label>
                  <select
                    value={filters.status || ""}
                    onChange={(e) => setFilters({ ...filters, status: e.target.value || undefined })}
                    className="w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
                  >
                    <option value="">All</option>
                    <option value="pending">Pending</option>
                    <option value="in_progress">In Progress</option>
                    <option value="completed">Completed</option>
                    <option value="not_applicable">Not Applicable</option>
                  </select>
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* Report content */}
      {isLoading ? (
        <div className="flex items-center justify-center py-16">
          <Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
        </div>
      ) : (
        <>
          {selectedType === "coverage" && coverageQuery.data && (
            <CoverageReportView report={coverageQuery.data} />
          )}
          {selectedType === "test-results" && testResultsQuery.data && (
            <TestResultsView report={testResultsQuery.data} />
          )}
          {selectedType === "remediation" && remediationQuery.data && (
            <RemediationView report={remediationQuery.data} />
          )}
        </>
      )}
    </div>
  );
}

// ── Sub-views ──────────────────────────────────────────────────────

function CoverageReportView({ report }: { report: CoverageReport }) {
  const s = report.summary;
  return (
    <div className="space-y-4">
      {/* Summary cards */}
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-6">
        <StatCard label="Total" value={s.total_techniques} />
        <StatCard label="Validated" value={s.validated} color="text-green-400" />
        <StatCard label="Partial" value={s.partial} color="text-yellow-400" />
        <StatCard label="In Progress" value={s.in_progress} color="text-blue-400" />
        <StatCard label="Not Covered" value={s.not_covered} color="text-red-400" />
        <StatCard label="Coverage" value={`${s.coverage_percentage}%`} color="text-cyan-400" />
      </div>

      {/* Table */}
      <div className="overflow-hidden rounded-xl border border-gray-800">
        <table className="w-full text-sm">
          <thead className="bg-gray-900/50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">MITRE ID</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Name</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Tactic</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Status</th>
              <th className="px-4 py-3 text-right text-xs font-medium text-gray-400">Tests</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-800">
            {report.techniques.map((t) => (
              <tr key={t.mitre_id} className="hover:bg-gray-900/30">
                <td className="px-4 py-2.5 font-mono text-cyan-400">{t.mitre_id}</td>
                <td className="px-4 py-2.5 text-white">{t.name}</td>
                <td className="px-4 py-2.5 text-gray-400">{t.tactic}</td>
                <td className="px-4 py-2.5">
                  <StatusBadge status={t.status_global} />
                </td>
                <td className="px-4 py-2.5 text-right text-gray-300">{t.total_tests}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function TestResultsView({ report }: { report: TestResultsReport }) {
  const s = report.summary;
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
        <StatCard label="Total Tests" value={s.total_tests} />
        <StatCard label="Validated" value={s.by_state.validated ?? 0} color="text-green-400" />
        <StatCard label="In Review" value={s.by_state.in_review ?? 0} color="text-yellow-400" />
        <StatCard label="Rejected" value={s.by_state.rejected ?? 0} color="text-red-400" />
      </div>

      {/* Detection results breakdown */}
      {Object.keys(s.by_detection_result).length > 0 && (
        <div className="rounded-xl border border-gray-800 bg-gray-900 p-4">
          <h3 className="text-sm font-medium text-gray-300 mb-3">Detection Results</h3>
          <div className="flex gap-4">
            {Object.entries(s.by_detection_result).map(([key, val]) => (
              <div key={key} className="text-center">
                <p className="text-xl font-bold text-white">{val}</p>
                <p className="text-xs text-gray-400">{key.replace(/_/g, " ")}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Table */}
      <div className="overflow-hidden rounded-xl border border-gray-800">
        <table className="w-full text-sm">
          <thead className="bg-gray-900/50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Name</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">State</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Platform</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Detection</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Red Val.</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Blue Val.</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-800">
            {report.tests.map((t) => (
              <tr key={t.id} className="hover:bg-gray-900/30">
                <td className="px-4 py-2.5 text-white">{t.name}</td>
                <td className="px-4 py-2.5"><StatusBadge status={t.state} /></td>
                <td className="px-4 py-2.5 text-gray-400">{t.platform || "—"}</td>
                <td className="px-4 py-2.5 text-gray-300">{t.detection_result?.replace(/_/g, " ") || "—"}</td>
                <td className="px-4 py-2.5"><ValidationBadge status={t.red_validation_status} /></td>
                <td className="px-4 py-2.5"><ValidationBadge status={t.blue_validation_status} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function RemediationView({ report }: { report: RemediationReport }) {
  const s = report.summary;
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
        <StatCard label="Total w/ Remediation" value={s.total_with_remediation} />
        <StatCard label="Pending" value={s.by_status.pending ?? 0} color="text-yellow-400" />
        <StatCard label="In Progress" value={s.by_status.in_progress ?? 0} color="text-blue-400" />
        <StatCard label="Completed" value={s.by_status.completed ?? 0} color="text-green-400" />
      </div>

      <div className="overflow-hidden rounded-xl border border-gray-800">
        <table className="w-full text-sm">
          <thead className="bg-gray-900/50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Name</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Test State</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Remediation Status</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-400">Steps</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-800">
            {report.tests.map((t) => (
              <tr key={t.id} className="hover:bg-gray-900/30">
                <td className="px-4 py-2.5 text-white">{t.name}</td>
                <td className="px-4 py-2.5"><StatusBadge status={t.state} /></td>
                <td className="px-4 py-2.5"><RemediationBadge status={t.remediation_status} /></td>
                <td className="px-4 py-2.5 max-w-xs truncate text-gray-400">
                  {t.remediation_steps || "—"}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Shared components ──────────────────────────────────────────────

function StatCard({
  label,
  value,
  color = "text-white",
}: {
  label: string;
  value: number | string;
  color?: string;
}) {
  return (
    <div className="rounded-xl border border-gray-800 bg-gray-900 p-4">
      <p className="text-xs text-gray-500">{label}</p>
      <p className={`text-2xl font-bold ${color}`}>{value}</p>
    </div>
  );
}

const statusColors: Record<string, string> = {
  validated: "bg-green-500/10 text-green-400 border-green-500/30",
  partial: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
  in_progress: "bg-blue-500/10 text-blue-400 border-blue-500/30",
  not_covered: "bg-red-500/10 text-red-400 border-red-500/30",
  not_evaluated: "bg-gray-500/10 text-gray-400 border-gray-500/30",
  draft: "bg-gray-500/10 text-gray-400 border-gray-500/30",
  red_executing: "bg-orange-500/10 text-orange-400 border-orange-500/30",
  blue_evaluating: "bg-indigo-500/10 text-indigo-400 border-indigo-500/30",
  in_review: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
  rejected: "bg-red-500/10 text-red-400 border-red-500/30",
};

function StatusBadge({ status }: { status: string }) {
  return (
    <span className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${statusColors[status] || statusColors.not_evaluated}`}>
      {status.replace(/_/g, " ")}
    </span>
  );
}

function ValidationBadge({ status }: { status: string | null }) {
  if (!status) return <span className="text-gray-600 text-xs">—</span>;
  const colors: Record<string, string> = {
    approved: "text-green-400",
    rejected: "text-red-400",
    pending: "text-yellow-400",
  };
  return <span className={`text-xs font-medium ${colors[status] || "text-gray-400"}`}>{status}</span>;
}

function RemediationBadge({ status }: { status: string | null }) {
  if (!status) return <span className="text-gray-600 text-xs">—</span>;
  const colors: Record<string, string> = {
    pending: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
    in_progress: "bg-blue-500/10 text-blue-400 border-blue-500/30",
    completed: "bg-green-500/10 text-green-400 border-green-500/30",
    not_applicable: "bg-gray-500/10 text-gray-400 border-gray-500/30",
  };
  return (
    <span className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${colors[status] || colors.pending}`}>
      {status.replace(/_/g, " ")}
    </span>
  );
}