import { Calendar } from 'lucide-react';
import { getWalkthroughRating, getWalkthroughRatingLabel } from '@/business/walkthrough/selectors';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { WALKTHROUGH_FORM_CATEGORIES } from '@/shared/constants/walkthrough';
import type { WalkthroughSummaryWorkflow } from '@/components/walkthrough-summary/types';

interface WalkthroughRecentTableProps {
  readonly summary: WalkthroughSummaryWorkflow;
}

export function WalkthroughRecentTable({ summary }: WalkthroughRecentTableProps) {
  return (
    <div className="bg-slate-800/50 rounded-2xl border border-slate-700/50 p-5">
      <h3 className="text-sm font-semibold text-white mb-4 flex items-center gap-2">
        <Calendar size={16} className="text-amber-400" /> Recent Walk-Throughs
      </h3>
      <Table>
        <TableHeader>
          <TableRow className="border-b border-slate-700/50 hover:bg-transparent">
              <TableHead className="h-auto p-2 text-left text-xs text-slate-500">Date</TableHead>
              <TableHead className="h-auto p-2 text-left text-xs text-slate-500">Teacher</TableHead>
              {WALKTHROUGH_FORM_CATEGORIES.map((category) => (
                <TableHead key={category.key} className="h-auto p-2 text-center text-xs text-slate-500">{category.shortLabel.split(' ')[0]}</TableHead>
              ))}
          </TableRow>
        </TableHeader>
        <TableBody>
            {summary.filteredCheckins.slice(0, 8).map((checkin) => (
              <TableRow key={checkin.id} className="border-b border-slate-800/50 hover:bg-slate-700/20">
                <TableCell className="p-2 text-xs text-slate-400">{checkin.check_in_date}</TableCell>
                <TableCell className="p-2 text-xs text-white font-medium">{checkin.teacher_name}</TableCell>
                {WALKTHROUGH_FORM_CATEGORIES.map((category) => {
                  const value = getWalkthroughRating(checkin, category.key);
                  const pct = value / category.max;
                  const toneClass = pct >= 0.75
                    ? 'bg-emerald-500/15 text-emerald-400'
                    : pct >= 0.5
                      ? 'bg-amber-500/15 text-amber-400'
                      : 'bg-red-500/15 text-red-400';

                  return (
                    <TableCell key={category.key} className="p-2 text-center">
                      <span className={`inline-block px-2 py-0.5 rounded-md text-[10px] font-semibold ${toneClass}`}>
                        {getWalkthroughRatingLabel(value, category.key).split(' ')[0]}
                      </span>
                    </TableCell>
                  );
                })}
              </TableRow>
            ))}
        </TableBody>
      </Table>
    </div>
  );
}
