"use client";

import { Trash2 } from "lucide-react";

import { motion } from "framer-motion";

import { Switch } from "@/components/ui/switch";

import { Button } from "@/components/ui/button";

import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";

import { usePatchWatch, useDeleteWatch } from "@/hooks/useWatchlist";

import { fadeUpItem } from "@/lib/motion";

import { cn } from "@/lib/utils";

import type { Priority, WatchlistRule } from "@/lib/types";

const PRIORITY_COLOR: Record<Priority, string> = {

  low: "var(--color-fg-tertiary)",

  normal: "var(--color-accent-blue)",

  high: "var(--color-accent-amber)",

  critical: "var(--color-accent-red)",

};

export function WatchlistItem({ rule }: { rule: WatchlistRule }) {

  const patch = usePatchWatch();

  const del = useDeleteWatch();

  const c = PRIORITY_COLOR[rule.priority];

  return (

    <motion.li

      variants={fadeUpItem}

      layout

      className={cn(

        "flex items-center gap-3 rounded-[var(--radius)] border border-[var(--color-border-subtle)] bg-[var(--color-bg-elevated)] p-3",

        !rule.active && "opacity-60",

      )}

    >

      <div className="min-w-0 flex-1">

        <div className="flex items-center gap-2">

          <span className="truncate text-sm font-medium text-[var(--color-fg-primary)]">{rule.label}</span>

          <span

            className="rounded-full px-1.5 py-0.5 text-[10px] font-medium capitalize"

            style={{ color: c, backgroundColor: `color-mix(in oklch, ${c} 14%, transparent)` }}

          >

            {rule.priority}

          </span>

        </div>

        <p className="mt-0.5 text-xs text-[var(--color-fg-tertiary)]">

          <span className="capitalize">{rule.kind}</span> · {rule.matches_30d} matches in 30d

        </p>

      </div>

      <Tooltip>

        <TooltipTrigger asChild>

          <span>

            <Switch

              checked={rule.active}

              onCheckedChange={(active) => patch.mutate({ id: rule.id, active })}

              aria-label={rule.active ? "Pause alerts" : "Resume alerts"}

            />

          </span>

        </TooltipTrigger>

        <TooltipContent>{rule.active ? "Alerts on" : "Paused"}</TooltipContent>

      </Tooltip>

      <Button

        variant="ghost"

        size="icon"

        aria-label={`Remove ${rule.label}`}

        onClick={() => del.mutate(rule.id)}

        className="text-[var(--color-fg-tertiary)] hover:text-[var(--color-accent-red)]"

      >

        <Trash2 className="h-4 w-4" aria-hidden />

      </Button>

    </motion.li>

  );

}