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

const CHART_DAYS_WIDGET_IDS = new Set([
  'body_overview',
  'activity_overview',
  'nutrition_detail_charts',
  'recovery_charts_panel',
])

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

export default function DashboardConfigurePage() {
  ensurePilotLabWidgetsRegistered()

  const [bundle, setBundle] = useState(null)
  const [catalog, setCatalog] = useState(null)
  const [layout, setLayout] = useState(null)
  const [search, setSearch] = useState('')
  const [busy, setBusy] = useState(false)
  const [msg, setMsg] = useState(null)
  const [err, setErr] = useState(null)
  const [chartDaysDraftByWidgetId, setChartDaysDraftByWidgetId] = useState({})

  const metaById = useMemo(() => catalogMetaById(catalog), [catalog])

  const isWidgetCatalogAllowed = useCallback(
    (widgetId) => {
      const m = metaById[widgetId]
      if (m == null) return true
      return m.allowed !== false
    },
    [metaById],
  )

  const commitChartDaysDraftToLayout = useCallback((draftStr, baseLayout, widgetId) => {
    const clamped = normalizeBodyChartDays(
      draftStr === '' || draftStr == null ? BODY_CHART_DAYS_DEFAULT : draftStr
    )
    return {
      ...baseLayout,
      widgets: baseLayout.widgets.map((x) =>
        x.id !== widgetId ? 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)
      setChartDaysDraftByWidgetId({})
      const base = b.custom ? b.layout : structuredClone(b.product_default_layout)
      setLayout(normalizeLayoutForEditor(base))
    } catch (e) {
      setErr(formatFastApiDetail(null, e.message))
    }
  }, [])

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

  const save = async () => {
    if (!layout) return
    let toSave = layout
    const draftEntries = Object.entries(chartDaysDraftByWidgetId)
    if (draftEntries.length) {
      for (const [wid, val] of draftEntries) {
        toSave = normalizeLayoutForEditor(commitChartDaysDraftToLayout(val, toSave, wid))
      }
      setLayout(toSave)
      setChartDaysDraftByWidgetId({})
    }
    setBusy(true)
    setMsg(null)
    setErr(null)
    try {
      await api.putAppDashboardLayout(toSave)
      setMsg('Dein Dashboard wurde gespeichert.')
      await load()
    } catch (e) {
      setErr(formatFastApiDetail(null, e.message))
    } finally {
      setBusy(false)
    }
  }

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

  const searchLower = search.trim().toLowerCase()

  const libraryIndices = useMemo(() => {
    if (!layout?.widgets) return []
    return layout.widgets
      .map((w, i) => i)
      .filter((i) => {
        const w = layout.widgets[i]
        if (w.enabled || !isWidgetCatalogAllowed(w.id)) return false
        if (!searchLower) return true
        const m = metaById[w.id]
        const hay = `${m?.title || ''} ${m?.description || ''} ${w.id}`.toLowerCase()
        return hay.includes(searchLower)
      })
  }, [layout, searchLower, metaById, isWidgetCatalogAllowed])

  const activeIndices = useMemo(() => {
    if (!layout?.widgets) return []
    return layout.widgets
      .map((w, i) => i)
      .filter((i) => layout.widgets[i].enabled && isWidgetCatalogAllowed(layout.widgets[i].id))
  }, [layout, isWidgetCatalogAllowed])

  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: 720, 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 }}>
          <LayoutDashboard size={26} color="var(--accent)" />
          Übersicht anpassen
        </h1>
        <p style={{ fontSize: 13, color: 'var(--text2)', lineHeight: 1.6, marginTop: 8 }}>
          Wähle Kacheln für deine Startseite. Änderungen gelten nur für dein Profil – der System-Standard bleibt erhalten,
          bis du speicherst. Gesperrte Kacheln (Abonnement) erscheinen nicht in der Auswahl.
        </p>
        {!bundle?.custom && (
          <p style={{ fontSize: 12, color: 'var(--accent)', marginTop: 10, lineHeight: 1.5 }}>
            Du bearbeitest gerade das <strong>System-Standardlayout</strong>. Mit „Speichern“ legst du deine persönliche
            Version ab.
          </p>
        )}
      </div>

      <div className="card section-gap" style={{ marginBottom: 16 }}>
        <label style={{ fontSize: 12, color: 'var(--text2)', display: 'block', marginBottom: 6 }}>
          Widgets durchsuchen (Bibliothek unten)
        </label>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Search size={18} color="var(--text3)" style={{ flexShrink: 0 }} />
          <input
            type="search"
            className="form-input"
            placeholder="Titel, Beschreibung oder ID …"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            aria-label="Widgets durchsuchen"
            style={{ flex: 1 }}
          />
        </div>
      </div>

      <div className="card section-gap" style={{ marginBottom: 16 }}>
        <div className="card-title" style={{ fontSize: 15 }}>
          Auf der Übersicht aktiv · {activeIndices.length}
        </div>
        {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 }}>
          {activeIndices.map((i) => {
            const w = layout.widgets[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: '10px 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 160px' }}>
                    <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 === 'quick_capture' && (
                  <QuickCaptureConfigEditor
                    config={w.config || {}}
                    onChange={(next) =>
                      setLayout((L) =>
                        normalizeLayoutForEditor({
                          ...L,
                          widgets: L.widgets.map((x, j) => {
                            if (j !== i) return x
                            const cfg = { ...(x.config || {}) }
                            for (const k of ['show_weight', 'show_resting_hr', 'show_hrv', 'show_vo2_max']) {
                              delete cfg[k]
                            }
                            Object.assign(cfg, next)
                            return { ...x, config: cfg }
                          }),
                        })
                      )
                    }
                  />
                )}
                {w.id === 'kpi_board' && (
                  <KpiBoardConfigEditor
                    tiles={Object.prototype.hasOwnProperty.call(w.config || {}, 'tiles') ? w.config.tiles : undefined}
                    onChange={(next) =>
                      setLayout((L) =>
                        normalizeLayoutForEditor({
                          ...L,
                          widgets: L.widgets.map((x, j) => {
                            if (j !== i) return x
                            const cfg = { ...(x.config || {}) }
                            if (next === undefined) {
                              delete cfg.tiles
                            } else {
                              cfg.tiles = next
                            }
                            return { ...x, config: cfg }
                          }),
                        })
                      )
                    }
                  />
                )}
                {CHART_DAYS_WIDGET_IDS.has(w.id) && (
                  <div style={{ marginTop: 10, marginLeft: 28 }}>
                    <label style={{ fontSize: 12, color: 'var(--text2)', display: 'block', marginBottom: 4 }}>
                      Zeitraum (Tage): {BODY_CHART_DAYS_MIN}–{BODY_CHART_DAYS_MAX}
                    </label>
                    <input
                      type="text"
                      inputMode="numeric"
                      autoComplete="off"
                      className="form-input"
                      style={{ maxWidth: 120 }}
                      value={
                        chartDaysDraftByWidgetId[w.id] !== undefined
                          ? chartDaysDraftByWidgetId[w.id]
                          : String(chartDaysVal)
                      }
                      onFocus={() =>
                        setChartDaysDraftByWidgetId((prev) => ({
                          ...prev,
                          [w.id]: String(chartDaysVal),
                        }))
                      }
                      onChange={(e) =>
                        setChartDaysDraftByWidgetId((prev) => ({
                          ...prev,
                          [w.id]: e.target.value,
                        }))
                      }
                      onBlur={(e) => {
                        const raw = e.target.value
                        setLayout((L) =>
                          normalizeLayoutForEditor(commitChartDaysDraftToLayout(raw, L, w.id))
                        )
                        setChartDaysDraftByWidgetId((prev) => {
                          const next = { ...prev }
                          delete next[w.id]
                          return next
                        })
                      }}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') e.currentTarget.blur()
                      }}
                    />
                  </div>
                )}
              </li>
            )
          })}
        </ul>
      </div>

      <div className="card section-gap" style={{ marginBottom: 20 }}>
        <div className="card-title" style={{ fontSize: 15 }}>
          Bibliothek · hinzufügen
        </div>
        {libraryIndices.length === 0 ? (
          <p style={{ fontSize: 13, color: 'var(--text3)', margin: 0 }}>
            {searchLower ? 'Keine passenden inaktiven Widgets.' : 'Alle verfügbaren Kacheln sind schon aktiv.'}
          </p>
        ) : (
          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            {libraryIndices.map((i) => {
              const w = layout.widgets[i]
              const m = metaById[w.id]
              return (
                <li
                  key={w.id}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    gap: 12,
                    padding: '10px 0',
                    borderBottom: '1px solid var(--border)',
                  }}
                >
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{m?.title || w.id}</div>
                    <div style={{ fontSize: 12, color: 'var(--text3)', marginTop: 2 }}>{m?.description || ''}</div>
                  </div>
                  <button
                    type="button"
                    className="btn btn-primary"
                    style={{ flexShrink: 0, fontSize: 12, padding: '8px 14px' }}
                    onClick={() =>
                      setLayout((L) =>
                        normalizeLayoutForEditor({
                          ...L,
                          widgets: L.widgets.map((x, j) => (j === i ? { ...x, enabled: true } : x)),
                        })
                      )
                    }
                  >
                    Hinzufügen
                  </button>
                </li>
              )
            })}
          </ul>
        )}
      </div>

      <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={resetToSystem}>
          System-Standard wiederherstellen
        </button>
        <Link to="/" className="btn btn-secondary" style={{ textDecoration: 'none', textAlign: 'center' }}>
          Zur Übersicht
        </Link>
      </div>
    </div>
  )
}