'use client';
import { useState } from 'react';
import type { Membership, Shift } from '@alqove/api-client';
import { useSelectedMembership } from '@/lib/stores/store-context';
import { useScheduleWeek, useScheduleSettings } from '@/lib/queries/use-scheduling';
import { useStoreMembers, useStorePositions } from '@/lib/queries/use-team';
import { Button } from '@/components/ui/button';
import { addDays, currentWeekLabelDate } from './schedule-time';
import { WeekGrid } from './week-grid';
import { ShiftEditor } from './shift-editor';
import { WeekActions } from './week-actions';

export function SellerScheduleClient() {
  const membership = useSelectedMembership();
  if (!membership) return <p>Select a store to see its schedule.</p>;
  if (!membership.capabilities.includes('schedule.view')) return <p>You do not have access to this schedule.</p>;
  return <ScheduleWorkspace key={membership.id} membership={membership} />;
}
export function ScheduleWorkspace({ membership }: { membership: Membership }) {
  const settings = useScheduleSettings(membership.store_id);
  const [selectedDate, setDate] = useState('');
  const date = selectedDate || (settings.data ? currentWeekLabelDate(settings.data.data) : '');
  const query = useScheduleWeek(membership.store_id, date);
  const members = useStoreMembers(membership.capabilities.includes('team.view') ? membership.store_id : null);
  const week = query.data?.data;
  const canManage = membership.capabilities.includes('schedule.manage');
  const positions = useStorePositions(canManage ? membership.store_id : null);
  const [editing, setEditing] = useState<Shift | null | undefined>(undefined);
  return <main className="space-y-5 p-4 md:p-6">
    <h1 className="text-2xl font-semibold">Schedule</h1>
    <div className="flex flex-wrap items-end gap-3">
      <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 the schedule. Reload to try again.</p>}
    {week && <>{canManage && <Button disabled={members.isLoading || positions.isLoading || members.isError || positions.isError} onClick={() => setEditing(null)}>Add shift</Button>}
      {(members.isError || positions.isError) && <p role="alert">Could not load employees or positions. Reload the page before assigning shifts.</p>}
      <p className="text-sm">All dates and times: <strong>{week.timezone}</strong></p>
      <WeekActions key={week.week_start} membership={membership} week={week} onSelectWeek={setDate} />
      <p className="text-sm">{week.shifts.filter(s => !s.published_at).length} draft shifts · {week.shifts.filter(s => s.published_at).length} published shifts</p>
      <WeekGrid week={week} members={members.data?.data} onEdit={canManage ? setEditing : undefined} />
      {editing !== undefined && canManage && <ShiftEditor storeId={membership.store_id} timezone={week.timezone} date={week.week_start} shift={editing} members={members.data?.data ?? []} positions={positions.data?.data ?? []} onClose={() => setEditing(undefined)} onReload={() => query.refetch()} />}
    </>}
  </main>;
}