import { useMemo } from 'react';
import Link from 'next/link';
import { DropdownMenu1 } from '@/partials/dropdown-menu/dropdown-menu-1';
import { DropdownMenu2 } from '@/partials/dropdown-menu/dropdown-menu-2';
import { Avatar, AvatarImage } from '@radix-ui/react-avatar';
import { useQuery } from '@tanstack/react-query';
import { EllipsisVertical } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { apiClient } from '@/lib/api';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';

interface ProjectBackend {
  id: number;
  name: string;
  progress: number;
  consultant_name: string;
  end_date: string;
}

interface BackendResponse<T> {
  success: boolean;
  data: T;
  message: string;
}

const Projects = () => {
  const { t } = useTranslation();

  const { data: projectsResponse, isLoading } = useQuery({
    queryKey: ['profile-projects'],
    queryFn: async () => {
      const response = await apiClient.get<BackendResponse<ProjectBackend[]>>(
        '/contractor/profile/projects',
        { requireAuth: true },
      );
      return response.data;
    },
  });

  const projects = projectsResponse?.data || [];

  const getProgressVariant = (value: number) => {
    if (value === 100) return 'bg-success';
    if (value >= 50) return 'bg-primary';
    if (value >= 25) return 'bg-warning';
    return 'bg-destructive';
  };

  const renderItem = (item: ProjectBackend) => {
    return (
      <TableRow key={item.id}>
        <TableCell className="text-start py-2">
          <Link
            href="#"
            className="text-sm font-medium text-mono hover:text-primary"
          >
            {item.name}
          </Link>
        </TableCell>
        <TableCell>
          <Progress
            value={item.progress}
            indicatorClassName={getProgressVariant(item.progress)}
            className="h-1"
          />
        </TableCell>
        <TableCell>
          <div className="flex items-center gap-2 rtl:justify-start shrink-0">
            {/* <Avatar>
              <AvatarImage
                src="/media/avatars/blank.png"
                alt={item.consultant_name}
                className="w-8 h-8 rounded-full"
              />
            </Avatar> */}
            <span className="font-normal text-foreground">
              {item.consultant_name}
            </span>
          </div>
        </TableCell>
        <TableCell className="text-end text-sm font-medium text-secondary-foreground">
          {item.end_date}
        </TableCell>
        <TableCell className="text-start">
          {/* <DropdownMenu2
            trigger={
              <Button variant="ghost" mode="icon">
                <EllipsisVertical />
              </Button>
            }
          /> */}
        </TableCell>
      </TableRow>
    );
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('projectsTable.title')}</CardTitle>
        {/* <DropdownMenu1
          trigger={
            <Button variant="ghost" mode="icon">
              <EllipsisVertical />
            </Button>
          }
        /> */}
      </CardHeader>
      <CardContent className="kt-scrollable-x-auto p-0">
        {isLoading ? (
          <div className="p-4 text-center text-sm text-muted-foreground">
            {t('common.messages.loading')}
          </div>
        ) : (
          <Table>
            <TableHeader className="bg-muted">
              <TableRow>
                <TableHead className="min-w-52 font-normal! text-secondary-foreground! h-10">
                  {t('projectsTable.columns.project_name')}
                </TableHead>
                <TableHead className="min-w-40 font-normal! text-secondary-foreground! h-10">
                  {t('projectsTable.columns.progress')}
                </TableHead>
                <TableHead className="text-end min-w-32 font-normal! text-secondary-foreground! h-10">
                  {t('projectsTable.columns.consultant_name')}
                </TableHead>
                <TableHead className="text-end min-w-32 font-normal! text-secondary-foreground! h-10">
                  {t('projectsTable.columns.end_date')}
                </TableHead>
                <TableHead className="w-[30px] h-10"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {projects.length > 0 ? (
                projects.map((item) => renderItem(item))
              ) : (
                <TableRow>
                  <TableCell
                    colSpan={5}
                    className="text-center py-4 text-muted-foreground"
                  >
                    {t('projectsTable.empty')}
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        )}
      </CardContent>
      <CardFooter className="justify-center">
        <Button mode="link" underlined="dashed" asChild>
          <Link href="/projects/list">
            {t('projectsTable.buttons.all_projects')}
          </Link>
        </Button>
      </CardFooter>
    </Card>
  );
};

export { Projects };