"use client";

import { useState } from "react";
import { trpc } from "~/lib/trpc/client.js";
import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
import { ProjectStatus } from "@planarchy/shared/types";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";

const STATUS_COLORS: Record<string, string> = {
  DRAFT: "bg-gray-100 text-gray-700",
  ACTIVE: "bg-green-100 text-green-700",
  ON_HOLD: "bg-yellow-100 text-yellow-700",
  COMPLETED: "bg-blue-100 text-blue-700",
  CANCELLED: "bg-red-100 text-red-700",
};

export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
  const status = (config.status as ProjectStatus) || undefined;
  const search = (config.search as string) || "";

  const { data: projects, isLoading } = trpc.project.listWithCosts.useQuery(
    { status, search: search || undefined },
    { staleTime: 60_000 },
  );

  type SortKey = "code" | "name" | "status" | "cost" | "personDays";
  const [sortKey, setSortKey] = useState<SortKey>("name");
  const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");

  function toggleSort(key: SortKey) {
    if (sortKey === key) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
    else { setSortKey(key); setSortDir("asc"); }
  }

  if (isLoading) {
    return (
      <div className="animate-pulse flex flex-col gap-2 pt-1">
        {/* header row */}
        <div className="flex gap-3 px-3 py-2">
          {[40, 120, 80, 60, 60].map((w, i) => (
            <div key={i} className="h-2.5 bg-gray-200 dark:bg-gray-700 rounded" style={{ width: w }} />
          ))}
        </div>
        {/* data rows */}
        {[...Array(6)].map((_, i) => (
          <div key={i} className="flex gap-3 px-3 py-2 border-t border-gray-100 dark:border-gray-800">
            <div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded font-mono" />
            <div className="h-3 flex-1 bg-gray-200 dark:bg-gray-700 rounded" />
            <div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded" />
            <div className="h-3 w-12 bg-gray-200 dark:bg-gray-700 rounded" />
            <div className="h-3 w-10 bg-gray-200 dark:bg-gray-700 rounded" />
          </div>
        ))}
      </div>
    );
  }

  interface ProjectRow {
    id: string;
    shortCode: string;
    name: string;
    status: string;
    totalCostCents: number;
    totalPersonDays: number;
  }
  const list = ((projects as unknown as { projects: ProjectRow[] } | undefined)?.projects ?? []) as ProjectRow[];

  const sorted = [...list].sort((a, b) => {
    const mult = sortDir === "asc" ? 1 : -1;
    switch (sortKey) {
      case "code": return mult * a.shortCode.localeCompare(b.shortCode);
      case "name": return mult * a.name.localeCompare(b.name);
      case "status": return mult * a.status.localeCompare(b.status);
      case "cost": return mult * (a.totalCostCents - b.totalCostCents);
      case "personDays": return mult * (a.totalPersonDays - b.totalPersonDays);
      default: return 0;
    }
  });

  return (
    <div className="flex flex-col h-full gap-3">
      {/* Filters */}
      <div className="flex gap-2">
        <input
          type="search"
          placeholder="Search projects..."
          value={search}
          onChange={(e) => onConfigChange?.({ search: e.target.value })}
          className="flex-1 min-w-0 px-2 py-1 text-xs border border-gray-300 rounded-lg"
        />
        <select
          value={status ?? ""}
          onChange={(e) => onConfigChange?.({ status: e.target.value || undefined })}
          className="px-2 py-1 text-xs border border-gray-300 rounded-lg bg-white"
        >
          <option value="">All Statuses</option>
          {Object.values(ProjectStatus).map((s) => (
            <option key={s} value={s}>{s}</option>
          ))}
        </select>
      </div>

      {/* Table */}
      <div className="overflow-auto flex-1">
        <table className="w-full text-xs">
          <thead className="bg-gray-50 sticky top-0">
            <tr>
              <th className="px-3 py-2 text-left font-medium text-gray-500">
                <button type="button" onClick={() => toggleSort("code")} className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer">
                  Code
                  <span className="text-[10px] ml-0.5">{sortKey === "code" ? (sortDir === "asc" ? "▲" : "▼") : <span className="text-gray-300">⇅</span>}</span>
                </button>
              </th>
              <th className="px-3 py-2 text-left font-medium text-gray-500">
                <button type="button" onClick={() => toggleSort("name")} className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer">
                  Name
                  <span className="text-[10px] ml-0.5">{sortKey === "name" ? (sortDir === "asc" ? "▲" : "▼") : <span className="text-gray-300">⇅</span>}</span>
                </button>
              </th>
              <th className="px-3 py-2 text-left font-medium text-gray-500">
                <button type="button" onClick={() => toggleSort("status")} className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer">
                  Status
                  <span className="text-[10px] ml-0.5">{sortKey === "status" ? (sortDir === "asc" ? "▲" : "▼") : <span className="text-gray-300">⇅</span>}</span>
                </button>
              </th>
              <th className="px-3 py-2 text-right font-medium text-gray-500">
                <span className="inline-flex items-center justify-end">
                  <button type="button" onClick={() => toggleSort("cost")} className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer">
                    Cost
                    <span className="text-[10px] ml-0.5">{sortKey === "cost" ? (sortDir === "asc" ? "▲" : "▼") : <span className="text-gray-300">⇅</span>}</span>
                  </button>
                  <InfoTooltip
                    content="Sum of (resource LCR × hours per day × working days) across all non-cancelled allocations on this project."
                    width="w-72"
                  />
                </span>
              </th>
              <th className="px-3 py-2 text-right font-medium text-gray-500">
                <span className="inline-flex items-center justify-end">
                  <button type="button" onClick={() => toggleSort("personDays")} className="inline-flex items-center gap-0.5 hover:text-gray-700 cursor-pointer">
                    Person Days
                    <span className="text-[10px] ml-0.5">{sortKey === "personDays" ? (sortDir === "asc" ? "▲" : "▼") : <span className="text-gray-300">⇅</span>}</span>
                  </button>
                  <InfoTooltip content="Total working days allocated across all non-cancelled allocations (sum of allocation durations in working days)." />
                </span>
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {sorted.map((p) => (
              <tr key={p.id} className="hover:bg-gray-50">
                <td className="px-3 py-2 font-mono text-gray-600">{p.shortCode}</td>
                <td className="px-3 py-2 font-medium text-gray-900 max-w-[180px] truncate">{p.name}</td>
                <td className="px-3 py-2">
                  <span className={`inline-block px-1.5 py-0.5 rounded-full text-xs ${STATUS_COLORS[p.status] ?? ""}`}>
                    {p.status}
                  </span>
                </td>
                <td className="px-3 py-2 text-right text-gray-700">
                  {(p.totalCostCents / 100).toLocaleString("de-DE", { maximumFractionDigits: 0 })} €
                </td>
                <td className="px-3 py-2 text-right text-gray-700">{p.totalPersonDays}d</td>
              </tr>
            ))}
          </tbody>
        </table>
        {list.length === 0 && (
          <div className="text-center py-8 text-sm text-gray-400">No projects found.</div>
        )}
      </div>
    </div>
  );
}