import type { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';

interface EmptyStateProps {
  title: string;
  description?: string;
  hint?: string;
  compact?: boolean;
  action?: ReactNode;
  onCreateTask?: () => void;
}

export function EmptyState({ title, description, hint, compact, action, onCreateTask }: EmptyStateProps) {
  const { t } = useTranslation('layout');
  if (compact) {
    return (
      <div className="flex flex-col items-center justify-center text-center px-4 py-8 gap-2">
        <div className="font-extrabold text-[13px] text-slate-900">{title}</div>
        {hint && <p className="text-xs text-slate-500 leading-relaxed">{hint}</p>}
        {action && <div className="mt-1">{action}</div>}
      </div>
    );
  }

  if (hint && !description && !onCreateTask) {
    return (
      <div className="flex flex-col items-center justify-center text-center h-full p-8 gap-2 max-w-sm mx-auto">
        <div className="font-extrabold text-sm text-slate-900">{title}</div>
        <p className="text-[13px] text-slate-500 leading-relaxed">{hint}</p>
        {action && <div className="mt-2">{action}</div>}
      </div>
    );
  }

  return (
    <div className="flex flex-col justify-center h-full p-8 max-w-sm mx-auto">
      <div className="font-extrabold text-sm text-slate-900 mb-4">{title}</div>
      {description && (
        <p className="text-[13px] text-slate-500 mb-5 leading-relaxed">{description}</p>
      )}
      <ol className="list-none p-0 m-0 flex flex-col gap-3 mb-6">
        {[
          t('emptyState.step1'),
          t('emptyState.step2'),
          t('emptyState.step3'),
        ].map((step, i) => (
          <li key={i} className="flex gap-3 items-start text-xs text-slate-500">
            <span className="flex-shrink-0 w-5 h-5 rounded-full bg-blue-100 dark:bg-blue-500/15 text-blue-700 dark:text-blue-300 text-[10px] font-bold flex items-center justify-center mt-0.5">
              {i + 1}
            </span>
            {step}
          </li>
        ))}
      </ol>
      {onCreateTask && (
        <button
          type="button"
          onClick={onCreateTask}
          className="self-start px-4 py-2 bg-accent text-accent-fg rounded-xl text-[13px] font-bold hover:bg-accent-deep focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring"
        >
          {t('emptyState.createButton')}
        </button>
      )}
    </div>
  );
}
