'use client';

import { formatPrice } from '@alqove/shared';
import { useSelectedStoreId } from '@/lib/stores/store-context';
import { useTimesheets, timekeepingError } from '@/hooks/use-timekeeping';
export function HoursClient() {
  const store = useSelectedStoreId();
  return store ? <StoreHours key={store} store={store} /> : <p>Select a store to view your hours.</p>;
}
function StoreHours({ store }: { store: string }) {
  const query = useTimesheets(store, '', true);
  return <section className="mx-auto max-w-3xl space-y-5 p-4"><h1 className="text-2xl font-semibold">My Hours</h1>
    <p>Your latest 52 timesheets. Week labels follow your store’s work-week settings.</p>
    {query.isPending && <p role="status">Loading hours…</p>}
    {query.error && <p role="alert">{timekeepingError(query.error)}</p>}
    {query.data?.data.length === 0 && <p>No timesheets yet.</p>}
    {query.data?.data.map(t => <article className="space-y-2 rounded-xl border p-4" key={t.id}>
      <h2 className="font-semibold">Week of {t.week_start_date}</h2><p>{t.status}</p>
      <dl className="grid grid-cols-2 gap-2"><dt>Scheduled</dt><dd>{t.scheduled_minutes} min</dd><dt>Regular</dt><dd>{t.regular_minutes} min</dd><dt>Overtime</dt><dd>{t.overtime_minutes} min</dd><dt>Double time</dt><dd>{t.doubletime_minutes} min</dd><dt>Unpaid breaks</dt><dd>{t.unpaid_break_minutes} min</dd><dt>Calculated pay</dt><dd>{t.total_pay_cents == null ? 'Unavailable — pay rate not configured' : formatPrice(t.total_pay_cents)}</dd></dl>
    </article>)}
    <button className="rounded border p-3" onClick={() => query.refetch()} disabled={query.isFetching}>Refresh hours</button>
  </section>;
}