'use client'

import { useCallback, useEffect, useState } from 'react'
import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import { RefreshCw, Download, ChevronLeft, ChevronRight } from 'lucide-react'

interface FinanzplanSlideProps {
  lang: Language
}

interface SheetMeta {
  name: string
  label_de: string
  label_en: string
  rows: number
}

interface SheetRow {
  id: number
  row_label?: string
  person_name?: string
  item_name?: string
  category?: string
  section?: string
  is_editable?: boolean
  is_sum_row?: boolean
  values?: Record<string, number>
  values_total?: Record<string, number>
  values_brutto?: Record<string, number>
  brutto_monthly?: number
  position?: string
  start_date?: string
  purchase_amount?: number
}

const MONTH_LABELS = [
  'Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun',
  'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez',
]

function getLabel(row: SheetRow): string {
  return row.row_label || row.person_name || row.item_name || '—'
}

function getValues(row: SheetRow): Record<string, number> {
  return row.values || row.values_total || row.values_brutto || {}
}

function formatCell(v: number | undefined): string {
  if (v === undefined || v === null) return ''
  if (v === 0) return '—'
  if (Math.abs(v) >= 1000) return v.toLocaleString('de-DE', { maximumFractionDigits: 0 })
  return v.toLocaleString('de-DE', { maximumFractionDigits: 2 })
}

export default function FinanzplanSlide({ lang }: FinanzplanSlideProps) {
  const [sheets, setSheets] = useState<SheetMeta[]>([])
  const [activeSheet, setActiveSheet] = useState<string>('personalkosten')
  const [rows, setRows] = useState<SheetRow[]>([])
  const [loading, setLoading] = useState(false)
  const [computing, setComputing] = useState(false)
  const [yearOffset, setYearOffset] = useState(0) // 0=2026, 1=2027, ...
  const de = lang === 'de'

  // Load sheet list
  useEffect(() => {
    fetch('/api/finanzplan')
      .then(r => r.json())
      .then(data => setSheets(data.sheets || []))
      .catch(() => {})
  }, [])

  // Load sheet data
  const loadSheet = useCallback(async (name: string) => {
    setLoading(true)
    try {
      const r = await fetch(`/api/finanzplan/${name}`)
      const data = await r.json()
      setRows(data.rows || [])
    } catch { /* ignore */ }
    setLoading(false)
  }, [])

  useEffect(() => { loadSheet(activeSheet) }, [activeSheet, loadSheet])

  // Compute
  const handleCompute = async () => {
    setComputing(true)
    try {
      await fetch('/api/finanzplan/compute', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' })
      await loadSheet(activeSheet)
    } catch { /* ignore */ }
    setComputing(false)
  }

  // Cell edit
  const handleCellEdit = async (rowId: number, monthKey: string, newValue: string) => {
    const numVal = parseFloat(newValue.replace(/[^\d.-]/g, ''))
    if (isNaN(numVal)) return

    try {
      await fetch(`/api/finanzplan/${activeSheet}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ rowId, updates: { [monthKey]: numVal } }),
      })
      await loadSheet(activeSheet)
    } catch { /* ignore */ }
  }

  const currentYear = 2026 + yearOffset
  const monthStart = yearOffset * 12 + 1
  const monthEnd = monthStart + 11

  return (
    <div className="max-w-[95vw] mx-auto">
      <FadeInView className="text-center mb-4">
        <h2 className="text-3xl md:text-4xl font-bold mb-1">
          <GradientText>{de ? 'Finanzplan' : 'Financial Plan'}</GradientText>
        </h2>
        <p className="text-sm text-white/40">{de ? '2026–2030 · Monatliche Granularitaet · Editierbar' : '2026–2030 · Monthly Granularity · Editable'}</p>
      </FadeInView>

      {/* Tab Bar */}
      <div className="flex items-center gap-1 mb-3 overflow-x-auto pb-1">
        {sheets.map(s => (
          <button
            key={s.name}
            onClick={() => setActiveSheet(s.name)}
            className={`px-3 py-1.5 text-[10px] font-medium rounded-lg whitespace-nowrap transition-colors ${
              activeSheet === s.name
                ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30'
                : 'text-white/40 hover:text-white/70 hover:bg-white/[0.05]'
            }`}
          >
            {de ? s.label_de : s.label_en}
            {s.rows > 0 && <span className="ml-1 text-[8px] opacity-50">({s.rows})</span>}
          </button>
        ))}
        <div className="flex-1" />
        <button
          onClick={handleCompute}
          disabled={computing}
          className="flex items-center gap-1 px-3 py-1.5 text-[10px] bg-emerald-500/20 text-emerald-300 rounded-lg hover:bg-emerald-500/30 transition-colors disabled:opacity-50"
        >
          <RefreshCw className={`w-3 h-3 ${computing ? 'animate-spin' : ''}`} />
          {de ? 'Berechnen' : 'Compute'}
        </button>
      </div>

      {/* Year Navigation */}
      <div className="flex items-center justify-center gap-4 mb-2">
        <button onClick={() => setYearOffset(Math.max(0, yearOffset - 1))} disabled={yearOffset === 0}
          className="p-1 text-white/40 hover:text-white/70 disabled:opacity-20">
          <ChevronLeft className="w-4 h-4" />
        </button>
        <span className="text-sm font-bold text-white">{currentYear}</span>
        <button onClick={() => setYearOffset(Math.min(4, yearOffset + 1))} disabled={yearOffset === 4}
          className="p-1 text-white/40 hover:text-white/70 disabled:opacity-20">
          <ChevronRight className="w-4 h-4" />
        </button>
      </div>

      {/* Data Grid */}
      <GlassCard hover={false} className="p-2 overflow-x-auto">
        {loading ? (
          <div className="text-center py-8 text-white/30 text-sm">{de ? 'Lade...' : 'Loading...'}</div>
        ) : (
          <table className="w-full text-[10px]">
            <thead>
              <tr className="border-b border-white/10">
                <th className="text-left py-1.5 px-2 text-white/40 font-medium sticky left-0 bg-slate-900/90 backdrop-blur min-w-[160px]">
                  {de ? 'Position' : 'Item'}
                </th>
                <th className="text-right py-1.5 px-2 text-white/40 font-medium min-w-[70px]">
                  {currentYear}
                </th>
                {MONTH_LABELS.map((label, idx) => (
                  <th key={idx} className="text-right py-1.5 px-1.5 text-white/30 font-normal min-w-[55px]">
                    {label}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map(row => {
                const values = getValues(row)
                const label = getLabel(row)
                const isSumRow = row.is_sum_row || label.includes('GESAMT') || label.includes('Summe') || label.includes('UEBERSCHUSS') || label.includes('LIQUIDITAET')
                const isEditable = row.is_editable

                // Annual sum for visible year
                let annual = 0
                for (let m = monthStart; m <= monthEnd; m++) annual += values[`m${m}`] || 0

                return (
                  <tr
                    key={row.id}
                    className={`border-b border-white/[0.03] ${isSumRow ? 'bg-white/[0.03]' : ''} hover:bg-white/[0.02]`}
                  >
                    <td className={`py-1 px-2 sticky left-0 bg-slate-900/90 backdrop-blur ${isSumRow ? 'font-bold text-white/80' : 'text-white/60'}`}>
                      <div className="flex items-center gap-1">
                        {isEditable && <span className="w-1 h-1 rounded-full bg-indigo-400 flex-shrink-0" />}
                        <span className="truncate">{label}</span>
                        {row.position && <span className="text-white/20 ml-1">({row.position})</span>}
                        {row.section && <span className="text-white/20 ml-1">[{row.section}]</span>}
                      </div>
                    </td>
                    <td className={`text-right py-1 px-2 font-medium ${annual < 0 ? 'text-red-400' : isSumRow ? 'text-white/80' : 'text-white/50'}`}>
                      {formatCell(annual)}
                    </td>
                    {Array.from({ length: 12 }, (_, idx) => {
                      const mKey = `m${monthStart + idx}`
                      const v = values[mKey] || 0

                      return (
                        <td
                          key={idx}
                          className={`text-right py-1 px-1.5 ${
                            v < 0 ? 'text-red-400/70' : v > 0 ? (isSumRow ? 'text-white/70' : 'text-white/50') : 'text-white/15'
                          } ${isEditable ? 'cursor-pointer hover:bg-indigo-500/10' : ''}`}
                          onDoubleClick={() => {
                            if (!isEditable) return
                            const input = prompt(`${label} — ${MONTH_LABELS[idx]} ${currentYear}`, String(v))
                            if (input !== null) handleCellEdit(row.id, mKey, input)
                          }}
                        >
                          {formatCell(v)}
                        </td>
                      )
                    })}
                  </tr>
                )
              })}
            </tbody>
          </table>
        )}
      </GlassCard>

      <p className="text-center text-[9px] text-white/20 mt-2">
        {de
          ? 'Doppelklick auf blaue Zellen zum Bearbeiten · Gruendung: 01.08.2026'
          : 'Double-click blue cells to edit · Founding: 01.08.2026'}
      </p>
    </div>
  )
}