'use client'

import { useEffect, useState, useCallback } from 'react'
import { useParams, useRouter } from 'next/navigation'
import Link from 'next/link'
import { ArrowLeft, Lock, Save, GitFork, Eye, Code } from 'lucide-react'
import BilingualField from '@/components/pitch-admin/editors/BilingualField'
import FormField from '@/components/pitch-admin/editors/FormField'
import ArrayField from '@/components/pitch-admin/editors/ArrayField'
import RowTable from '@/components/pitch-admin/editors/RowTable'
import CardList from '@/components/pitch-admin/editors/CardList'

const TABLE_LABELS: Record<string, string> = {
  company: 'Company', team: 'Team', financials: 'Financials', market: 'Market',
  competitors: 'Competitors', features: 'Features', milestones: 'Milestones',
  metrics: 'Metrics', funding: 'Funding', products: 'Products',
  fm_scenarios: 'FM Scenarios', fm_assumptions: 'FM Assumptions',
}
const TABLE_NAMES = Object.keys(TABLE_LABELS)

interface Version {
  id: string; name: string; description: string | null
  status: 'draft' | 'committed'; parent_id: string | null; committed_at: string | null
}

type R = Record<string, unknown>

export default function VersionEditorPage() {
  const { id } = useParams<{ id: string }>()
  const router = useRouter()
  const [version, setVersion] = useState<Version | null>(null)
  const [allData, setAllData] = useState<Record<string, unknown[]>>({})
  const [activeTab, setActiveTab] = useState('company')
  const [loading, setLoading] = useState(true)
  const [dirty, setDirty] = useState(false)
  const [saving, setSaving] = useState(false)
  const [jsonMode, setJsonMode] = useState(false)
  const [jsonText, setJsonText] = useState('')
  const [toast, setToast] = useState<string | null>(null)

  function flashToast(msg: string) { setToast(msg); setTimeout(() => setToast(null), 3000) }

  const load = useCallback(async () => {
    setLoading(true)
    const res = await fetch(`/api/admin/versions/${id}`)
    if (res.ok) { const d = await res.json(); setVersion(d.version); setAllData(d.data) }
    setLoading(false)
  }, [id])

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

  // Sync JSON text when switching tabs or toggling JSON mode
  useEffect(() => {
    if (jsonMode) setJsonText(JSON.stringify(allData[activeTab] || [], null, 2))
  }, [activeTab, jsonMode, allData])

  function updateData(newData: unknown[]) {
    setAllData(prev => ({ ...prev, [activeTab]: newData }))
    setDirty(true)
  }

  function updateRecord(index: number, key: string, value: unknown) {
    const arr = [...(allData[activeTab] as R[] || [])]
    arr[index] = { ...arr[index], [key]: value }
    updateData(arr)
  }

  // For single-record tables (company, funding)
  function updateSingle(key: string, value: unknown) { updateRecord(0, key, value) }

  async function saveTable() {
    let data: unknown
    if (jsonMode) {
      try { data = JSON.parse(jsonText) } catch { flashToast('Invalid JSON'); return }
    } else {
      data = allData[activeTab]
    }

    setSaving(true)
    const res = await fetch(`/api/admin/versions/${id}/data/${activeTab}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ data }),
    })
    setSaving(false)
    if (res.ok) {
      setDirty(false)
      if (jsonMode) setAllData(prev => ({ ...prev, [activeTab]: Array.isArray(data) ? data : [data] }))
      flashToast('Saved')
    } else { const d = await res.json().catch(() => ({})); flashToast(d.error || 'Save failed') }
  }

  async function commitVersion() {
    if (!confirm('Commit this version? It becomes immutable.')) return
    const res = await fetch(`/api/admin/versions/${id}/commit`, { method: 'POST' })
    if (res.ok) { flashToast('Committed'); load() }
    else { const d = await res.json().catch(() => ({})); flashToast(d.error || 'Failed') }
  }

  async function forkVersion() {
    const name = prompt('Name for the new draft:')
    if (!name) return
    const res = await fetch(`/api/admin/versions/${id}/fork`, {
      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name }),
    })
    if (res.ok) { const d = await res.json(); router.push(`/pitch-admin/versions/${d.version.id}`) }
    else { const d = await res.json().catch(() => ({})); flashToast(d.error || 'Failed') }
  }

  if (loading) return <div className="flex items-center justify-center h-64"><div className="w-8 h-8 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" /></div>
  if (!version) return <div className="text-rose-400">Version not found</div>

  const isDraft = version.status === 'draft'
  const data = allData[activeTab] || []
  const single = (data as R[])[0] || {} as R

  function renderEditor() {
    if (jsonMode) {
      return (
        <textarea
          value={jsonText}
          onChange={e => { setJsonText(e.target.value); setDirty(true) }}
          readOnly={!isDraft}
          className="w-full bg-transparent text-white/90 font-mono text-xs p-4 focus:outline-none resize-none"
          style={{ minHeight: '400px' }}
          spellCheck={false}
        />
      )
    }

    switch (activeTab) {
      case 'company':
        return (
          <div className="space-y-4 p-4">
            <FormField label="Company Name" value={single.name as string || ''} onChange={v => updateSingle('name', v)} />
            <div className="grid grid-cols-2 gap-4">
              <FormField label="Legal Form" value={single.legal_form as string || ''} onChange={v => updateSingle('legal_form', v)} placeholder="GmbH" />
              <FormField label="Founding Date" value={single.founding_date as string || ''} onChange={v => updateSingle('founding_date', v)} type="date" />
            </div>
            <BilingualField label="Tagline" valueDe={single.tagline_de as string || ''} valueEn={single.tagline_en as string || ''} onChangeDe={v => updateSingle('tagline_de', v)} onChangeEn={v => updateSingle('tagline_en', v)} />
            <BilingualField label="Mission" valueDe={single.mission_de as string || ''} valueEn={single.mission_en as string || ''} onChangeDe={v => updateSingle('mission_de', v)} onChangeEn={v => updateSingle('mission_en', v)} multiline />
            <div className="grid grid-cols-2 gap-4">
              <FormField label="Website" value={single.website as string || ''} onChange={v => updateSingle('website', v)} type="url" />
              <FormField label="HQ City" value={single.hq_city as string || ''} onChange={v => updateSingle('hq_city', v)} />
            </div>
          </div>
        )

      case 'team':
        return (
          <div className="p-4">
            <CardList
              items={data as R[]}
              onChange={updateData}
              titleKey="name"
              subtitleKey="role_en"
              addLabel="Add team member"
              renderCard={(item, update) => (
                <div className="space-y-3">
                  <FormField label="Name" value={item.name as string || ''} onChange={v => update('name', v)} />
                  <BilingualField label="Role" valueDe={item.role_de as string || ''} valueEn={item.role_en as string || ''} onChangeDe={v => update('role_de', v)} onChangeEn={v => update('role_en', v)} />
                  <BilingualField label="Bio" valueDe={item.bio_de as string || ''} valueEn={item.bio_en as string || ''} onChangeDe={v => update('bio_de', v)} onChangeEn={v => update('bio_en', v)} multiline />
                  <div className="grid grid-cols-2 gap-4">
                    <FormField label="Equity %" value={item.equity_pct as number || 0} onChange={v => update('equity_pct', v)} type="number" />
                    <FormField label="LinkedIn" value={item.linkedin_url as string || ''} onChange={v => update('linkedin_url', v)} type="url" />
                  </div>
                  <ArrayField label="Expertise" values={(item.expertise as string[]) || []} onChange={v => update('expertise', v)} />
                </div>
              )}
            />
          </div>
        )

      case 'financials':
        return (
          <div className="p-4">
            <RowTable
              rows={data as R[]}
              onChange={updateData}
              columns={[
                { key: 'year', label: 'Year', type: 'number' },
                { key: 'revenue_eur', label: 'Revenue (EUR)', type: 'number' },
                { key: 'costs_eur', label: 'Costs (EUR)', type: 'number' },
                { key: 'mrr_eur', label: 'MRR (EUR)', type: 'number' },
                { key: 'arr_eur', label: 'ARR (EUR)', type: 'number' },
                { key: 'customers_count', label: 'Customers', type: 'number' },
                { key: 'employees_count', label: 'Employees', type: 'number' },
                { key: 'burn_rate_eur', label: 'Burn (EUR)', type: 'number' },
              ]}
              addLabel="Add year"
            />
          </div>
        )

      case 'market':
        return (
          <div className="p-4">
            <RowTable
              rows={data as R[]}
              onChange={updateData}
              columns={[
                { key: 'market_segment', label: 'Segment' },
                { key: 'label', label: 'Label' },
                { key: 'value_eur', label: 'Value (EUR)', type: 'number' },
                { key: 'growth_rate_pct', label: 'Growth %', type: 'number' },
                { key: 'source', label: 'Source' },
              ]}
            />
          </div>
        )

      case 'competitors':
        return (
          <div className="p-4">
            <CardList
              items={data as R[]}
              onChange={updateData}
              titleKey="name"
              subtitleKey="website"
              addLabel="Add competitor"
              renderCard={(item, update) => (
                <div className="space-y-3">
                  <div className="grid grid-cols-2 gap-4">
                    <FormField label="Name" value={item.name as string || ''} onChange={v => update('name', v)} />
                    <FormField label="Website" value={item.website as string || ''} onChange={v => update('website', v)} type="url" />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <FormField label="Customers" value={item.customers_count as number || 0} onChange={v => update('customers_count', v)} type="number" />
                    <FormField label="Pricing Range" value={item.pricing_range as string || ''} onChange={v => update('pricing_range', v)} />
                  </div>
                  <ArrayField label="Strengths" values={(item.strengths as string[]) || []} onChange={v => update('strengths', v)} />
                  <ArrayField label="Weaknesses" values={(item.weaknesses as string[]) || []} onChange={v => update('weaknesses', v)} />
                </div>
              )}
            />
          </div>
        )

      case 'features':
        return (
          <div className="p-4">
            <CardList
              items={data as R[]}
              onChange={updateData}
              titleKey="feature_name_en"
              subtitleKey="category"
              addLabel="Add feature"
              renderCard={(item, update) => (
                <div className="space-y-3">
                  <BilingualField label="Feature Name" valueDe={item.feature_name_de as string || ''} valueEn={item.feature_name_en as string || ''} onChangeDe={v => update('feature_name_de', v)} onChangeEn={v => update('feature_name_en', v)} />
                  <FormField label="Category" value={item.category as string || ''} onChange={v => update('category', v)} />
                  <div className="grid grid-cols-5 gap-3">
                    <FormField label="BreakPilot" value={!!item.breakpilot} onChange={v => update('breakpilot', v)} type="checkbox" />
                    <FormField label="Proliance" value={!!item.proliance} onChange={v => update('proliance', v)} type="checkbox" />
                    <FormField label="DataGuard" value={!!item.dataguard} onChange={v => update('dataguard', v)} type="checkbox" />
                    <FormField label="heyData" value={!!item.heydata} onChange={v => update('heydata', v)} type="checkbox" />
                    <FormField label="Differentiator" value={!!item.is_differentiator} onChange={v => update('is_differentiator', v)} type="checkbox" />
                  </div>
                </div>
              )}
            />
          </div>
        )

      case 'milestones':
        return (
          <div className="p-4">
            <CardList
              items={data as R[]}
              onChange={updateData}
              titleKey="title_en"
              subtitleKey="milestone_date"
              addLabel="Add milestone"
              renderCard={(item, update) => (
                <div className="space-y-3">
                  <BilingualField label="Title" valueDe={item.title_de as string || ''} valueEn={item.title_en as string || ''} onChangeDe={v => update('title_de', v)} onChangeEn={v => update('title_en', v)} />
                  <BilingualField label="Description" valueDe={item.description_de as string || ''} valueEn={item.description_en as string || ''} onChangeDe={v => update('description_de', v)} onChangeEn={v => update('description_en', v)} multiline />
                  <div className="grid grid-cols-3 gap-4">
                    <FormField label="Date" value={item.milestone_date as string || ''} onChange={v => update('milestone_date', v)} />
                    <FormField label="Status" value={item.status as string || ''} onChange={v => update('status', v)} type="select" options={[
                      { value: 'completed', label: 'Completed' }, { value: 'in_progress', label: 'In Progress' }, { value: 'planned', label: 'Planned' },
                    ]} />
                    <FormField label="Category" value={item.category as string || ''} onChange={v => update('category', v)} />
                  </div>
                </div>
              )}
            />
          </div>
        )

      case 'metrics':
        return (
          <div className="p-4">
            <CardList
              items={data as R[]}
              onChange={updateData}
              titleKey="metric_name"
              subtitleKey="value"
              addLabel="Add metric"
              renderCard={(item, update) => (
                <div className="space-y-3">
                  <FormField label="Metric Key" value={item.metric_name as string || ''} onChange={v => update('metric_name', v)} />
                  <BilingualField label="Label" valueDe={item.label_de as string || ''} valueEn={item.label_en as string || ''} onChangeDe={v => update('label_de', v)} onChangeEn={v => update('label_en', v)} />
                  <div className="grid grid-cols-3 gap-4">
                    <FormField label="Value" value={item.value as string || ''} onChange={v => update('value', v)} />
                    <FormField label="Unit" value={item.unit as string || ''} onChange={v => update('unit', v)} />
                    <FormField label="Is Live" value={!!item.is_live} onChange={v => update('is_live', v)} type="checkbox" />
                  </div>
                </div>
              )}
            />
          </div>
        )

      case 'funding':
        return (
          <div className="space-y-4 p-4">
            <FormField label="Round Name" value={single.round_name as string || ''} onChange={v => updateSingle('round_name', v)} />
            <div className="grid grid-cols-3 gap-4">
              <FormField label="Amount (EUR)" value={single.amount_eur as number || 0} onChange={v => updateSingle('amount_eur', v)} type="number" />
              <FormField label="Instrument" value={single.instrument as string || ''} onChange={v => updateSingle('instrument', v)} />
              <FormField label="Target Date" value={single.target_date as string || ''} onChange={v => updateSingle('target_date', v)} type="date" />
            </div>
            <FormField label="Status" value={single.status as string || ''} onChange={v => updateSingle('status', v)} type="select" options={[
              { value: 'planned', label: 'Planned' }, { value: 'in_progress', label: 'In Progress' }, { value: 'completed', label: 'Completed' },
            ]} />
            <div>
              <label className="block text-xs font-medium text-white/60 uppercase tracking-wider mb-2">Use of Funds</label>
              <RowTable
                rows={(single.use_of_funds as R[]) || []}
                onChange={v => updateSingle('use_of_funds', v)}
                columns={[
                  { key: 'category', label: 'Category' },
                  { key: 'percentage', label: '%', type: 'number' },
                  { key: 'label_de', label: 'Label DE' },
                  { key: 'label_en', label: 'Label EN' },
                ]}
              />
            </div>
          </div>
        )

      case 'products':
        return (
          <div className="p-4">
            <CardList
              items={data as R[]}
              onChange={updateData}
              titleKey="name"
              subtitleKey="hardware"
              addLabel="Add product"
              renderCard={(item, update) => (
                <div className="space-y-3">
                  <div className="grid grid-cols-2 gap-4">
                    <FormField label="Name" value={item.name as string || ''} onChange={v => update('name', v)} />
                    <FormField label="Hardware" value={item.hardware as string || ''} onChange={v => update('hardware', v)} />
                  </div>
                  <div className="grid grid-cols-3 gap-4">
                    <FormField label="HW Cost (EUR)" value={item.hardware_cost_eur as number || 0} onChange={v => update('hardware_cost_eur', v)} type="number" />
                    <FormField label="Monthly Price (EUR)" value={item.monthly_price_eur as number || 0} onChange={v => update('monthly_price_eur', v)} type="number" />
                    <FormField label="Operating Cost (EUR)" value={item.operating_cost_eur as number || 0} onChange={v => update('operating_cost_eur', v)} type="number" />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <FormField label="LLM Model" value={item.llm_model as string || ''} onChange={v => update('llm_model', v)} />
                    <FormField label="LLM Size" value={item.llm_size as string || ''} onChange={v => update('llm_size', v)} />
                  </div>
                  <BilingualField label="LLM Capability" valueDe={item.llm_capability_de as string || ''} valueEn={item.llm_capability_en as string || ''} onChangeDe={v => update('llm_capability_de', v)} onChangeEn={v => update('llm_capability_en', v)} multiline />
                  <div className="grid grid-cols-2 gap-4">
                    <ArrayField label="Features (DE)" values={(item.features_de as string[]) || []} onChange={v => update('features_de', v)} />
                    <ArrayField label="Features (EN)" values={(item.features_en as string[]) || []} onChange={v => update('features_en', v)} />
                  </div>
                  <FormField label="Popular" value={!!item.is_popular} onChange={v => update('is_popular', v)} type="checkbox" />
                </div>
              )}
            />
          </div>
        )

      case 'fm_scenarios':
        return (
          <div className="p-4">
            <CardList
              items={data as R[]}
              onChange={updateData}
              titleKey="name"
              subtitleKey="description"
              addLabel="Add scenario"
              renderCard={(item, update) => (
                <div className="space-y-3">
                  <FormField label="Name" value={item.name as string || ''} onChange={v => update('name', v)} />
                  <FormField label="Description" value={item.description as string || ''} onChange={v => update('description', v)} />
                  <div className="grid grid-cols-2 gap-4">
                    <FormField label="Color" value={item.color as string || '#6366f1'} onChange={v => update('color', v)} type="color" />
                    <FormField label="Default" value={!!item.is_default} onChange={v => update('is_default', v)} type="checkbox" />
                  </div>
                </div>
              )}
            />
          </div>
        )

      case 'fm_assumptions':
        // Reuse the inline table approach from the FM editor (already works well for this)
        return (
          <div className="p-4">
            <RowTable
              rows={data as R[]}
              onChange={updateData}
              columns={[
                { key: 'key', label: 'Key' },
                { key: 'label_de', label: 'Label DE' },
                { key: 'label_en', label: 'Label EN' },
                { key: 'category', label: 'Category' },
                { key: 'unit', label: 'Unit' },
              ]}
              addLabel="Add assumption"
            />
            <p className="text-[10px] text-white/30 mt-2">Note: values, min/max/step are best edited via "Edit as JSON" mode for complex types.</p>
          </div>
        )

      default:
        return <div className="p-4 text-white/40">No editor for this table</div>
    }
  }

  return (
    <div className="space-y-6">
      <Link href="/pitch-admin/versions" className="inline-flex items-center gap-2 text-sm text-white/50 hover:text-white/80">
        <ArrowLeft className="w-4 h-4" /> Back to versions
      </Link>

      {/* Header */}
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <h1 className="text-2xl font-semibold text-white">{version.name}</h1>
            <span className={`text-[9px] px-2 py-0.5 rounded-full border uppercase font-semibold ${
              isDraft ? 'bg-amber-500/15 text-amber-300 border-amber-500/30' : 'bg-green-500/15 text-green-300 border-green-500/30'
            }`}>{version.status}</span>
          </div>
          {version.description && <p className="text-sm text-white/50">{version.description}</p>}
        </div>
        <div className="flex items-center gap-2">
          <Link
            href={`/pitch-preview/${id}`}
            target="_blank"
            className="bg-white/[0.06] hover:bg-white/[0.1] text-white text-sm px-4 py-2 rounded-lg flex items-center gap-2"
          >
            <Eye className="w-4 h-4" /> Preview
          </Link>
          {isDraft && (
            <button onClick={commitVersion} className="bg-green-500/15 hover:bg-green-500/25 text-green-300 text-sm px-4 py-2 rounded-lg flex items-center gap-2">
              <Lock className="w-4 h-4" /> Commit
            </button>
          )}
          <button onClick={forkVersion} className="bg-indigo-500/15 hover:bg-indigo-500/25 text-indigo-300 text-sm px-4 py-2 rounded-lg flex items-center gap-2">
            <GitFork className="w-4 h-4" /> Fork
          </button>
          {version.parent_id && (
            <Link href={`/pitch-admin/versions/${id}/diff/${version.parent_id}`} className="bg-white/[0.06] hover:bg-white/[0.1] text-white text-sm px-4 py-2 rounded-lg">
              Diff
            </Link>
          )}
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 overflow-x-auto pb-1">
        {TABLE_NAMES.map(t => (
          <button
            key={t}
            onClick={() => { if (dirty && !confirm('Discard unsaved changes?')) return; setActiveTab(t); setDirty(false); setJsonMode(false) }}
            className={`px-3 py-1.5 rounded-lg text-xs whitespace-nowrap transition-colors ${
              activeTab === t
                ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30'
                : 'bg-white/[0.04] text-white/40 border border-transparent hover:text-white/60'
            }`}
          >
            {TABLE_LABELS[t]}
          </button>
        ))}
      </div>

      {/* Editor */}
      <div className="bg-white/[0.04] border border-white/[0.06] rounded-2xl overflow-hidden">
        <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.06]">
          <div className="flex items-center gap-3">
            <span className="text-sm font-semibold text-white">{TABLE_LABELS[activeTab]}</span>
            {dirty && <span className="text-[9px] px-2 py-0.5 rounded bg-amber-500/20 text-amber-300">Unsaved</span>}
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={() => setJsonMode(!jsonMode)}
              className={`text-[10px] px-2 py-1 rounded flex items-center gap-1 transition-colors ${
                jsonMode ? 'bg-indigo-500/20 text-indigo-300' : 'bg-white/[0.04] text-white/40 hover:text-white/60'
              }`}
            >
              <Code className="w-3 h-3" /> {jsonMode ? 'Form' : 'JSON'}
            </button>
            {isDraft && (
              <button
                onClick={saveTable}
                disabled={saving || !dirty}
                className="bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium px-4 py-1.5 rounded-lg flex items-center gap-2 disabled:opacity-30"
              >
                <Save className="w-3.5 h-3.5" /> {saving ? 'Saving…' : 'Save'}
              </button>
            )}
          </div>
        </div>
        {renderEditor()}
      </div>

      {!isDraft && <p className="text-xs text-white/30 text-center">Committed — read-only. Fork to edit.</p>}

      {toast && (
        <div className="fixed bottom-6 right-6 bg-indigo-500/20 border border-indigo-500/40 text-indigo-200 text-sm px-4 py-2 rounded-lg backdrop-blur-sm z-50">
          {toast}
        </div>
      )}
    </div>
  )
}
