'use client';

import { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/overlays/Dialog';
import { FormField } from '@/components/ui/primitives/FormField';
import { Input } from '@/components/ui/primitives/Input';
import { NumberInput } from '@/components/ui/primitives/NumberInput';
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@/components/ui/primitives/Select';
import { Button } from '@/components/ui/primitives/Button';
import { Switch } from '@/components/ui/primitives/Switch';
import { Label } from '@/components/ui/primitives/Label';
import { languageCreateSchema, KNOWN_REGCONFIGS } from '@/server/schemas/languages';
import type { z } from 'zod';

// Use input type so fields with .default() are treated as required by the form
type LanguageFormValues = z.input<typeof languageCreateSchema>;
import { useT } from '@/lib/i18n/react';
import { getCsrfToken } from '@/lib/csrf';
import { captureCaught } from '@/lib/observability';
import type { Language } from '@/components/ui/admin/LanguageRegistryTable';

// ─── Props ────────────────────────────────────────────────────────────────────

export interface LanguageEditDialogProps {
  /** 'add' opens with empty defaults; 'edit' pre-fills from `initial`. */
  mode: 'add' | 'edit';
  /** Pre-fill values when mode='edit'. */
  initial?: Language;
  /** Called after a successful save or on close/cancel. */
  onClose: () => void;
}

// ─── Component ────────────────────────────────────────────────────────────────

export function LanguageEditDialog({ mode, initial, onClose }: LanguageEditDialogProps) {
  const t = useT('admin_languages');
  const [serverError, setServerError] = useState<string | null>(null);

  const {
    register,
    handleSubmit,
    control,
    formState: { errors, isSubmitting },
  } = useForm<LanguageFormValues>({
    resolver: zodResolver(languageCreateSchema),
    defaultValues: initial ?? {
      code: '',
      nameNative: '',
      nameEnglish: '',
      direction: 'ltr',
      searchConfig: 'simple',
      isActive: true,
      isDefault: false,
      sortOrder: 0,
    },
  });

  async function onSubmit(values: LanguageFormValues) {
    setServerError(null);
    try {
      const url =
        mode === 'edit' && initial
          ? `/api/admin/languages/${initial.code}`
          : '/api/admin/languages';
      const method = mode === 'edit' ? 'PATCH' : 'POST';

      const body: Record<string, unknown> =
        mode === 'edit'
          ? // PATCH only sends updatable fields (code excluded)
            {
              nameNative: values.nameNative,
              nameEnglish: values.nameEnglish,
              direction: values.direction,
              searchConfig: values.searchConfig,
              isActive: values.isActive,
              isDefault: values.isDefault,
              sortOrder: values.sortOrder,
            }
          : values;

      const res = await fetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
          'x-csrf-token': getCsrfToken(),
        },
        body: JSON.stringify(body),
      });

      const json = (await res.json()) as { ok: boolean; error?: string };
      if (!json.ok) {
        setServerError(json.error ?? t('error_fallback'));
        return;
      }
      onClose();
    } catch (err) {
      captureCaught(err, { scope: 'admin-languages.LanguageEditDialog', severity: 'error' });
      setServerError(t('error_fallback'));
    }
  }

  const titleKey = mode === 'add' ? 'dialog_title_add' : 'dialog_title_edit';
  const descriptionKey = mode === 'add' ? 'dialog_description_add' : 'dialog_description_edit';

  return (
    <Dialog
      open
      onOpenChange={(open) => {
        if (!open) onClose();
      }}
    >
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t(titleKey)}</DialogTitle>
          <DialogDescription>{t(descriptionKey)}</DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit(onSubmit)} noValidate>
          <div className="flex flex-col gap-4">
            {/* Code — read-only in edit mode */}
            <FormField
              label={t('col_code')}
              required={mode === 'add'}
              error={errors.code?.message}
              htmlFor="lang-code"
            >
              <Input
                id="lang-code"
                {...register('code')}
                disabled={mode === 'edit'}
                placeholder="he"
                invalid={!!errors.code}
              />
              {mode === 'add' && <p className="text-text-muted text-xs">{t('field_code_hint')}</p>}
            </FormField>

            {/* Native name */}
            <FormField
              label={t('col_name_native')}
              required
              error={errors.nameNative?.message}
              htmlFor="lang-name-native"
            >
              <Input
                id="lang-name-native"
                {...register('nameNative')}
                invalid={!!errors.nameNative}
              />
            </FormField>

            {/* English name */}
            <FormField
              label={t('col_name_english')}
              required
              error={errors.nameEnglish?.message}
              htmlFor="lang-name-english"
            >
              <Input
                id="lang-name-english"
                {...register('nameEnglish')}
                invalid={!!errors.nameEnglish}
              />
            </FormField>

            {/* Direction */}
            <FormField
              label={t('col_direction')}
              required
              error={errors.direction?.message}
              htmlFor="lang-direction"
            >
              <Controller
                control={control}
                name="direction"
                render={({ field }) => (
                  <Select value={field.value} onValueChange={field.onChange}>
                    <SelectTrigger id="lang-direction">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="ltr">{t('dir_ltr')}</SelectItem>
                      <SelectItem value="rtl">{t('dir_rtl')}</SelectItem>
                    </SelectContent>
                  </Select>
                )}
              />
            </FormField>

            {/* Search config */}
            <FormField
              label={t('col_search_config')}
              required
              error={errors.searchConfig?.message}
              htmlFor="lang-search-config"
            >
              <Controller
                control={control}
                name="searchConfig"
                render={({ field }) => (
                  <Select value={field.value} onValueChange={field.onChange}>
                    <SelectTrigger id="lang-search-config">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {KNOWN_REGCONFIGS.map((cfg) => (
                        <SelectItem key={cfg} value={cfg}>
                          {t(`search_config_${cfg}` as 'search_config_simple')}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
              />
            </FormField>

            {/* Sort order */}
            <FormField
              label={t('field_sort_order')}
              error={errors.sortOrder?.message}
              htmlFor="lang-sort-order"
            >
              <Controller
                name="sortOrder"
                control={control}
                render={({ field }) => (
                  <NumberInput
                    id="lang-sort-order"
                    min={0}
                    max={1000}
                    invalid={!!errors.sortOrder}
                    value={field.value ?? 0}
                    onChange={(n) => field.onChange(n)}
                  />
                )}
              />
              <p className="text-text-muted text-xs">{t('field_sort_order_hint')}</p>
            </FormField>
            <div className="flex items-center gap-3">
              <Controller
                control={control}
                name="isActive"
                render={({ field }) => (
                  <Switch
                    id="lang-is-active"
                    checked={field.value}
                    onCheckedChange={field.onChange}
                    aria-label={t('field_is_active')}
                  />
                )}
              />
              <Label htmlFor="lang-is-active">{t('field_is_active')}</Label>
            </div>

            {/* Default toggle */}
            <div className="flex items-center gap-3">
              <Controller
                control={control}
                name="isDefault"
                render={({ field }) => (
                  <Switch
                    id="lang-is-default"
                    checked={field.value}
                    onCheckedChange={field.onChange}
                    aria-label={t('field_is_default')}
                  />
                )}
              />
              <Label htmlFor="lang-is-default">{t('field_is_default')}</Label>
              <p className="text-text-muted text-xs">{t('field_is_default_hint')}</p>
            </div>
            {serverError && (
              <p role="alert" className="text-sm text-red-600">
                {serverError}
              </p>
            )}
          </div>

          <DialogFooter>
            <Button type="submit" variant="primary" disabled={isSubmitting}>
              {isSubmitting ? t('saving') : t('save')}
            </Button>
            <Button type="button" variant="ghost" onClick={onClose}>
              {t('cancel')}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}