// @feature: onboarding/OnboardingForm
'use client';
import { useState } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { Input } from '@/components/ui/primitives/Input';
import { Label } from '@/components/ui/primitives/Label';
import { Switch } from '@/components/ui/primitives/Switch';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { CitySelectField, type CityValue } from '@/components/ui/domain/CitySelectField';
import { BirthdayField } from '@/components/ui/domain/BirthdayField';
import { getCsrfToken } from '@/lib/csrf';
import { captureCaught } from '@/lib/observability';

export interface OnboardingFormProps {
  onComplete: () => void;
}

interface FormState {
  displayName: string;
  city: CityValue | null;
  birthMonth: number | null;
  birthDay: number | null;
  pushOptIn: boolean;
}

const INITIAL: FormState = {
  displayName: '',
  city: null,
  birthMonth: null,
  birthDay: null,
  pushOptIn: false,
};

export function OnboardingForm({ onComplete }: OnboardingFormProps) {
  const t = useT('onboarding');
  const qc = useQueryClient();
  const [state, setState] = useState<FormState>(INITIAL);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showHints, setShowHints] = useState(false);

  function buildBody(kind: 'save' | 'skip'): Record<string, unknown> {
    if (kind === 'skip') return {};
    const b: Record<string, unknown> = {};
    if (state.displayName.trim()) b.displayName = state.displayName.trim();
    if (state.city) {
      b.city = state.city.city;
      b.cityCode = state.city.cityCode;
    }
    if (state.birthMonth !== null && state.birthDay !== null) {
      b.birthMonth = state.birthMonth;
      b.birthDay = state.birthDay;
    }
    if (state.pushOptIn) b.pushOptIn = true;
    return b;
  }

  async function submit(kind: 'save' | 'skip'): Promise<void> {
    setError(null);
    if (kind === 'save') {
      const partial = (state.birthMonth !== null) !== (state.birthDay !== null);
      if (partial) {
        setShowHints(true);
        return;
      }
    }
    setSubmitting(true);
    try {
      const res = await fetch('/api/user/onboarding', {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
          'x-csrf-token': getCsrfToken(),
        },
        body: JSON.stringify(buildBody(kind)),
      });
      if (!res.ok) {
        setError(t('save_error'));
        return;
      }
      qc.invalidateQueries({ queryKey: ['user', 'profile'] });
      qc.invalidateQueries({ queryKey: ['greeting'] });
      onComplete();
    } catch (err) {
      captureCaught(err, { scope: 'features.onboarding.form.submit', severity: 'warning' });
      setError(t('save_error'));
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form
      className="flex flex-col gap-6"
      onSubmit={(e) => {
        e.preventDefault();
        void submit('save');
      }}
    >
      {error && <InlineNotice tone="danger" description={error} />}

      <div className="flex flex-col gap-2">
        <Label htmlFor="onboarding-name">{t('name_label')}</Label>
        <Input
          id="onboarding-name"
          value={state.displayName}
          onChange={(e) => setState((s) => ({ ...s, displayName: e.target.value }))}
          placeholder={t('name_placeholder')}
          maxLength={50}
          autoComplete="given-name"
        />
      </div>

      <CitySelectField
        id="onboarding-city"
        value={state.city}
        onChange={(c) => setState((s) => ({ ...s, city: c }))}
      />

      <BirthdayField
        id="onboarding-birthday"
        month={state.birthMonth}
        day={state.birthDay}
        onChange={({ month, day }) => setState((s) => ({ ...s, birthMonth: month, birthDay: day }))}
        showPartialHint={showHints}
      />

      <div className="flex items-start gap-3">
        <Switch
          id="onboarding-push"
          checked={state.pushOptIn}
          onCheckedChange={(v: boolean) => setState((s) => ({ ...s, pushOptIn: v }))}
        />
        <div className="flex-1">
          <Label htmlFor="onboarding-push" className="mb-1 block">
            {t('push_label')}
          </Label>
          <p className="text-sm text-[color:var(--color-text-muted)]">{t('push_helper')}</p>
        </div>
      </div>

      <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row">
        <Button
          type="button"
          variant="ghost"
          onClick={() => void submit('skip')}
          disabled={submitting}
        >
          {t('skip_button')}
        </Button>
        <Button type="submit" variant="primary" loading={submitting} className="flex-1">
          {t('save_button')}
        </Button>
      </div>
    </form>
  );
}