"use client";

import { useMemo } from "react";
import { trpc } from "~/lib/trpc/client.js";
import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
import { useTableSort } from "~/hooks/useTableSort.js";
import { GapIndicator } from "./shared.js";

export function GapsTab() {
  const { data, isLoading } = trpc.resource.getSkillMarketplace.useQuery(
    { searchSkill: undefined, minProficiency: 1, availableOnly: false },
    { staleTime: 60_000 },
  );

  const gapData = useMemo(() => data?.gapData ?? [], [data?.gapData]);
  const { sorted, sortField, sortDir, toggle } = useTableSort(gapData);

  if (isLoading) {
    return (
      <div className="space-y-4">
        <div className="h-8 shimmer-skeleton rounded w-48" />
        <div className="h-64 shimmer-skeleton rounded-xl" />
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="bg-white dark:bg-slate-900 rounded-xl border border-gray-200 dark:border-slate-700 p-5 space-y-4">
        <div>
          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Supply vs Demand</h2>
          <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
            Supply = resources with proficiency 3+ &middot; Demand = unfilled demand requirements &middot; Sorted by largest gap
          </p>
        </div>

        {sorted.length === 0 ? (
          <p className="text-sm text-gray-400 dark:text-gray-500 italic py-4">
            No gap data available. Gaps appear when projects have unfilled demand requirements with required skills.
          </p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="bg-gray-50 dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700">
                <tr>
                  <SortableColumnHeader label="Skill" field="skill" sortField={sortField} sortDir={sortDir} onSort={toggle} />
                  <SortableColumnHeader label="Supply" field="supply" sortField={sortField} sortDir={sortDir} onSort={toggle} align="right" />
                  <SortableColumnHeader label="Demand" field="demand" sortField={sortField} sortDir={sortDir} onSort={toggle} align="right" />
                  <SortableColumnHeader label="Gap" field="gap" sortField={sortField} sortDir={sortDir} onSort={toggle} align="center" />
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Visual</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 dark:divide-slate-700">
                {sorted.map((row) => {
                  const maxBar = Math.max(row.supply, row.demand, 1);
                  return (
                    <tr key={row.skill} className="hover:bg-gray-50 dark:hover:bg-slate-800/50">
                      <td className="px-4 py-2.5 font-medium text-gray-900 dark:text-gray-100">{row.skill}</td>
                      <td className="px-4 py-2.5 text-right text-gray-700 dark:text-gray-300">{row.supply}</td>
                      <td className="px-4 py-2.5 text-right text-gray-700 dark:text-gray-300">{row.demand}</td>
                      <td className="px-4 py-2.5 text-center"><GapIndicator gap={row.gap} /></td>
                      <td className="px-4 py-2.5 w-48">
                        <div className="flex items-center gap-1 h-4">
                          <div
                            className="h-3 rounded-sm bg-green-400 dark:bg-green-500 transition-all"
                            style={{ width: `${(row.supply / maxBar) * 100}%`, minWidth: row.supply > 0 ? 4 : 0 }}
                            title={`Supply: ${row.supply}`}
                          />
                          <div
                            className="h-3 rounded-sm bg-red-400 dark:bg-red-500 transition-all"
                            style={{ width: `${(row.demand / maxBar) * 100}%`, minWidth: row.demand > 0 ? 4 : 0 }}
                            title={`Demand: ${row.demand}`}
                          />
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            <div className="flex items-center gap-4 mt-3 px-4">
              <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
                <span className="w-3 h-3 rounded-sm bg-green-400 dark:bg-green-500 inline-block" /> Supply (prof. 3+)
              </div>
              <div className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
                <span className="w-3 h-3 rounded-sm bg-red-400 dark:bg-red-500 inline-block" /> Demand (unfilled)
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
