'use client';
import { useState } from 'react';
import type { ScheduleSettings } from '@alqove/api-client';
import { useSelectedMembership } from '@/lib/stores/store-context';
import { useScheduleSettings, useScheduleMutation } from '@/lib/queries/use-scheduling';
import { Button } from '@/components/ui/button';
import { scheduleError } from '../../schedule/schedule-feedback';

export function ScheduleSettingsClient() {
  const membership = useSelectedMembership();
  if (!membership) return <p>Select a store to manage scheduling settings.</p>;
  if (!membership.capabilities.includes('settings.schedule')) return <p>You do not have permission to change scheduling settings.</p>;
  return <SettingsLoader key={membership.id} storeId={membership.store_id} />;
}
function SettingsLoader({ storeId }: { storeId: string }) {
  const query = useScheduleSettings(storeId);
  return <main className="max-w-3xl space-y-5 p-4 md:p-6">
    <a href="/seller/schedule" className="text-sm underline">Back to schedule</a>
    <h1 className="text-2xl font-semibold">Schedule settings</h1>
    {query.isPending && <p role="status">Loading settings…</p>}
    {query.isError && <div role="alert">Could not load settings. <Button variant="outline" onClick={() => query.refetch()}>Retry</Button></div>}
    {query.data && <SettingsForm storeId={storeId} initial={query.data.data} />}
  </main>;
}
function SettingsForm({ storeId, initial }: { storeId: string; initial: ScheduleSettings }) {
  const [value, setValue] = useState(initial);
  const [error, setError] = useState('');
  const [saved, setSaved] = useState(false);
  const mutation = useScheduleMutation(storeId);
  const field = <K extends keyof ScheduleSettings>(key: K, next: ScheduleSettings[K]) => { setValue(v => ({ ...v, [key]: next })); setSaved(false); };
  const inputClass = 'min-w-0 rounded border bg-transparent p-2';
  const minuteFields = [
    ['payroll_rounding_increment_minutes', 'Rounding increment (minutes)', 1, 60],
    ['clock_in_early_minutes', 'Clock in early (minutes)', 0, 1440],
    ['clock_in_late_minutes', 'Clock in late (minutes)', 0, 1440],
    ['clock_out_late_minutes', 'Clock out late (minutes)', 0, 1440],
  ] as const;
  return <form className="space-y-5" onSubmit={async e => {
    e.preventDefault(); setError(''); setSaved(false);
    try {
      try { new Intl.DateTimeFormat('en-US', { timeZone: value.timezone }); } catch { throw new Error('Enter a valid IANA timezone, for example America/Los_Angeles.'); }
      await mutation.mutateAsync({ action: 'settings', input: value });
      setSaved(true);
    } catch (e) { setError(scheduleError(e)); }
  }}>
    <p className="text-sm">Timezone and work-week changes may be locked after scheduling or payroll history exists. The server protects historical calculations.</p>
    <fieldset disabled={mutation.isPending} className="grid gap-4 sm:grid-cols-2">
      <legend className="mb-3 font-semibold">Store time and work week</legend>
      <label className="grid gap-1 sm:col-span-2">Store timezone (IANA)<input className={inputClass} required value={value.timezone} onChange={e => field('timezone', e.target.value)} placeholder="America/Los_Angeles" /></label>
      <label className="grid gap-1">Work week starts on<select className={inputClass} value={value.work_week_start_day} onChange={e => field('work_week_start_day', e.target.value as ScheduleSettings['work_week_start_day'])}>
        {(['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const).map((day, i) => <option value={day} key={day}>{['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][i]}</option>)}
      </select></label>
      <label className="grid gap-1">Work week cutoff (store time)<input className={inputClass} type="time" required value={value.work_week_start_time} onChange={e => field('work_week_start_time', e.target.value)} /></label>
      <label className="grid gap-1">Payroll rounding<select className={inputClass} value={value.payroll_rounding_mode} onChange={e => field('payroll_rounding_mode', e.target.value as ScheduleSettings['payroll_rounding_mode'])}>
        <option value="none">None</option><option value="nearest">Nearest increment</option><option value="up">Up</option><option value="down">Down</option>
      </select></label>
      {minuteFields.map(([key, label, min, max]) => <label className="grid gap-1" key={key}>{label}<input className={inputClass} type="number" min={min} max={max} step={1} required value={Number.isNaN(value[key]) ? '' : value[key]} onChange={e => field(key, e.target.valueAsNumber)} /></label>)}
    </fieldset>
    <p className="text-sm">Clock windows are strict: zero permits no early or late allowance. All window values are minutes.</p>
    {error && <p role="alert" className="text-red-700">{error}</p>}
    {saved && <p role="status">Settings saved.</p>}
    <Button type="submit" disabled={mutation.isPending}>{mutation.isPending ? 'Saving…' : 'Save settings'}</Button>
  </form>;
}