"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";
import type { MatrixRowViewModel } from "../_lib/types";

interface Props {
  rows: readonly MatrixRowViewModel[];
}

type Filter = "all" | "conversion" | "hipaa" | "traffic" | "critical";

const FILTERS: { key: Filter; label: string }[] = [
  { key: "all",        label: "All pages (92)"       },
  { key: "conversion", label: "Conversion paths (18)" },
  { key: "hipaa",      label: "HIPAA-relevant (12)"  },
  { key: "traffic",    label: "With traffic (47)"    },
  { key: "critical",   label: "Critical findings (8)" },
];

const INTENT_STYLES = {
  info:          "bg-slate-100 text-slate-600",
  commercial:    "bg-amber-100 text-amber-700",
  transactional: "bg-emerald-100 text-emerald-700",
} as const;

const COUNT_STYLES = {
  critical: "bg-red-100 text-red-700",
  issues:   "bg-amber-100 text-amber-700",
  none:     "bg-slate-100 text-slate-600",
} as const;

function CountBadge({ count, level }: { count: number; level: "critical" | "issues" | "none" }) {
  return (
    <span className={cn("inline-flex items-center justify-center min-w-[24px] h-5 px-1.5 rounded text-[11px] font-semibold tabular-nums", COUNT_STYLES[level])}>
      {count}
    </span>
  );
}

function VoiceScore({ score }: { score: number }) {
  const color = score >= 70 ? "bg-emerald-500" : score >= 45 ? "bg-amber-500" : "bg-red-500";
  return (
    <span className="inline-flex items-center gap-2 font-semibold text-slate-900 text-[12px]">
      <span className="w-10 h-1 bg-slate-100 rounded-full overflow-hidden inline-block">
        <span className={`block h-full rounded-full ${color}`} style={{ width: `${score}%` }} />
      </span>
      {score}
    </span>
  );
}

export function Matrix({ rows }: Props) {
  const [active, setActive] = useState<Filter>("all");

  return (
    <div className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-subtle">
      {/* Filter chips */}
      <div className="flex flex-wrap items-center gap-2 px-4 py-3.5 border-b border-slate-200 bg-slate-50">
        {FILTERS.map((f) => (
          <button
            key={f.key}
            onClick={() => setActive(f.key)}
            className={cn(
              "px-2.5 py-1.5 rounded-md text-[12px] font-medium border transition-colors",
              active === f.key
                ? "bg-red-50 border-red-200 text-red-700"
                : "bg-white border-slate-200 text-slate-700 hover:border-slate-300",
            )}
          >
            {f.label}
          </button>
        ))}
      </div>

      {/* Table */}
      <div className="overflow-x-auto">
        <table className="w-full text-[13px] border-collapse">
          <thead className="bg-slate-50">
            <tr>
              {["Page", "Intent", "Traffic", "Tech", "Schema", "E-E-A-T", "Snippet", "Voice", "AI Vis."].map((h, i) => (
                <th
                  key={h}
                  className={cn(
                    "px-3.5 py-2.5 text-[10px] font-semibold text-slate-500 uppercase tracking-widest border-b border-slate-200 whitespace-nowrap",
                    i >= 2 ? "text-right" : "text-left",
                  )}
                >
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((row, i) => (
              <tr key={i} className="border-b border-slate-100 last:border-0 hover:bg-slate-50 transition-colors">
                <td className="px-3.5 py-3 font-mono text-[11px] text-slate-900 font-medium whitespace-nowrap">
                  {row.page}
                </td>
                <td className="px-3.5 py-3">
                  <span className={cn("inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-[0.04em]", INTENT_STYLES[row.intent])}>
                    {row.intent === "transactional" ? "Transact." : row.intent.charAt(0).toUpperCase() + row.intent.slice(1)}
                  </span>
                </td>
                <td className="px-3.5 py-3 text-right text-slate-700 tabular-nums">{row.traffic}</td>
                <td className="px-3.5 py-3 text-right"><CountBadge count={row.tech.count} level={row.tech.level} /></td>
                <td className="px-3.5 py-3 text-right"><CountBadge count={row.schema.count} level={row.schema.level} /></td>
                <td className="px-3.5 py-3 text-right"><CountBadge count={row.eeat.count} level={row.eeat.level} /></td>
                <td className="px-3.5 py-3 text-right"><CountBadge count={row.snippet.count} level={row.snippet.level} /></td>
                <td className="px-3.5 py-3 text-right">
                  {row.voice != null ? <VoiceScore score={row.voice} /> : <span className="text-slate-400 text-[12px]">--</span>}
                </td>
                <td className="px-3.5 py-3 text-right text-slate-600 text-[12px]">{row.aiVis ?? "—"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
