"use client";

import { useCallback, useMemo, useState } from "react";

import {
  type ColumnDef,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { CircleDot, ExternalLink, XCircle } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { DataTable } from "@/components/tables/DataTable";
import { CloseForgejoIssueDialog } from "@/components/git/CloseForgejoIssueDialog";
import type { ForgejoIssue } from "@/lib/api-forgejo";

export type ForgejoIssuesTableProps = {
  issues: ForgejoIssue[];
  isLoading?: boolean;
  onRefresh: () => void;
};

export function ForgejoIssuesTable({
  issues,
  isLoading = false,
  onRefresh,
}: ForgejoIssuesTableProps) {
  const [closeIssueDialogOpen, setCloseIssueDialogOpen] = useState(false);
  const [issueToClose, setIssueToClose] = useState<ForgejoIssue | null>(null);

  const handleCloseClick = useCallback((issue: ForgejoIssue) => {
    setIssueToClose(issue);
    setCloseIssueDialogOpen(true);
  }, []);

  const handleCloseSuccess = () => {
    onRefresh();
  };

  const columns: ColumnDef<ForgejoIssue>[] = useMemo(
    () => [
      {
        accessorKey: "forgejo_issue_number",
        header: "#",
        cell: ({ row }) => (
          <a
            href={row.original.html_url}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-1 font-mono text-sm text-[color:var(--accent)] hover:underline"
          >
            #{row.original.forgejo_issue_number}
            <ExternalLink className="h-3 w-3" />
          </a>
        ),
      },
      {
        accessorKey: "title",
        header: "Title",
        cell: ({ row }) => (
          <div
            className="max-w-[28rem] truncate font-medium text-strong"
            title={row.original.title}
          >
            {row.original.title}
          </div>
        ),
      },
      {
        accessorKey: "body_preview",
        header: "Description",
        cell: ({ row }) => {
          const body = row.original.body_preview;
          if (!body) return null;
          const truncated = body.length > 120 ? body.slice(0, 120) + "…" : body;
          return (
            <div className="max-w-xs truncate text-sm text-muted" title={body}>
              {truncated}
            </div>
          );
        },
      },
      {
        accessorKey: "state",
        header: "State",
        cell: ({ row }) => {
          const state = row.original.state;
          return (
            <Badge variant={state === "open" ? "success" : "default"}>
              {state}
            </Badge>
          );
        },
      },
      {
        accessorKey: "author",
        header: "Author",
        cell: ({ row }) => (
          <span className="block max-w-[160px] truncate text-muted">
            {row.original.author || "Unknown"}
          </span>
        ),
      },
      {
        accessorKey: "labels",
        header: "Labels",
        cell: ({ row }) => {
          const labels = row.original.labels;
          if (!labels || labels.length === 0) return null;
          return (
            <div className="flex max-w-[220px] flex-wrap gap-1">
              {labels
                .slice(0, 3)
                .map((label: Record<string, unknown>, i: number) => (
                  <Badge
                    key={i}
                    variant="outline"
                    className="text-xs"
                    style={
                      label.color
                        ? { backgroundColor: `#${label.color}`, color: "#fff" }
                        : undefined
                    }
                  >
                    {String(label.name || "")}
                  </Badge>
                ))}
              {labels.length > 3 && (
                <span className="text-xs text-muted">+{labels.length - 3}</span>
              )}
            </div>
          );
        },
      },
      {
        accessorKey: "forgejo_updated_at",
        header: "Updated",
        cell: ({ row }) => {
          try {
            return (
              <span className="whitespace-nowrap text-muted">
                {new Date(row.original.forgejo_updated_at).toLocaleDateString()}
              </span>
            );
          } catch {
            return (
              <span className="text-muted">
                {row.original.forgejo_updated_at}
              </span>
            );
          }
        },
      },
      {
        id: "actions",
        header: "Actions",
        cell: ({ row }) => {
          const issue = row.original;
          if (issue.state !== "open" || issue.is_pull_request) return null;
          return (
            <Button
              variant="ghost"
              size="sm"
              className="h-8 w-8 p-0 text-[color:var(--danger)] hover:bg-[color:rgba(248,113,113,0.08)]"
              onClick={() => handleCloseClick(issue)}
              title="Close issue"
            >
              <XCircle className="h-4 w-4" />
            </Button>
          );
        },
      },
    ],
    [handleCloseClick],
  );
  const table = useReactTable({
    data: issues,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <>
      <div className="overflow-hidden rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] shadow-lush">
        <DataTable
          table={table}
          isLoading={isLoading}
          loadingLabel="Loading Git Project issues…"
          tableClassName="min-w-[960px] w-full text-left text-sm"
          emptyState={{
            icon: <CircleDot className="h-12 w-12" />,
            title: "No Git Project issues found",
            description:
              "Sync a repository to pull issues into Pipeline, or adjust your filters.",
          }}
        />
      </div>
      <CloseForgejoIssueDialog
        issue={issueToClose}
        open={closeIssueDialogOpen}
        onOpenChange={setCloseIssueDialogOpen}
        onCloseSuccess={handleCloseSuccess}
      />
    </>
  );
}
