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 ZoneCheckInCardProps {
  readonly zones: readonly DashboardZoneOption[];
  readonly activeZone: ZoneColor | null;
  readonly isSaving: boolean;
  readonly errorMessage: string | null;
  /** Highlight that the eligible user has not logged a zone today. */
  readonly needsCheckIn?: boolean;
  readonly onCheckIn: (zone: ZoneColor) => Promise<void>;
  readonly onReset: () => Promise<void>;
}

/**
 * The daily Zone check-in card — shared by the dashboard and the
 * Zones of Regulation page. Presentational; persistence is owned by
 * `useTodayZoneCheckIn`.
 */
export function ZoneCheckInCard({
  zones,
  activeZone,
  isSaving,
  errorMessage,
  needsCheckIn = false,
  onCheckIn,
  onReset,
}: ZoneCheckInCardProps) {
  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 flex items-center gap-2">
            Today's Emotional Zone Check-In
            {needsCheckIn && (
              <span className="px-2 py-0.5 rounded-full bg-red-500/15 border border-red-500/40 text-red-400 text-[10px] font-semibold uppercase tracking-wide">
                Not checked in
              </span>
            )}
          </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-2 sm: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>
  );
}
