'use client';

import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';
import type { S3StatusType } from '@/hooks/lean/use-s3-plans';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';

interface S3StatusCellProps {
  /** Current status value */
  status: S3StatusType;
  /** Week number */
  week: number;
  /** Whether the cell is interactive */
  onClick?: () => void;
  /** Whether the status is being updated */
  isUpdating?: boolean;
  /** Optional note to display in tooltip */
  note?: string | null;
  /** Completed by user name */
  completedBy?: string | null;
  /** Completed at date */
  completedAt?: string | null;
  /** Additional CSS classes */
  className?: string;
}

/**
 * Status color mapping for 3S planning cells
 */
const STATUS_COLORS: Record<S3StatusType, { bg: string; hover: string; ring: string }> = {
  NOT_APPLICABLE: {
    bg: 'bg-gray-200 dark:bg-gray-700',
    hover: 'hover:bg-gray-300 dark:hover:bg-gray-600',
    ring: 'ring-gray-400',
  },
  YELLOW: {
    bg: 'bg-yellow-400 dark:bg-yellow-500',
    hover: 'hover:bg-yellow-500 dark:hover:bg-yellow-400',
    ring: 'ring-yellow-500',
  },
  GREEN: {
    bg: 'bg-green-500 dark:bg-green-600',
    hover: 'hover:bg-green-600 dark:hover:bg-green-500',
    ring: 'ring-green-500',
  },
  RED: {
    bg: 'bg-red-500 dark:bg-red-600',
    hover: 'hover:bg-red-600 dark:hover:bg-red-500',
    ring: 'ring-red-500',
  },
};

/**
 * Status label keys for tooltips
 */
const STATUS_LABEL_KEYS: Record<S3StatusType, string> = {
  NOT_APPLICABLE: 'status.not_started',
  YELLOW: 'status.in_progress',
  GREEN: 'status.completed',
  RED: 'status.issue',
};

/**
 * S3 Status Cell Component
 * Displays a colored cell representing the status for a specific week
 */
export function S3StatusCell({
  status,
  week,
  onClick,
  isUpdating = false,
  note,
  completedBy,
  completedAt,
  className,
}: S3StatusCellProps) {
  const tS3 = useTranslations('lean.s3');
  const colors = STATUS_COLORS[status];
  const label = tS3(STATUS_LABEL_KEYS[status] as never);

  const cellContent = (
    <button
      type="button"
      onClick={onClick}
      disabled={isUpdating || !onClick}
      className={cn(
        'w-8 h-8 rounded-sm transition-all duration-200',
        colors.bg,
        onClick && colors.hover,
        onClick && 'cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2',
        onClick && colors.ring,
        isUpdating && 'opacity-50 animate-pulse cursor-wait',
        !onClick && 'cursor-default',
        className
      )}
      aria-label={`KW ${week}: ${label}`}
    />
  );

  // Build tooltip content
  const hasTooltipContent = note || completedBy || completedAt;

  if (!hasTooltipContent && !onClick) {
    return cellContent;
  }

  return (
    <TooltipProvider>
      <Tooltip delayDuration={200}>
        <TooltipTrigger asChild>{cellContent}</TooltipTrigger>
        <TooltipContent side="top" className="max-w-xs">
          <div className="space-y-1 text-xs">
            <div className="font-medium">
              KW {week}: {label}
            </div>
            {note && (
              <div className="text-muted-foreground">
                {note}
              </div>
            )}
            {completedBy && completedAt && (
              <div className="text-muted-foreground">
                {tS3('completedByAt', {
                  name: completedBy,
                  date: new Date(completedAt).toLocaleDateString(),
                })}
              </div>
            )}
            {onClick && (
              <div className="text-muted-foreground italic">
                {tS3('clickToEdit')}
              </div>
            )}
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}
