'use client';

import * as React from 'react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Card, CardContent } from '../../ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
import { Badge } from '../../ui/badge';
import { Button } from '../../ui/button';
import { cn } from '../../shared/utils';

export interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {
  name: string;
  role: string;
  department?: string;
  avatar?: string;
  initials: string;
  status?: 'online' | 'offline' | 'away' | 'busy';
  stats?: Array<{ label: string; value: string | number }>;
  primaryAction?: { label: string; onClick?: () => void };
  secondaryAction?: { label: string; onClick?: () => void };
}

const statusVariant = {
  online: 'success' as const,
  offline: 'secondary' as const,
  away: 'warning' as const,
  busy: 'destructive' as const,
};

export function ProfileCard({
  name,
  role,
  department,
  avatar,
  initials,
  status,
  stats,
  primaryAction,
  secondaryAction,
  className,
  ...props
}: ProfileCardProps) {
  const { t } = useTranslation();
  const statusLabelMap = useMemo(
    () => ({
      online: t('profileCard.status.online'),
      offline: t('profileCard.status.offline'),
      away: t('profileCard.status.away'),
      busy: t('profileCard.status.busy'),
    }),
    [t]
  );
  const s = status ? { label: statusLabelMap[status], variant: statusVariant[status] } : null;

  return (
    <Card className={cn('w-full', className)} {...props}>
      <CardContent className="pt-6 flex flex-col items-center text-center gap-3">
        <div className="relative">
          <Avatar className="size-16">
            {avatar && <AvatarImage src={avatar} alt={name} />}
            <AvatarFallback className="text-lg font-semibold">{initials}</AvatarFallback>
          </Avatar>
          {s && (
            <span className="absolute -bottom-0.5 -right-0.5">
              <Badge variant={s.variant} className="text-[10px] px-1.5 py-0 h-5">
                {s.label}
              </Badge>
            </span>
          )}
        </div>

        <div className="space-y-0.5">
          <p className="font-semibold text-base leading-tight">{name}</p>
          <p className="text-sm text-muted-foreground">{role}</p>
          {department && <p className="text-xs text-muted-foreground">{department}</p>}
        </div>

        {stats && stats.length > 0 && (
          <div className="w-full grid grid-cols-3 divide-x divide-border border-y border-border py-3 mt-1">
            {stats.map(stat => (
              <div key={stat.label} className="flex flex-col items-center gap-0.5 px-2">
                <span className="text-base font-bold">{stat.value}</span>
                <span className="text-[11px] text-muted-foreground">{stat.label}</span>
              </div>
            ))}
          </div>
        )}

        {(primaryAction || secondaryAction) && (
          <div className="flex gap-2 w-full">
            {secondaryAction && (
              <Button
                variant="outline"
                className="flex-1"
                size="sm"
                onClick={secondaryAction.onClick}
              >
                {secondaryAction.label}
              </Button>
            )}
            {primaryAction && (
              <Button className="flex-1" size="sm" onClick={primaryAction.onClick}>
                {primaryAction.label}
              </Button>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}