'use client'

import { useState } from 'react'
import {
  CheckboxField,
  FieldGroup,
  FieldHint,
  FieldLabel,
  FormTooltip,
  LabelWithTooltip,
  PrimaryButton,
  RangeField,
  SelectField,
  TextareaField,
  TextField,
} from '@/app/FormFields'
import { useI18n } from '@/lib/i18n/client'

interface ConfigFormProps {
  initial: {
    submissionPromptText: string
    additionalInfoPromptText: string
    submissionMaxChars: number
    aiProvider: string
    aiModel: string
    aiTemperature: number
    minInfoScoreThreshold: number
    maxClarificationCycles: number
    aiJobTimeoutSeconds: number
    dataProcessingConsent: boolean
  }
}

const AI_MODELS = [
  { value: 'claude-haiku-4-5-20251001', label: 'Claude Haiku 4.5 (fast, low cost)' },
  { value: 'claude-sonnet-4-6', label: 'Claude Sonnet 4.6 (balanced)' },
  { value: 'claude-opus-4-7', label: 'Claude Opus 4.7 (most capable)' },
]

export default function ConfigForm({ initial }: ConfigFormProps) {
  const { t } = useI18n()
  const [values, setValues] = useState(initial)
  const [saving, setSaving] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState<string | null>(null)

  function set<K extends keyof typeof values>(key: K, value: typeof values[K]) {
    setValues((v) => ({ ...v, [key]: value }))
    setSuccess(false)
    setError(null)
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSaving(true)
    setSuccess(false)
    setError(null)
    try {
      const res = await fetch('/api/admin/config', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(values),
      })
      const data = await res.json().catch(() => ({}))
      if (!res.ok) {
        setError(data.error ?? t('adminConfig.saveError'))
      } else {
        setSuccess(true)
      }
    } catch {
      setError(t('adminConfig.networkError'))
    } finally {
      setSaving(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-8">

      <section className="space-y-4">
        <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{t('adminConfig.submissionUi')}</h2>
        <FieldGroup>
          <FieldLabel>{t('adminConfig.submissionPromptText')}</FieldLabel>
          <TextareaField
            rows={3}
            value={values.submissionPromptText}
            onChange={(e) => set('submissionPromptText', e.target.value)}
          />
        </FieldGroup>
        <FieldGroup>
          <FieldLabel>{t('adminConfig.additionalInfoPromptText')}</FieldLabel>
          <TextareaField
            rows={3}
            value={values.additionalInfoPromptText}
            onChange={(e) => set('additionalInfoPromptText', e.target.value)}
          />
        </FieldGroup>
        <FieldGroup>
          <FieldLabel>{t('adminConfig.maxSubmissionChars')}</FieldLabel>
          <FieldHint>{t('adminConfig.maxCharsHint')}</FieldHint>
          <TextField
            type="number"
            min={500}
            max={20000}
            value={values.submissionMaxChars}
            onChange={(e) => set('submissionMaxChars', Number(e.target.value))}
          />
        </FieldGroup>
      </section>

      <section className="space-y-4">
        <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{t('adminConfig.aiSettings')}</h2>
        <FieldGroup>
          <LabelWithTooltip
            tooltipId="ai-model-help"
            tooltipText={t('adminConfig.aiModelTooltip')}
          >
            {t('adminConfig.aiModel')}
          </LabelWithTooltip>
          <SelectField
            value={values.aiModel}
            onChange={(e) => set('aiModel', e.target.value)}
            aria-describedby="ai-model-help"
          >
            {AI_MODELS.map((m) => (
              <option key={m.value} value={m.value}>{m.label}</option>
            ))}
          </SelectField>
        </FieldGroup>
        <FieldGroup>
          <LabelWithTooltip
            tooltipId="ai-temperature-help"
            tooltipText={t('adminConfig.temperatureTooltip')}
          >
            {t('adminConfig.temperature')}
          </LabelWithTooltip>
          <FieldHint>{t('adminConfig.temperatureHint')}</FieldHint>
          <div className="flex items-center gap-3">
            <RangeField
              min={0}
              max={1}
              step={0.05}
              value={values.aiTemperature}
              onChange={(e) => set('aiTemperature', Number(e.target.value))}
              className="flex-1"
              aria-describedby="ai-temperature-help"
            />
            <span className="w-10 text-right text-sm font-mono text-zinc-700 dark:text-zinc-300">
              {values.aiTemperature.toFixed(2)}
            </span>
          </div>
        </FieldGroup>
        <FieldGroup>
          <LabelWithTooltip
            tooltipId="min-info-score-help"
            tooltipText={t('adminConfig.minInfoScoreTooltip')}
          >
            {t('adminConfig.minInfoScore')}
          </LabelWithTooltip>
          <FieldHint>{t('adminConfig.minInfoScoreHint')}</FieldHint>
          <div className="flex items-center gap-3">
            <RangeField
              min={0}
              max={1}
              step={0.05}
              value={values.minInfoScoreThreshold}
              onChange={(e) => set('minInfoScoreThreshold', Number(e.target.value))}
              className="flex-1"
              aria-describedby="min-info-score-help"
            />
            <span className="w-10 text-right text-sm font-mono text-zinc-700 dark:text-zinc-300">
              {values.minInfoScoreThreshold.toFixed(2)}
            </span>
          </div>
        </FieldGroup>
        <FieldGroup>
          <FieldLabel>{t('adminConfig.maxClarificationCycles')}</FieldLabel>
          <FieldHint>{t('adminConfig.maxCyclesHint')}</FieldHint>
          <TextField
            type="number"
            min={0}
            max={10}
            value={values.maxClarificationCycles}
            onChange={(e) => set('maxClarificationCycles', Number(e.target.value))}
          />
        </FieldGroup>
        <FieldGroup>
          <FieldLabel>{t('adminConfig.aiJobTimeout')}</FieldLabel>
          <FieldHint>{t('adminConfig.timeoutHint')}</FieldHint>
          <TextField
            type="number"
            min={30}
            max={600}
            value={values.aiJobTimeoutSeconds}
            onChange={(e) => set('aiJobTimeoutSeconds', Number(e.target.value))}
          />
        </FieldGroup>
      </section>

      <section className="space-y-4">
        <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{t('adminConfig.dataCompliance')}</h2>
        <div className="flex items-start gap-3">
          <label className="flex cursor-pointer items-start gap-3">
            <CheckboxField
              checked={values.dataProcessingConsent}
              onChange={(e) => set('dataProcessingConsent', e.target.checked)}
              aria-describedby="data-processing-consent-help"
            />
            <span className="text-sm text-zinc-700 dark:text-zinc-300">
              {t('adminConfig.dataProcessingConsent')}
            </span>
          </label>
          <FormTooltip
            id="data-processing-consent-help"
            text={t('adminConfig.dataProcessingTooltip')}
          />
        </div>
      </section>

      <div className="flex items-center gap-4">
        <PrimaryButton
          type="submit"
          loading={saving}
        >
          {saving ? t('adminConfig.saving') : t('adminConfig.save')}
        </PrimaryButton>
        {success && <p className="text-sm text-green-700 dark:text-green-400">{t('adminConfig.saved')}</p>}
        {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
      </div>

    </form>
  )
}