import { History } from 'lucide-react';

import type {
  WalkthroughHistoryRow,
  WalkthroughHistoryTone,
} from '@/business/walkthrough/types';
import { Button } from '@/components/ui/button';
import { StatePanel } from '@/components/ui/state-panel';
import { cn } from '@/lib/utils';

const overallToneClasses: Record<WalkthroughHistoryTone, string> = {
  strong: 'bg-emerald-500/15 text-emerald-400 border border-emerald-500/30',
  developing: 'bg-amber-500/15 text-amber-400 border border-amber-500/30',
  priority: 'bg-red-500/15 text-red-400 border border-red-500/30',
};

const categoryToneClasses: Record<WalkthroughHistoryTone, string> = {
  strong: 'bg-emerald-500/10 text-emerald-400',
  developing: 'bg-amber-500/10 text-amber-400',
  priority: 'bg-red-500/10 text-red-400',
};

interface WalkthroughHistoryViewProps {
  readonly loading: boolean;
  readonly rows: readonly WalkthroughHistoryRow[];
  readonly onStartWalkthrough: () => void;
}

export function WalkthroughHistoryView({
  loading,
  rows,
  onStartWalkthrough,
}: WalkthroughHistoryViewProps) {
  if (loading) {
    return (
      <StatePanel
        loading
        tone="indigo"
        alignment="center"
        size="lg"
        title="Loading walk-through history..."
      />
    );
  }

  if (rows.length === 0) {
    return (
      <StatePanel
        icon={History}
        tone="slate"
        alignment="center"
        size="lg"
        title="No Walk-Throughs Yet"
      >
        <div className="flex flex-col items-center gap-4">
          <p>Start your first walk-through to build your history.</p>
          <Button
            type="button"
            onClick={onStartWalkthrough}
            className="px-4 py-2 bg-indigo-500/20 text-indigo-400 rounded-xl text-sm font-medium hover:bg-indigo-500/30 transition-colors border border-indigo-500/30"
          >
            Start Walk-Through
          </Button>
        </div>
      </StatePanel>
    );
  }

  return (
    <div className="space-y-3">
      {rows.map((row) => (
        <div
          key={row.id}
          className="bg-slate-800/40 rounded-xl border border-slate-700/40 p-4 hover:border-slate-600/50 transition-all"
        >
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-3">
            <div>
              <p className="text-sm font-semibold text-white">{row.teacherName}</p>
              <p className="text-xs text-slate-500">{row.classroom} - {row.date} at {row.timeLabel}</p>
            </div>
            <div className={cn('inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-semibold', overallToneClasses[row.tone])}>
              {row.overallPct}% Overall
            </div>
          </div>
          <div className="flex flex-wrap gap-1.5">
            {row.categories.map((category) => (
              <span
                key={category.key}
                className={cn('px-2 py-0.5 rounded-md text-[10px] font-medium', categoryToneClasses[category.tone])}
              >
                {category.label}: {category.value}/{category.max}
              </span>
            ))}
          </div>
          {row.notes && (
            <p className="mt-2 text-xs text-slate-500 italic border-t border-slate-700/30 pt-2">
              {row.notes}
            </p>
          )}
        </div>
      ))}
    </div>
  );
}
