'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { ArrowRight } from 'lucide-react'

interface Scenario {
  id: string
  name: string
  description: string
  is_default: boolean
  color: string
  assumptions: Array<{ id: string; key: string }>
}

export default function FinancialModelPage() {
  const [scenarios, setScenarios] = useState<Scenario[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/admin/fm/scenarios')
      .then(r => r.json())
      .then(d => setScenarios(d.scenarios || []))
      .finally(() => setLoading(false))
  }, [])

  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>
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold text-white">Financial Model</h1>
        <p className="text-sm text-white/50 mt-1">
          Edit default scenarios and assumptions. Investor snapshots are not affected.
        </p>
      </div>

      <div className="grid md:grid-cols-2 gap-4">
        {scenarios.map(s => (
          <Link
            key={s.id}
            href={`/pitch-admin/financial-model/${s.id}`}
            className="bg-white/[0.04] border border-white/[0.06] hover:border-white/[0.15] rounded-2xl p-5 transition-colors block"
          >
            <div className="flex items-start justify-between gap-3 mb-3">
              <div className="min-w-0">
                <div className="flex items-center gap-2 mb-1">
                  <div
                    className="w-3 h-3 rounded-full"
                    style={{ backgroundColor: s.color }}
                  />
                  <h3 className="text-base font-semibold text-white">{s.name}</h3>
                  {s.is_default && (
                    <span className="text-[9px] px-1.5 py-0.5 rounded bg-indigo-500/20 text-indigo-300 uppercase font-semibold">
                      Default
                    </span>
                  )}
                </div>
                {s.description && <p className="text-sm text-white/50">{s.description}</p>}
              </div>
              <ArrowRight className="w-4 h-4 text-white/30 mt-1 shrink-0" />
            </div>
            <div className="text-xs text-white/40">
              {s.assumptions.length} assumption{s.assumptions.length === 1 ? '' : 's'}
            </div>
          </Link>
        ))}
      </div>
    </div>
  )
}
