'use client';

import { useActionState, useState } from 'react';
import { updateNotificationPrefsAction } from '@/lib/auth/account-actions';
import { idle } from '@/lib/auth/state';
import { Checkbox, Field, FormMessage, Select, SubmitButton } from '@/components/account/form';

const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

export function PrefsForm({ prefs }: { prefs: { emailAlerts: boolean; newLoginEmails: boolean; digest: string; digestWeekday: number; quietStart: number | null; quietEnd: number | null; marketMoves: boolean } }) {
  const [state, action] = useActionState(updateNotificationPrefsAction, idle);
  const [quiet, setQuiet] = useState(prefs.quietStart !== null);
  return (
    <form action={action} className="space-y-5" noValidate>
      <FormMessage state={state} />
      <div className="space-y-3">
        <Checkbox name="emailAlerts" label="E-mail me when an alert triggers" description="Price thresholds, new listings, auctions ending, record sales, population updates." defaultChecked={prefs.emailAlerts} />
        <Checkbox name="marketMoves" label="Market moves in my categories" description="Notify when an index I track moves more than 3% in a day." defaultChecked={prefs.marketMoves} />
        <Checkbox name="newLoginEmails" label="New sign-in notifications" description="An e-mail whenever your account is accessed from a new device." defaultChecked={prefs.newLoginEmails} />
      </div>
      <div className="grid gap-4 sm:grid-cols-2">
        <Field label="Digest" name="digest" hint="A summary of your collection, watchlist movers and deals.">
          <Select name="digest" defaultValue={prefs.digest}>
            <option value="weekly">Weekly</option>
            <option value="daily">Daily</option>
            <option value="off">Off</option>
          </Select>
        </Field>
        <Field label="Weekly digest day" name="digestWeekday">
          <Select name="digestWeekday" defaultValue={String(prefs.digestWeekday)}>
            {DAYS.map((d, i) => (
              <option key={d} value={i}>
                {d}
              </option>
            ))}
          </Select>
        </Field>
      </div>
      <div className="space-y-3">
        <label className="flex items-start gap-2.5 text-sm">
          <input type="checkbox" name="quiet" checked={quiet} onChange={(e) => setQuiet(e.target.checked)} className="mt-0.5 h-4 w-4" />
          <span>
            <span className="block">Quiet hours (UTC)</span>
            <span className="block text-xs text-muted">Hold e-mails during these hours; they are delivered afterwards.</span>
          </span>
        </label>
        {quiet ? (
          <div className="grid max-w-xs grid-cols-2 gap-3">
            <Field label="From" name="quietStart">
              <Select name="quietStart" defaultValue={String(prefs.quietStart ?? 22)}>
                {Array.from({ length: 24 }, (_, h) => (
                  <option key={h} value={h}>{`${String(h).padStart(2, '0')}:00`}</option>
                ))}
              </Select>
            </Field>
            <Field label="To" name="quietEnd">
              <Select name="quietEnd" defaultValue={String(prefs.quietEnd ?? 7)}>
                {Array.from({ length: 24 }, (_, h) => (
                  <option key={h} value={h}>{`${String(h).padStart(2, '0')}:00`}</option>
                ))}
              </Select>
            </Field>
          </div>
        ) : null}
      </div>
      <SubmitButton pendingText="Saving…">Save preferences</SubmitButton>
    </form>
  );
}