import { useMutation, useQuery } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
import { Link, useNavigate } from "react-router-dom";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../components/ui/table";
import { deleteTenant, fetchTenants } from "../../lib/adminApi";

function TenantListPage() {
  const navigate = useNavigate();
  const query = useQuery({
    queryKey: ["tenants", { limit: 50, offset: 0 }],
    queryFn: () => fetchTenants(50, 0),
  });

  const deleteMutation = useMutation({
    mutationFn: (tenantId: string) => deleteTenant(tenantId),
    onSuccess: () => {
      query.refetch();
    },
  });

  const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
    ?.data?.error;
  const fallbackError =
    !errorMsg && query.isError ? "테넌트 목록 조회에 실패했습니다." : null;

  const items = query.data?.items ?? [];

  const handleDelete = (tenantId: string, tenantName: string) => {
    if (!window.confirm(`테넌트 "${tenantName}"를 삭제할까요?`)) {
      return;
    }
    deleteMutation.mutate(tenantId);
  };

  return (
    <div className="space-y-8">
      <header className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-2">
          <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
            <span>Tenants</span>
            <span>/</span>
            <span className="text-foreground">List</span>
          </div>
          <h2 className="text-3xl font-semibold">테넌트 목록</h2>
          <p className="text-sm text-[var(--color-muted)]">
            현재 등록된 테넌트를 확인하고 상태를 관리합니다.
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            onClick={() => query.refetch()}
            disabled={query.isFetching}
          >
            <RefreshCw size={16} />
            새로고침
          </Button>
          <Button asChild>
            <Link to="/tenants/new">
              <Plus size={16} />
              테넌트 추가
            </Link>
          </Button>
        </div>
      </header>

      <Card className="bg-[var(--color-panel)]">
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>Tenant registry</CardTitle>
            <CardDescription>
              총 {query.data?.total ?? 0}개 테넌트
            </CardDescription>
          </div>
          <Badge variant="muted">Admin only</Badge>
        </CardHeader>
        <CardContent>
          {(errorMsg || fallbackError) && (
            <div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
              {errorMsg ?? fallbackError}
            </div>
          )}

          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>NAME</TableHead>
                <TableHead>SLUG</TableHead>
                <TableHead>STATUS</TableHead>
                <TableHead>UPDATED</TableHead>
                <TableHead className="text-right">ACTIONS</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {query.isLoading && (
                <TableRow>
                  <TableCell colSpan={5}>로딩 중...</TableCell>
                </TableRow>
              )}
              {!query.isLoading && items.length === 0 && (
                <TableRow>
                  <TableCell colSpan={5}>
                    아직 등록된 테넌트가 없습니다.
                  </TableCell>
                </TableRow>
              )}
              {items.map((tenant) => (
                <TableRow key={tenant.id}>
                  <TableCell className="font-semibold">{tenant.name}</TableCell>
                  <TableCell>{tenant.slug}</TableCell>
                  <TableCell>
                    <Badge
                      variant={tenant.status === "active" ? "default" : "muted"}
                    >
                      {tenant.status}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    {tenant.updatedAt
                      ? new Date(tenant.updatedAt).toLocaleString("ko-KR")
                      : "-"}
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => navigate(`/tenants/${tenant.id}`)}
                      >
                        <Pencil size={14} />
                        편집
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleDelete(tenant.id, tenant.name)}
                        disabled={deleteMutation.isPending}
                      >
                        <Trash2 size={14} />
                        삭제
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}

export default TenantListPage;
