import { useState } from 'react'
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts'
import { Card, CardHeader } from '@/components/ui/Card'
import { cn } from '@/lib/utils'

const data = [
  { month: 'Jan', revenue: 42000, target: 45000 },
  { month: 'Feb', revenue: 48000, target: 46000 },
  { month: 'Mar', revenue: 51000, target: 48000 },
  { month: 'Apr', revenue: 47000, target: 50000 },
  { month: 'May', revenue: 56000, target: 52000 },
  { month: 'Jun', revenue: 62000, target: 55000 },
  { month: 'Jul', revenue: 58000, target: 57000 },
  { month: 'Aug', revenue: 67000, target: 60000 },
  { month: 'Sep', revenue: 71000, target: 63000 },
  { month: 'Oct', revenue: 69000, target: 66000 },
  { month: 'Nov', revenue: 78000, target: 70000 },
  { month: 'Dec', revenue: 85000, target: 75000 },
]

const tabs = [
  { key: 'revenue', label: 'Revenue' },
  { key: 'mrr', label: 'MRR' },
  { key: 'arr', label: 'ARR' },
]

function formatK(value: number): string {
  return `€${(value / 1000).toFixed(0)}k`
}

export function RevenueChart() {
  const [activeTab, setActiveTab] = useState('revenue')

  return (
    <Card>
      <CardHeader
        title="Revenue Overview"
        subtitle="Monthly revenue vs target"
        action={
          <div className="flex items-center gap-1 bg-bg rounded-xl p-1">
            {tabs.map((tab) => (
              <button
                key={tab.key}
                onClick={() => setActiveTab(tab.key)}
                className={cn(
                  'px-3 py-1.5 text-xs font-medium rounded-lg transition-colors',
                  activeTab === tab.key
                    ? 'bg-surface text-text-primary shadow-sm'
                    : 'text-text-secondary hover:text-text-primary'
                )}
              >
                {tab.label}
              </button>
            ))}
          </div>
        }
      />
      <div className="h-[280px]">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={data} margin={{ top: 5, right: 5, left: -10, bottom: 0 }}>
            <defs>
              <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#2563EB" stopOpacity={0.08} />
                <stop offset="95%" stopColor="#2563EB" stopOpacity={0} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.04)" vertical={false} />
            <XAxis
              dataKey="month"
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 11, fill: '#9CA3AF' }}
              dy={8}
            />
            <YAxis
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 11, fill: '#9CA3AF' }}
              tickFormatter={formatK}
              dx={-5}
            />
            <Tooltip
              content={({ active, payload, label }) => {
                if (!active || !payload?.length) return null
                return (
                  <div className="bg-surface rounded-xl dropdown-shadow border border-border/60 px-4 py-3">
                    <p className="text-xs font-medium text-text-secondary mb-2">{label}</p>
                    {payload.map((p, i) => (
                      <div key={i} className="flex items-center gap-2 text-sm">
                        <div
                          className="w-2 h-2 rounded-full"
                          style={{ backgroundColor: p.color || '#2563EB' }}
                        />
                        <span className="text-text-secondary">{p.name}:</span>
                        <span className="font-semibold text-text-primary">
                          €{Number(p.value).toLocaleString()}
                        </span>
                      </div>
                    ))}
                  </div>
                )
              }}
            />
            <Area
              type="monotone"
              dataKey="revenue"
              stroke="#2563EB"
              strokeWidth={2}
              fill="url(#colorRevenue)"
              dot={false}
              activeDot={{ r: 4, strokeWidth: 0, fill: '#2563EB' }}
            />
            <Area
              type="monotone"
              dataKey="target"
              stroke="#9CA3AF"
              strokeWidth={1.5}
              strokeDasharray="4 4"
              fill="none"
              dot={false}
            />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </Card>
  )
}
