// Field app — grower declares a delivery for collection
const { Button, Card, Input, Select, Textarea, Fieldset, Radio, Toast, ToastRegion, Icon, Badge } = window.FF;

const DECLARE_EMPTY = { variety: 'Black', kg: '', sacks: '', point: 'Chhouk commune store', note: '' };
const DECLARE_LABEL = { kg: 'Weight', sacks: 'Sacks' };

function validateDeclare(v) {
  const e = {};
  if (!v.kg.trim()) e.kg = 'Enter the weight you will bring.';
  else if (!/^\d+$/.test(v.kg.trim())) e.kg = 'Whole kilograms, digits only.';
  else if (Number(v.kg) > 600) e.kg = 'Over 600 kg — call the collector first.';
  if (!v.sacks.trim()) e.sacks = 'Enter how many sacks.';
  else if (!/^\d+$/.test(v.sacks.trim())) e.sacks = 'Digits only.';
  return e;
}

function DeclareScreen() {
  const [v, setV] = React.useState(DECLARE_EMPTY);
  const [errors, setErrors] = React.useState({});
  const [submitting, setSubmitting] = React.useState(false);
  const [sent, setSent] = React.useState(null);

  const set = (k) => (val) => {
    setV((s) => ({ ...s, [k]: val }));
    setErrors((s) => (s[k] ? { ...s, [k]: undefined } : s));
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if (submitting) return;
    const found = validateDeclare(v);
    if (Object.keys(found).length) { setErrors(found); return; }
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setSent({ ref: 'DL-2026-0731', kg: v.kg });
      setV(DECLARE_EMPTY);
    }, 1200);
  };

  const riel = /^\d+$/.test(v.kg.trim()) ? Number(v.kg) * 34000 : null;

  return (
    <div style={{ position: 'relative', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <header className="ff-on-ink" style={{ background: 'var(--ff-ink)', padding: '18px 20px 20px' }}>
        <span style={{ font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(247,242,232,0.5)' }}>Thursday 06 August · 07:00</span>
        <h1 style={{ margin: '8px 0 0', font: 'var(--type-title-1)', fontSize: 24, color: 'var(--ff-paper)' }}>Declare your delivery</h1>
      </header>

      <form noValidate onSubmit={onSubmit} style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Card padding="md">
          <Fieldset legend="Variety" layout="stack">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {['Black', 'Red', 'White'].map((t) => {
                const on = v.variety === t;
                return (
                  <label
                    key={t}
                    style={{
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      minHeight: 'var(--tap-min)', cursor: 'pointer',
                      borderRadius: 'var(--radius-sm)',
                      border: '1px solid ' + (on ? 'var(--ff-ink)' : 'var(--border-strong)'),
                      background: on ? 'var(--ff-ink)' : 'var(--surface-card)',
                      color: on ? 'var(--ff-paper)' : 'var(--text-body)',
                      font: 'var(--type-body-sm)', fontSize: 15, fontWeight: on ? 600 : 400,
                      transition: 'var(--transition-control)',
                    }}
                  >
                    <input
                      type="radio" name="variety" value={t} checked={on} disabled={submitting}
                      onChange={() => set('variety')(t)}
                      style={{ position: 'absolute', opacity: 0, width: 1, height: 1 }}
                    />
                    {t}
                  </label>
                );
              })}
            </div>
          </Fieldset>

          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 12, marginTop: 16 }}>
            <Input
              label="Weight" suffix="kg" inputMode="numeric" required error={errors.kg} value={v.kg} disabled={submitting}
              hint={errors.kg ? undefined : 'Weighed at the store.'}
              onChange={(e) => set('kg')(e.target.value)}
            />
            <Input
              label="Sacks" inputMode="numeric" required error={errors.sacks} value={v.sacks} disabled={submitting}
              onChange={(e) => set('sacks')(e.target.value)}
            />
          </div>

          {riel ? (
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border-hairline)' }}>
              <span style={{ font: 'var(--type-body-sm)', fontSize: 13, color: 'var(--text-muted)' }}>At this week's price</span>
              <span style={{ marginLeft: 'auto', font: 'var(--type-mono)', fontSize: 18, color: 'var(--text-strong)', fontVariantNumeric: 'tabular-nums' }}>
                {riel.toLocaleString('en-GB').replace(/,/g, ' ')} ៛
              </span>
            </div>
          ) : null}
        </Card>

        <Card padding="md">
          <Select
            label="Collection point" value={v.point} disabled={submitting}
            options={['Chhouk commune store', 'Dang Tong roadside', 'Kampong Trach store']}
            onChange={(e) => set('point')(e.target.value)}
          />
          <div style={{ marginTop: 14 }}>
            <Textarea
              label="Note for the collector" rows={2} maxLength={140} value={v.note} disabled={submitting}
              hint="Only if something changed."
              onChange={(e) => set('note')(e.target.value)}
            />
          </div>
        </Card>

        <Button type="submit" full size="lg" disabled={submitting}>
          {submitting ? 'Sending…' : 'Send declaration'}
        </Button>
        <span aria-live="polite" style={{ font: 'var(--type-meta)', color: 'var(--text-meta)', textAlign: 'center' }}>
          {submitting ? 'Sending to the commune collector…' : 'The collector sees this within a minute.'}
        </span>
      </form>

      <ToastRegion contained>
        <Toast
          open={Boolean(sent)}
          message="Declaration sent"
          detail={sent ? sent.ref + ' · ' + sent.kg + ' kg for Thursday 07:00.' : undefined}
          onClose={() => setSent(null)}
        />
      </ToastRegion>
    </div>
  );
}
window.DeclareScreen = DeclareScreen;