"use client";

import { useMemo } from "react";
import { trpc } from "~/lib/trpc/client.js";
import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { WidgetFilterBar, type WidgetFilter } from "~/components/dashboard/WidgetFilterBar.js";

const FILTERS: WidgetFilter[] = [
  { type: "search", key: "search", placeholder: "Search skill..." },
];

export function SkillGapWidget({ config, onConfigChange }: WidgetProps) {
  const { data, isLoading } = trpc.dashboard.getSkillGaps.useQuery(
    undefined,
    { staleTime: 60_000, placeholderData: (prev) => prev },
  );

  const search = ((config.search as string) ?? "").toLowerCase();

  const rows = useMemo(() => {
    const all = data ?? [];
    if (!search) return all;
    return all.filter((r) => r.skill.toLowerCase().includes(search));
  }, [data, search]);

  if (isLoading && !data) {
    return (
      <div className="flex flex-col gap-1 pt-1">
        {[...Array(6)].map((_, i) => (
          <div key={i} className="flex items-center gap-3 px-3 py-2">
            <div className="h-3 flex-1 shimmer-skeleton rounded" />
            <div className="h-3 w-10 shimmer-skeleton rounded" />
            <div className="h-3 w-10 shimmer-skeleton rounded" />
            <div className="h-3 w-6 shimmer-skeleton rounded-full" />
          </div>
        ))}
      </div>
    );
  }

  if (rows.length === 0) {
    return (
      <div className="flex flex-col h-full">
        <WidgetFilterBar filters={FILTERS} values={config} onChange={onConfigChange ?? (() => {})} />
        <div className="flex items-center justify-center flex-1 text-sm text-gray-400">
          No skill gaps detected.
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full overflow-hidden">
      <WidgetFilterBar filters={FILTERS} values={config} onChange={onConfigChange ?? (() => {})} />
      <div className="overflow-auto flex-1">
        <table className="w-full text-xs">
          <thead className="bg-gray-50 dark:bg-gray-800/50 sticky top-0">
            <tr>
              <th className="px-3 py-2 text-left font-medium text-gray-500 dark:text-gray-400">
                Skill <InfoTooltip content="Skills required by open demand positions" />
              </th>
              <th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
                Demand <InfoTooltip content="Number of unfilled demand requirements needing this skill" />
              </th>
              <th className="px-3 py-2 text-right font-medium text-gray-500 dark:text-gray-400">
                Supply <InfoTooltip content="Number of active resources with this skill at proficiency 3+" />
              </th>
              <th className="px-3 py-2 text-center font-medium text-gray-500 dark:text-gray-400">
                Gap <InfoTooltip content="Supply minus Demand: negative (red) = shortage, positive (green) = surplus" />
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
            {rows.map((row) => {
              const isShortage = row.gap < 0;
              const isSurplus = row.gap > 0;
              return (
                <tr key={row.skill} className="hover:bg-gray-50 dark:hover:bg-gray-800/30">
                  <td className="px-3 py-2 font-medium text-gray-900 dark:text-gray-100 max-w-[180px] truncate">
                    {row.skill}
                  </td>
                  <td className="px-3 py-2 text-right text-gray-700 dark:text-gray-300 tabular-nums">
                    {row.demand}
                  </td>
                  <td className="px-3 py-2 text-right text-gray-700 dark:text-gray-300 tabular-nums">
                    {row.supply}
                  </td>
                  <td className="px-3 py-2 text-center">
                    <span className="inline-flex items-center gap-1.5">
                      <span
                        className={`inline-block w-2 h-2 rounded-full ${
                          isShortage
                            ? "bg-red-500"
                            : isSurplus
                              ? "bg-green-500"
                              : "bg-gray-400"
                        }`}
                      />
                      <span
                        className={`font-semibold tabular-nums ${
                          isShortage
                            ? "text-red-700"
                            : isSurplus
                              ? "text-green-700"
                              : "text-gray-500"
                        }`}
                      >
                        {row.gap > 0 ? `+${row.gap}` : row.gap}
                      </span>
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}
