'use client';
import { useState } from 'react';
import type { Membership } from '@alqove/api-client';
import { useSelectedMembership } from '@/lib/stores/store-context';
import { useScheduleWeek, useScheduleSettings } from '@/lib/queries/use-scheduling';
import { Button } from '@/components/ui/button';
import { addDays, instantToLocal, currentWeekLabelDate } from '@/app/(seller)/seller/schedule/schedule-time';
import { ShiftSummary, WeekGrid } from '@/app/(seller)/seller/schedule/week-grid';

export function StaffScheduleClient() {
  const membership = useSelectedMembership();
  if (!membership) return <p>Select a store to see your schedule.</p>;
  return <StaffSchedule key={membership.id} membership={membership} />;
}
function StaffSchedule({ membership }: { membership: Membership }) {
  const [own, setOwn] = useState(true);
  const settings = useScheduleSettings(membership.store_id);
  const [selectedDate, setDate] = useState('');
  const date = selectedDate || (settings.data ? currentWeekLabelDate(settings.data.data) : '');
  const query = useScheduleWeek(own || membership.capabilities.includes('schedule.view') ? membership.store_id : null, date, own);
  const data = query.data?.data;
  // Defense in depth for someone using the staff surface with draft capability.
  // Ordinary staff are filtered by the server. No client member-id is supplied.
  const week = data ? { ...data, shifts: data.shifts.filter(s => s.published_at) } : undefined;
  return <main className="min-w-0 space-y-5 p-4 md:p-6">
    <h1 className="text-2xl font-semibold">{own ? 'My Schedule' : 'Team Schedule'}</h1>
    <nav aria-label="Schedule views" className="flex gap-2">
      <Button variant={own ? 'default' : 'outline'} aria-pressed={own} onClick={() => setOwn(true)}>My Schedule</Button>
      {membership.capabilities.includes('schedule.view') && <Button variant={own ? 'outline' : 'default'} aria-pressed={!own} onClick={() => setOwn(false)}>Team Schedule</Button>}
    </nav>
    <div className="flex flex-wrap items-end gap-2">
      <Button variant="outline" disabled={!week} onClick={() => setDate(addDays(week!.week_start, -7))}>Previous week</Button>
      <label className="grid gap-1 text-sm">Week containing<input type="date" className="rounded border p-2" value={week?.week_start ?? date} onChange={e => { if (e.target.value) setDate(e.target.value); }} /></label>
      <Button variant="outline" disabled={!week} onClick={() => setDate(addDays(week!.week_start, 7))}>Next week</Button>
      <Button variant="outline" onClick={() => settings.isError ? settings.refetch() : query.refetch()}>Reload week</Button>
    </div>
    {query.isPending && !settings.isError && <p role="status">Loading schedule…</p>}
    {(query.isError || settings.isError) && <p role="alert">Could not load your schedule. Reload to try again.</p>}
    {week && <><p className="text-sm">Published shifts only. All times: <strong>{week.timezone}</strong></p>
      {own ? <section aria-label="My published shifts" className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {!week.shifts.length && <p>No published shifts this week.</p>}
        {week.shifts.map(shift => <article className="space-y-2 rounded-lg border p-4" key={shift.id}>
          <h2 className="font-semibold">{instantToLocal(shift.starts_at, week.timezone).slice(0, 10)}</h2>
          <ShiftSummary shift={shift} timezone={week.timezone} />
        </article>)}
      </section> : <WeekGrid week={week} />}
    </>}
  </main>;
}