import { AlertCircle, Clock } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useTranslation } from 'react-i18next';

interface BriefChatHeaderProps {
  title: string;
  projectName?: string | null;
  priority: string;
  dueDate?: number | null;
}

function relativeDate(ts: number, t: (key: string, opts?: Record<string, unknown>) => string): string {
  const diff = ts - Date.now();
  const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
  if (days < 0) return t('brief.overdue', { days: Math.abs(days) });
  if (days === 0) return t('brief.dueToday');
  if (days === 1) return t('brief.dueTomorrow');
  return t('brief.dueInDays', { days });
}

const PRIORITY_STYLES: Record<string, string> = {
  high: 'bg-destructive/15 text-destructive',
  medium: 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-400',
  low: 'bg-muted text-muted-foreground',
};

export function BriefChatHeader({ title, projectName, priority, dueDate }: BriefChatHeaderProps) {
  const { t } = useTranslation();
  return (
    <div className="px-5 pt-5 pb-4 space-y-2">
      <h2 className="font-semibold text-base text-foreground leading-snug line-clamp-2">{title}</h2>
      <div className="flex flex-wrap items-center gap-2">
        {projectName && (
          <span className="text-xs px-2 py-0.5 rounded-md bg-muted text-muted-foreground">
            {projectName}
          </span>
        )}
        <span
          className={cn(
            'text-xs px-2 py-0.5 rounded-md capitalize',
            PRIORITY_STYLES[priority] ?? PRIORITY_STYLES.medium,
          )}
        >
          {priority}
        </span>
        {dueDate != null && (
          <span className={cn(
            'flex items-center gap-1 text-xs',
            dueDate < Date.now() ? 'text-destructive' : 'text-muted-foreground',
          )}>
            {dueDate < Date.now() ? <AlertCircle size={11} /> : <Clock size={11} />}
            {relativeDate(dueDate, t)}
          </span>
        )}
      </div>
    </div>
  );
}
