import { useCallback, useEffect, useState } from 'react'
import { ChevronDown, ChevronUp, LayoutGrid } from 'lucide-react'
import { Link } from 'react-router-dom'
import { api, formatFastApiDetail } from '../utils/api'
import { WidgetRenderer } from '../widgetSystem/dashboardWidgetRegistry'
import { ensurePilotLabWidgetsRegistered } from '../widgetSystem/registerPilotLabWidgets'
import {
  BODY_CHART_DAYS_DEFAULT,
  BODY_CHART_DAYS_MAX,
  BODY_CHART_DAYS_MIN,
  normalizeBodyChartDays,
} from '../widgetSystem/bodyChartDays'
import { moveWidget, normalizeLayoutForEditor, toggleWidget } from '../widgetSystem/layoutEditor'

function catalogMetaById(catalog) {
  if (!catalog?.widgets?.length) return {}
  return Object.fromEntries(catalog.widgets.map((w) => [w.id, w]))
}

export default function DashboardLabPage() {
  ensurePilotLabWidgetsRegistered()

  const [refreshTick, setRefreshTick] = useState(0)
  const requestRefresh = () => setRefreshTick((t) => t + 1)
  const [catalog, setCatalog] = useState(null)
  const [bundle, setBundle] = useState(null)
  const [layout, setLayout] = useState(null)
  const [err, setErr] = useState(null)
  const [busy, setBusy] = useState(false)
  const [msg, setMsg] = useState(null)
  /** Während der Fokus im Körper-Chart-Feld: Rohstring, damit Tippen (z. B. „14“) nicht sofort geclamped wird */
  const [bodyChartDaysDraft, setBodyChartDaysDraft] = useState(null)

  const metaById = catalogMetaById(catalog)

  const commitBodyChartDraftToLayout = useCallback((draftStr, baseLayout) => {
    const clamped = normalizeBodyChartDays(draftStr === '' || draftStr == null ? BODY_CHART_DAYS_DEFAULT : draftStr)
    return {
      ...baseLayout,
      widgets: baseLayout.widgets.map((x) =>
        x.id !== 'body_overview' ? x : { ...x, config: { ...x.config, chart_days: clamped } }
      ),
    }
  }, [])

  const load = useCallback(async () => {
    setErr(null)
    try {
      const [cat, b] = await Promise.all([api.getAppWidgetsCatalog(), api.getAppDashboardLayout()])
      setCatalog(cat)
      setBundle(b)
      setBodyChartDaysDraft(null)
      setLayout(normalizeLayoutForEditor(b.layout))
    } catch (e) {
      setErr(formatFastApiDetail(null, e.message))
    }
  }, [])

  useEffect(() => {
    load()
  }, [load])

  const save = async () => {
    if (!layout) return
    let toSave = layout
    if (bodyChartDaysDraft !== null) {
      toSave = normalizeLayoutForEditor(commitBodyChartDraftToLayout(bodyChartDaysDraft, layout))
      setLayout(toSave)
      setBodyChartDaysDraft(null)
    }
    setBusy(true)
    setMsg(null)
    setErr(null)
    try {
      await api.putAppDashboardLayout(toSave)
      setMsg('Layout gespeichert.')
      await load()
    } catch (e) {
      setErr(formatFastApiDetail(null, e.message))
    } finally {
      setBusy(false)
    }
  }

  const reset = async () => {
    if (!confirm('Persönliches Layout löschen und Standard wiederherstellen?')) return
    setBusy(true)
    setMsg(null)
    setErr(null)
    try {
      const r = await api.resetAppDashboardLayout()
      setBodyChartDaysDraft(null)
      setLayout(normalizeLayoutForEditor(r.layout))
      setMsg('Auf Standard zurückgesetzt.')
      await load()
    } catch (e) {
      setErr(formatFastApiDetail(null, e.message))
    } finally {
      setBusy(false)
    }
  }

  const applyDefaultLocal = () => {
    if (bundle?.default_layout) {
      setBodyChartDaysDraft(null)
      setLayout(normalizeLayoutForEditor(structuredClone(bundle.default_layout)))
      setMsg('Standard geladen (noch nicht gespeichert).')
    }
  }

  if (err && !layout) {
    return (
      <div style={{ padding: 24, maxWidth: 640, margin: '0 auto' }}>
        <p style={{ color: '#D85A30' }}>{err}</p>
        <button type="button" className="btn btn-secondary" onClick={load}>
          Erneut laden
        </button>
      </div>
    )
  }

  if (!layout) {
    return (
      <div style={{ padding: 48, textAlign: 'center' }}>
        <div className="spinner" style={{ width: 32, height: 32, margin: '0 auto' }} />
      </div>
    )
  }

  return (
    <div style={{ paddingBottom: 96, textAlign: 'left', maxWidth: 920, margin: '0 auto' }}>
      <div style={{ marginBottom: 20 }}>
        <Link
          to="/settings"
          className="btn btn-secondary"
          style={{ display: 'inline-flex', marginBottom: 12, textDecoration: 'none' }}
        >
          ← Einstellungen
        </Link>
        <h1 className="page-title" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <LayoutGrid size={26} color="var(--accent)" />
          App-Bereich: Dashboard-Lab
        </h1>
        <p style={{ fontSize: 13, color: 'var(--text2)', lineHeight: 1.6, marginTop: 8 }}>
          Widget-System: Katalog, Registry, Renderer; optional pro Widget <code>config</code> (z. B.{' '}
          <strong>Körper-Chart</strong> 7–90 Tage). Layout pro Profil in der DB — getrennt vom Produktiv-Dashboard.
          Vergleich:{' '}
          <Link to="/pilot/viz" style={{ color: 'var(--accent)' }}>
            Pilot-Übersicht (festes Standard-Layout)
          </Link>
          .
        </p>
      </div>

      <div
        className="card"
        style={{
          marginBottom: 20,
          borderStyle: 'dashed',
          borderColor: 'var(--border2)',
          background: 'var(--surface2)',
        }}
      >
        <div className="card-title" style={{ fontSize: 14 }}>
          Layout (v1)
        </div>
        {bundle && (
          <p style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 12 }}>
            Status: {bundle.custom ? 'individuell gespeichert' : 'Standard (nicht in DB)'}
          </p>
        )}
        {err && <p style={{ fontSize: 12, color: '#D85A30', marginBottom: 8 }}>{err}</p>}
        {msg && <p style={{ fontSize: 12, color: 'var(--accent)', marginBottom: 8 }}>{msg}</p>}
        <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 12px' }}>
          {layout.widgets.map((w, i) => {
            const label = metaById[w.id]?.title || w.id
            const chartDaysVal =
              w.config?.chart_days != null ? normalizeBodyChartDays(w.config.chart_days) : BODY_CHART_DAYS_DEFAULT
            return (
              <li
                key={w.id}
                style={{
                  padding: '8px 0',
                  borderBottom: '1px solid var(--border)',
                }}
              >
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 8,
                    flexWrap: 'wrap',
                  }}
                >
                  <label style={{ display: 'flex', alignItems: 'center', gap: 8, flex: '1 1 140px' }}>
                    <input
                      type="checkbox"
                      checked={w.enabled}
                      onChange={() => setLayout((L) => toggleWidget(L, i))}
                    />
                    <span style={{ fontSize: 14 }}>{label}</span>
                  </label>
                  <div style={{ display: 'flex', gap: 6 }}>
                    <button
                      type="button"
                      className="btn btn-secondary"
                      style={{ padding: '6px 10px' }}
                      aria-label="Nach oben"
                      onClick={() => setLayout((L) => moveWidget(L, i, -1))}
                    >
                      <ChevronUp size={18} />
                    </button>
                    <button
                      type="button"
                      className="btn btn-secondary"
                      style={{ padding: '6px 10px' }}
                      aria-label="Nach unten"
                      onClick={() => setLayout((L) => moveWidget(L, i, 1))}
                    >
                      <ChevronDown size={18} />
                    </button>
                  </div>
                </div>
                {w.id === 'body_overview' && (
                  <div style={{ marginTop: 10, marginLeft: 28 }}>
                    <label style={{ fontSize: 12, color: 'var(--text2)', display: 'block', marginBottom: 4 }}>
                      Körper-Chart Zeitraum (Tage): {BODY_CHART_DAYS_MIN}–{BODY_CHART_DAYS_MAX}
                    </label>
                    <input
                      type="text"
                      inputMode="numeric"
                      autoComplete="off"
                      className="form-input"
                      style={{ maxWidth: 120 }}
                      aria-label="Körper-Chart Zeitraum in Tagen"
                      value={
                        bodyChartDaysDraft !== null
                          ? bodyChartDaysDraft
                          : String(chartDaysVal)
                      }
                      onFocus={() => setBodyChartDaysDraft(String(chartDaysVal))}
                      onChange={(e) => setBodyChartDaysDraft(e.target.value)}
                      onBlur={() => {
                        setLayout((L) =>
                          normalizeLayoutForEditor(
                            commitBodyChartDraftToLayout(bodyChartDaysDraft ?? String(chartDaysVal), L)
                          )
                        )
                        setBodyChartDaysDraft(null)
                      }}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') e.currentTarget.blur()
                      }}
                    />
                  </div>
                )}
              </li>
            )
          })}
        </ul>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          <button type="button" className="btn btn-primary" disabled={busy} onClick={save}>
            Speichern
          </button>
          <button type="button" className="btn btn-secondary" disabled={busy} onClick={reset}>
            Zurücksetzen (DB)
          </button>
          <button type="button" className="btn btn-secondary" disabled={busy} onClick={applyDefaultLocal}>
            Standard in Editor laden
          </button>
        </div>
      </div>

      <WidgetRenderer layout={layout} refreshTick={refreshTick} requestRefresh={requestRefresh} />
    </div>
  )
}