'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import {
  createAnalysisHeader,
  loadProjectsForPicker,
  loadSuppliersForPicker,
  type ProjectPickerItem,
  type SupplierPickerItem,
} from '@/app/oee/analyse/actions'
import {
  VALIDATION_LABEL_DE,
  validateHeaderInput,
  type HeaderInput,
} from '@/lib/oee/analysis'

export default function AnalysisNewClient() {
  const router = useRouter()
  const [projects, setProjects] = useState<ProjectPickerItem[]>([])
  const [suppliers, setSuppliers] = useState<SupplierPickerItem[]>([])
  const [name, setName] = useState('')
  const [projectId, setProjectId] = useState<string>('')
  const [supplierId, setSupplierId] = useState<string>('')
  const [analysisDate, setAnalysisDate] = useState<string>(
    new Date().toISOString().split('T')[0],
  )
  const [periodStart, setPeriodStart] = useState('')
  const [periodEnd, setPeriodEnd] = useState('')
  const [mode, setMode] = useState<'with_project' | 'orphan'>('with_project')
  const [submitting, setSubmitting] = useState(false)
  const [errorMsg, setErrorMsg] = useState<string | null>(null)

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      const [projRes, supRes] = await Promise.all([
        loadProjectsForPicker(),
        loadSuppliersForPicker(),
      ])
      if (cancelled) return
      if (projRes.ok && projRes.data) setProjects(projRes.data)
      if (supRes.ok && supRes.data) setSuppliers(supRes.data)
    })()
    return () => {
      cancelled = true
    }
  }, [])

  const headerInput: HeaderInput = {
    name,
    project_id: mode === 'with_project' ? projectId || null : null,
    supplier_id: mode === 'with_project' ? null : supplierId || null,
    analysis_date: analysisDate,
    period_start: periodStart || null,
    period_end: periodEnd || null,
  }

  const validation = validateHeaderInput(headerInput, mode)
  const canSubmit = validation.ok && !submitting

  async function handleSubmit(ev: React.FormEvent) {
    ev.preventDefault()
    if (!canSubmit) return
    setSubmitting(true)
    setErrorMsg(null)
    const result = await createAnalysisHeader(headerInput)
    setSubmitting(false)
    if (!result.ok || !result.data) {
      setErrorMsg(result.ok ? 'no_data' : result.error)
      return
    }
    router.push(`/oee/analyse/${result.data.id}?step=stationen`)
  }

  return (
    <main className="max-w-3xl mx-auto px-4 py-6 pb-24 md:pb-8 space-y-6">
      <header>
        <h1 className="text-lg font-bold text-foreground">Neue OEE-Analyse</h1>
        <p className="text-xs text-muted-foreground mt-1">
          Schritt 1 von 4 — Grunddaten. Du kannst danach jederzeit speichern und später weitermachen.
        </p>
      </header>

      <form onSubmit={handleSubmit} className="space-y-4 bg-card border border-border rounded-md p-5">
        <fieldset className="space-y-2">
          <legend className="text-xs font-condensed font-bold text-foreground">
            Verknüpfung
          </legend>
          <label className="flex items-center gap-2 text-sm">
            <input
              type="radio"
              name="mode"
              checked={mode === 'with_project'}
              onChange={() => setMode('with_project')}
              disabled={submitting}
            />
            Mit Projekt verknüpfen
          </label>
          <label className="flex items-center gap-2 text-sm">
            <input
              type="radio"
              name="mode"
              checked={mode === 'orphan'}
              onChange={() => setMode('orphan')}
              disabled={submitting}
            />
            Ohne Projekt (Sandbox-Analyse)
          </label>
          {mode === 'orphan' && (
            <p className="text-[11px] text-warning bg-warning/5 border border-warning/30 rounded-sm px-3 py-2">
              ⚠ Sandbox-Analysen werden nach 28 Tagen automatisch gelöscht (max 3× verlängerbar).
            </p>
          )}
        </fieldset>

        {mode === 'with_project' ? (
          <div className="space-y-1">
            <label htmlFor="proj" className="text-xs font-condensed font-bold text-foreground">
              Projekt <span className="text-destructive">*</span>
            </label>
            <select
              id="proj"
              value={projectId}
              onChange={(e) => setProjectId(e.target.value)}
              required
              disabled={submitting}
              className="w-full px-3 py-2 text-sm bg-background border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-primary"
            >
              <option value="">— bitte wählen —</option>
              {projects.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.project_code ?? p.id.slice(0, 8)} · {p.supplier_name ?? '—'}
                </option>
              ))}
            </select>
          </div>
        ) : (
          <div className="space-y-1">
            <label htmlFor="sup" className="text-xs font-condensed font-bold text-foreground">
              Lieferant <span className="text-destructive">*</span>
            </label>
            <select
              id="sup"
              value={supplierId}
              onChange={(e) => setSupplierId(e.target.value)}
              required
              disabled={submitting}
              className="w-full px-3 py-2 text-sm bg-background border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-primary"
            >
              <option value="">— bitte wählen —</option>
              {suppliers.map((s) => (
                <option key={s.id} value={s.id}>
                  {s.supplier_name}
                </option>
              ))}
            </select>
          </div>
        )}

        <div className="space-y-1">
          <label htmlFor="name" className="text-xs font-condensed font-bold text-foreground">
            Name der Analyse <span className="text-destructive">*</span>
          </label>
          <input
            id="name"
            type="text"
            required
            value={name}
            onChange={(e) => setName(e.target.value)}
            disabled={submitting}
            placeholder="z.B. Q2 Audit Linie 1"
            className="w-full px-3 py-2 text-sm bg-background border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-primary"
          />
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div className="space-y-1">
            <label htmlFor="adate" className="text-xs font-condensed font-bold text-foreground">
              Analyse-Datum <span className="text-destructive">*</span>
            </label>
            <input
              id="adate"
              type="date"
              required
              value={analysisDate}
              onChange={(e) => setAnalysisDate(e.target.value)}
              disabled={submitting}
              className="w-full px-3 py-2 text-sm bg-background border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>
          <div />
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div className="space-y-1">
            <label htmlFor="pstart" className="text-xs font-condensed font-bold text-foreground">
              Zeitraum von
            </label>
            <input
              id="pstart"
              type="date"
              value={periodStart}
              onChange={(e) => setPeriodStart(e.target.value)}
              disabled={submitting}
              className="w-full px-3 py-2 text-sm bg-background border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>
          <div className="space-y-1">
            <label htmlFor="pend" className="text-xs font-condensed font-bold text-foreground">
              Zeitraum bis
            </label>
            <input
              id="pend"
              type="date"
              value={periodEnd}
              onChange={(e) => setPeriodEnd(e.target.value)}
              disabled={submitting}
              className="w-full px-3 py-2 text-sm bg-background border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>
        </div>

        {!validation.ok && (
          <p className="text-xs text-destructive">
            {VALIDATION_LABEL_DE[validation.error] ?? validation.error}
          </p>
        )}
        {errorMsg && (
          <p className="text-xs text-destructive" role="alert">
            Anlegen fehlgeschlagen: {errorMsg}
          </p>
        )}

        <footer className="flex items-center justify-end gap-2 pt-3 border-t border-border">
          <button
            type="button"
            onClick={() => router.push('/oee')}
            disabled={submitting}
            className="px-3 py-1.5 text-sm font-condensed text-foreground border border-border rounded-sm hover:bg-muted disabled:opacity-50"
          >
            Abbrechen
          </button>
          <button
            type="submit"
            disabled={!canSubmit}
            className="px-3 py-1.5 text-sm font-condensed font-bold text-white bg-primary rounded-sm hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {submitting ? 'Anlegen…' : 'Weiter zu Stationen →'}
          </button>
        </footer>
      </form>
    </main>
  )
}