'use client'

// tdd-guard:skip — UI-Modal, komponiert Form + Liste über bestehende Server-Actions
import { useCallback, useEffect, useRef, useState } from 'react'
import {
  createIntakeSubmissionToken,
  listIntakeSubmissionTokens,
  revokeIntakeSubmissionToken,
  type ActiveTokenItem,
} from '@/app/intake/board/token-actions'

const DEPARTMENTS = ['MO-23', 'MO-24', 'MN-14', 'MN-90', 'MC-14', 'OTHER'] as const
const INTAKE_TYPES: { value: string; label: string }[] = [
  { value: 'lieferantenbefaehigung', label: 'Lieferantenbefähigung' },
  { value: 'lsc_workshop', label: 'LSC-Workshop' },
  { value: 'fabrikanalyse', label: 'Fabrikanalyse' },
  { value: 'invest_workshop', label: 'Invest-Workshop' },
  { value: 'sonderprojekt', label: 'Sonderprojekt' },
  { value: 'sonstiges', label: 'Sonstiges' },
]

type Props = {
  onClose: () => void
}

function tokenStatus(t: ActiveTokenItem): { label: string; tone: string } {
  if (t.is_revoked) return { label: 'widerrufen', tone: 'text-destructive' }
  if (t.used_at) return { label: 'verwendet', tone: 'text-muted-foreground' }
  if (new Date(t.expires_at) < new Date()) return { label: 'abgelaufen', tone: 'text-muted-foreground' }
  return { label: 'aktiv', tone: 'text-[var(--color-success-text)]' }
}

export default function TokenManagerModal({ onClose }: Props) {
  const [email, setEmail] = useState('')
  const [department, setDepartment] = useState<string>('')
  const [intakeType, setIntakeType] = useState<string>('')
  const [ttlHours, setTtlHours] = useState(168)
  const [creating, setCreating] = useState(false)
  const [createdUrl, setCreatedUrl] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [copied, setCopied] = useState(false)

  const [tokens, setTokens] = useState<ActiveTokenItem[]>([])
  const [loading, setLoading] = useState(true)
  const emailRef = useRef<HTMLInputElement | null>(null)

  const reload = useCallback(async () => {
    // kein synchrones setLoading(true) hier — loading startet true (Initial-Load);
    // Folge-Reloads (nach create/revoke) aktualisieren die Liste still.
    const res = await listIntakeSubmissionTokens()
    if (res.ok) setTokens(res.data ?? [])
    setLoading(false)
  }, [])

  useEffect(() => {
    emailRef.current?.focus()
    let cancelled = false
    ;(async () => {
      const res = await listIntakeSubmissionTokens()
      if (cancelled) return
      if (res.ok) setTokens(res.data ?? [])
      setLoading(false)
    })()
    function onEsc(ev: KeyboardEvent) {
      if (ev.key === 'Escape') onClose()
    }
    window.addEventListener('keydown', onEsc)
    return () => {
      cancelled = true
      window.removeEventListener('keydown', onEsc)
    }
  }, [onClose])

  const canCreate = /\S+@\S+\.\S+/.test(email) && ttlHours >= 1 && ttlHours <= 720 && !creating

  async function handleCreate(ev: React.FormEvent) {
    ev.preventDefault()
    if (!canCreate) return
    setCreating(true)
    setError(null)
    setCreatedUrl(null)
    const res = await createIntakeSubmissionToken({
      email: email.trim(),
      department: department || null,
      intake_type: intakeType || null,
      ttl_hours: ttlHours,
    })
    setCreating(false)
    if (!res.ok) {
      setError(res.error)
      return
    }
    setCreatedUrl(res.data?.submission_url ?? null)
    setEmail('')
    setDepartment('')
    setIntakeType('')
    void reload()
  }

  async function handleRevoke(id: string) {
    const res = await revokeIntakeSubmissionToken(id)
    if (!res.ok) {
      setError(res.error)
      return
    }
    void reload()
  }

  async function copyUrl() {
    if (!createdUrl) return
    try {
      await navigator.clipboard.writeText(createdUrl)
      setCopied(true)
      window.setTimeout(() => setCopied(false), 1500)
    } catch {
      setError('clipboard_unavailable')
    }
  }

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="token-modal-title"
      className="fixed inset-0 z-50 flex items-center justify-center bg-foreground/40 p-4"
      onClick={onClose}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="bg-card border border-border rounded-md shadow-lg w-full max-w-lg p-5 space-y-4 max-h-[90vh] overflow-y-auto"
      >
        <header className="flex items-start justify-between">
          <div>
            <h2 id="token-modal-title" className="text-base font-bold text-foreground">
              Einreichungs-Links verwalten
            </h2>
            <p className="text-xs text-muted-foreground mt-1">
              Erzeuge einen Link für externe Fachbereiche oder widerrufe einen bestehenden.
            </p>
          </div>
          <button
            type="button"
            onClick={onClose}
            aria-label="Schließen"
            className="text-muted-foreground hover:text-foreground text-lg leading-none"
          >
            ×
          </button>
        </header>

        <form onSubmit={handleCreate} className="space-y-3 border border-border rounded-sm p-3">
          <div className="space-y-1">
            <label htmlFor="token-email" className="text-xs font-condensed font-bold text-foreground">
              E-Mail des Empfängers <span className="text-destructive">*</span>
            </label>
            <input
              id="token-email"
              ref={emailRef}
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              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"
              placeholder="fachbereich@example.com"
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div className="space-y-1">
              <label htmlFor="token-dept" className="text-xs font-condensed font-bold text-foreground">
                Abteilung
              </label>
              <select
                id="token-dept"
                value={department}
                onChange={(e) => setDepartment(e.target.value)}
                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="">— keine —</option>
                {DEPARTMENTS.map((d) => (
                  <option key={d} value={d}>{d}</option>
                ))}
              </select>
            </div>
            <div className="space-y-1">
              <label htmlFor="token-type" className="text-xs font-condensed font-bold text-foreground">
                Auftragsart
              </label>
              <select
                id="token-type"
                value={intakeType}
                onChange={(e) => setIntakeType(e.target.value)}
                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="">— offen —</option>
                {INTAKE_TYPES.map((t) => (
                  <option key={t.value} value={t.value}>{t.label}</option>
                ))}
              </select>
            </div>
          </div>

          <div className="space-y-1">
            <label htmlFor="token-ttl" className="text-xs font-condensed font-bold text-foreground">
              Gültigkeit (Stunden, 1–720)
            </label>
            <input
              id="token-ttl"
              type="number"
              min={1}
              max={720}
              value={ttlHours}
              onChange={(e) => setTtlHours(Number(e.target.value))}
              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>

          <button
            type="submit"
            disabled={!canCreate}
            className="w-full px-3 py-2 text-sm font-condensed font-bold text-white bg-primary rounded-sm hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {creating ? 'Erzeuge…' : 'Link erzeugen'}
          </button>

          {createdUrl && (
            <div className="space-y-1 pt-1">
              <p className="text-xs text-[var(--color-success-text)] font-bold">Link erzeugt:</p>
              <div className="flex items-center gap-2">
                <input
                  readOnly
                  value={createdUrl}
                  className="flex-1 px-2 py-1.5 text-xs bg-muted border border-border rounded-sm font-mono"
                  onFocus={(e) => e.target.select()}
                />
                <button
                  type="button"
                  onClick={copyUrl}
                  className="px-3 py-1.5 text-xs font-condensed font-bold text-foreground border border-border rounded-sm hover:bg-muted whitespace-nowrap"
                >
                  {copied ? 'Kopiert ✓' : 'Kopieren'}
                </button>
              </div>
            </div>
          )}
        </form>

        {error && (
          <p className="text-xs text-destructive" role="alert">Fehler: {error}</p>
        )}

        <div className="space-y-2">
          <h3 className="text-xs font-condensed font-bold text-foreground uppercase tracking-wide">
            Deine Links
          </h3>
          {loading ? (
            <p className="text-xs text-muted-foreground">Lädt…</p>
          ) : tokens.length === 0 ? (
            <p className="text-xs text-muted-foreground">Noch keine Links erzeugt.</p>
          ) : (
            <ul className="space-y-1.5">
              {tokens.map((t) => {
                const st = tokenStatus(t)
                const revocable = !t.is_revoked && !t.used_at
                return (
                  <li
                    key={t.id}
                    className="flex items-center justify-between gap-2 border border-border rounded-sm px-3 py-2 text-xs"
                  >
                    <div className="min-w-0">
                      <p className="font-bold text-foreground truncate">{t.email}</p>
                      <p className="text-muted-foreground">
                        {t.department ?? '—'}
                        {' · '}
                        <span className={st.tone}>{st.label}</span>
                        {' · bis '}
                        {new Date(t.expires_at).toLocaleDateString('de-DE')}
                      </p>
                    </div>
                    {revocable && (
                      <button
                        type="button"
                        onClick={() => handleRevoke(t.id)}
                        className="px-2 py-1 text-xs font-condensed font-bold text-destructive border border-destructive/40 rounded-sm hover:bg-destructive/10 whitespace-nowrap"
                      >
                        Widerrufen
                      </button>
                    )}
                  </li>
                )
              })}
            </ul>
          )}
        </div>
      </div>
    </div>
  )
}