import { Button } from '@/components/ui/button';
import type { DashboardZoneOption } from '@/shared/constants/dashboard';
import type { ZoneColor } from '@/shared/types/app';
import { cn } from '@/lib/utils';

interface DashboardZoneCheckInProps {
  readonly zones: readonly DashboardZoneOption[];
  readonly activeZone: ZoneColor | null;
  readonly isSaving: boolean;
  readonly errorMessage: string | null;
  readonly onCheckIn: (zone: ZoneColor) => Promise<void>;
  readonly onReset: () => Promise<void>;
}

export function DashboardZoneCheckIn({
  zones,
  activeZone,
  isSaving,
  errorMessage,
  onCheckIn,
  onReset,
}: DashboardZoneCheckInProps) {
  return (
    <section className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
      <div className="flex items-center justify-between mb-3">
        <div>
          <h3 className="font-semibold text-white">Today's Zone Check-In</h3>
          <p className="text-xs text-slate-400">How are you feeling right now? Saved to your profile.</p>
        </div>
        {activeZone && (
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={onReset}
            loading={isSaving}
            className="h-auto px-2 py-1 text-xs text-violet-400 hover:text-violet-300"
          >
            Reset
          </Button>
        )}
      </div>
      <div className="grid grid-cols-4 gap-3">
        {zones.map((zone) => (
          <Button
            key={zone.color}
            type="button"
            variant="ghost"
            onClick={() => onCheckIn(zone.color)}
            disabled={isSaving}
            className={cn(
              'p-3 rounded-xl border-2 transition-all duration-200 h-auto flex-col gap-0 whitespace-normal',
              zone.bgClass,
              activeZone === zone.color
                ? `${zone.borderClass} ring-2 ${zone.ringClass} scale-105`
                : 'border-transparent',
            )}
          >
            <span className={cn('font-bold text-sm', zone.textClass)}>{zone.label}</span>
            <span className="text-[10px] text-slate-500">{zone.description}</span>
          </Button>
        ))}
      </div>
      {errorMessage && <p className="text-xs text-red-400 mt-3">{errorMessage}</p>}
    </section>
  );
}
