'use client';

import * as React from 'react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
  CardAction,
} from '../../ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
import { Badge } from '../../ui/badge';
import { Progress } from '../../ui/progress';
import { cn } from '../../shared/utils';
import type { ProgressVariant } from '../../ui/progress';

export type ProjectStatus = 'active' | 'review' | 'done' | 'paused' | 'at-risk';

export interface ProjectMember {
  name: string;
  initials: string;
  avatar?: string;
}

export interface ProjectCardProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  description?: string;
  status: ProjectStatus;
  progress: number;
  dueDate?: string;
  members?: ProjectMember[];
  maxMembers?: number;
  action?: React.ReactNode;
}

const statusVariantConfig: Record<
  ProjectStatus,
  {
    variant: React.ComponentProps<typeof Badge>['variant'];
    progressVariant: ProgressVariant;
  }
> = {
  active: { variant: 'info', progressVariant: 'info' },
  review: { variant: 'warning', progressVariant: 'warning' },
  done: { variant: 'success', progressVariant: 'success' },
  paused: { variant: 'secondary', progressVariant: 'default' },
  'at-risk': { variant: 'destructive', progressVariant: 'destructive' },
};

export function ProjectCard({
  title,
  description,
  status,
  progress,
  dueDate,
  members = [],
  maxMembers = 4,
  action,
  className,
  ...props
}: ProjectCardProps) {
  const { t } = useTranslation();
  const statusLabelMap = useMemo<Record<ProjectStatus, string>>(
    () => ({
      active: t('projectCard.status.active'),
      review: t('projectCard.status.review'),
      done: t('projectCard.status.completed'),
      paused: t('projectCard.status.paused'),
      'at-risk': t('projectCard.status.atRisk'),
    }),
    [t]
  );
  const { variant, progressVariant } = statusVariantConfig[status];
  const label = statusLabelMap[status];
  const visible = members.slice(0, maxMembers);
  const overflow = members.length - maxMembers;

  return (
    <Card className={cn('w-full', className)} {...props}>
      <CardHeader>
        <div className="flex flex-col gap-1 min-w-0">
          <CardTitle className="truncate">{title}</CardTitle>
          {description && <CardDescription className="line-clamp-2">{description}</CardDescription>}
        </div>
        <CardAction className="flex items-center gap-2">
          <Badge variant={variant}>{label}</Badge>
          {action}
        </CardAction>
      </CardHeader>

      <CardContent className="space-y-4">
        <div className="space-y-1.5">
          <div className="flex justify-between text-xs text-muted-foreground">
            <span>{t('projectCard.progress')}</span>
            <span>{progress}%</span>
          </div>
          <Progress value={progress} variant={progressVariant} className="h-2" />
        </div>
      </CardContent>

      <CardFooter className="flex items-center justify-between">
        <div className="flex -space-x-2">
          {visible.map(m => (
            <Avatar key={m.name} className="size-7 border-2 border-background">
              {m.avatar && <AvatarImage src={m.avatar} alt={m.name} />}
              <AvatarFallback className="text-[10px]">{m.initials}</AvatarFallback>
            </Avatar>
          ))}
          {overflow > 0 && (
            <div className="size-7 rounded-full border-2 border-background bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground">
              +{overflow}
            </div>
          )}
        </div>
        {dueDate && <span className="text-xs text-muted-foreground">{dueDate}</span>}
      </CardFooter>
    </Card>
  );
}