import { useState } from 'react';
import { parseISO } from 'date-fns';
import { CalendarDays } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import { Input } from '@/components/ui/input';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { formatWeekOf, toWeekStartIso } from '@/shared/business/week';

interface FrameWeekPickerProps {
  /** Sunday-start ISO date. */
  readonly weekStart: string;
  readonly weekLabel: string;
  readonly onWeekStartChange: (weekStartIso: string) => void;
  readonly onLabelChange: (label: string) => void;
}

/**
 * Week selector for a F.R.A.M.E. entry: a calendar where picking any day snaps
 * to that week's start (Sunday, American style), plus an optional free-text
 * label. Used by both the create and edit forms.
 */
export function FrameWeekPicker({
  weekStart,
  weekLabel,
  onWeekStartChange,
  onLabelChange,
}: FrameWeekPickerProps) {
  const [open, setOpen] = useState(false);
  const selected = weekStart ? parseISO(weekStart) : undefined;

  return (
    <div className="space-y-3">
      <div>
        <label className="text-sm font-medium text-slate-300">Week Of</label>
        <Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <Button
              type="button"
              variant="ghost"
              className="w-full mt-1 px-4 py-2.5 h-auto justify-start gap-2 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white hover:bg-slate-700/70"
            >
              <CalendarDays size={16} className="text-violet-400" />
              {weekStart ? `Week of ${formatWeekOf(weekStart)}` : 'Select a week'}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0" align="start">
            <Calendar
              mode="single"
              selected={selected}
              defaultMonth={selected}
              onSelect={(day) => {
                if (day) {
                  onWeekStartChange(toWeekStartIso(day));
                  setOpen(false);
                }
              }}
              // Shade the whole selected week (Sunday–Saturday) with a clear,
              // high-contrast band; the picked day stays a solid violet pill.
              modifiers={{
                selectedWeek: (day) => Boolean(weekStart) && toWeekStartIso(day) === weekStart,
              }}
              modifiersClassNames={{
                selectedWeek: 'bg-violet-500/30 text-white rounded-none',
              }}
              classNames={{
                selected:
                  'bg-violet-600 text-white font-semibold hover:bg-violet-600 hover:text-white focus:bg-violet-600 focus:text-white rounded-md',
              }}
            />
          </PopoverContent>
        </Popover>
      </div>

      <div>
        <label className="text-sm font-medium text-slate-300">Week label (optional)</label>
        <Input
          type="text"
          value={weekLabel}
          onChange={(event) => onLabelChange(event.target.value)}
          placeholder="e.g. Spring Break week"
          className="w-full mt-1 px-4 py-2.5 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white placeholder-slate-500 focus:ring-2 focus:ring-violet-500 outline-none"
        />
      </div>
    </div>
  );
}
