import { useState, useEffect } from "react"
import {
  BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer,
  PieChart, Pie, Cell, LineChart, Line,
} from "recharts"
import { financeApi } from "../../api/finance"

const COLORS = [
  "#0D4F4F", "#F7B538", "#6366f1", "#22c55e", "#ef4444",
  "#8b5cf6", "#0ea5e9", "#f97316", "#ec4899", "#14b8a6",
  "#64748b", "#a855f7", "#78716c",
]

const fmt = (n) => Number(n).toLocaleString("ru-RU") + " ₽"

const MONTH_NAMES = [
  "", "Янв", "Фев", "Мар", "Апр", "Май", "Июн",
  "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек",
]

export default function FinanceAnalytics({ month, year }) {
  const [analytics, setAnalytics] = useState(null)
  const [summary, setSummary] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setLoading(true)
    Promise.all([
      financeApi.getAnalytics({ months: 6 }),
      financeApi.getSummary({ month, year }),
    ])
      .then(([a, s]) => {
        setAnalytics(a)
        setSummary(s)
      })
      .catch(console.error)
      .finally(() => setLoading(false))
  }, [month, year])

  if (loading) {
    return (
      <div className="space-y-4">
        {[1, 2, 3].map((i) => (
          <div key={i} className="card p-8 animate-pulse">
            <div className="h-40 bg-gray-200 dark:bg-gray-800 rounded" />
          </div>
        ))}
      </div>
    )
  }

  if (!analytics || !summary) return null

  const expenseCategories = (summary.by_category || []).filter(
    (c) => c.type === "expense"
  )
  const barData = expenseCategories.map((c) => ({
    name: c.category_emoji + " " + c.category_name,
    value: c.amount,
  }))
  const pieData = barData

  const monthlyData = (analytics.monthly_trend || []).map((m) => ({
    month: MONTH_NAMES[parseInt(m.month.slice(5))] || m.month,
    income: m.income,
    expense: m.expense,
  }))

  const comp = analytics.comparison_prev_month
  const diffPct = Math.abs(Math.round(comp.diff_percent))
  const isUp = comp.diff_percent > 0

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 gap-3">
        <div className="card p-4">
          <p className="text-xs text-gray-500 dark:text-gray-400">
            Всего расходов
          </p>
          <p className="text-xl font-bold text-gray-900 dark:text-white">
            {fmt(summary.total_expense)}
          </p>
          <p
            className={`text-xs mt-1 ${isUp ? "text-red-500" : "text-green-500"}`}
          >
            {isUp ? "↑" : "↓"} {diffPct}% vs пред. месяц
          </p>
        </div>
        <div className="card p-4">
          <p className="text-xs text-gray-500 dark:text-gray-400">
            В среднем / день
          </p>
          <p className="text-xl font-bold text-gray-900 dark:text-white">
            {fmt(Math.round(analytics.avg_daily_expense))}
          </p>
        </div>
      </div>

      {barData.length > 0 && (
        <div className="card p-5">
          <h3 className="font-display font-bold text-gray-900 dark:text-white mb-4">
            Расходы по категориям
          </h3>
          <div className="h-64">
            <ResponsiveContainer>
              <BarChart data={barData} layout="vertical" margin={{ left: 10 }}>
                <XAxis
                  type="number"
                  tick={{ fontSize: 10 }}
                  stroke="#94a3b8"
                  tickFormatter={(v) => v / 1000 + "к"}
                />
                <YAxis
                  type="category"
                  dataKey="name"
                  tick={{ fontSize: 11 }}
                  stroke="#94a3b8"
                  width={120}
                />
                <Tooltip formatter={(v) => fmt(v)} />
                <Bar dataKey="value" radius={[0, 6, 6, 0]}>
                  {barData.map((_, i) => (
                    <Cell key={i} fill={COLORS[i % COLORS.length]} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      )}

      {pieData.length > 0 && (
        <div className="card p-5">
          <h3 className="font-display font-bold text-gray-900 dark:text-white mb-4">
            Доля категорий
          </h3>
          <div className="flex items-start gap-4">
            <div className="w-44 h-44 flex-shrink-0">
              <ResponsiveContainer>
                <PieChart>
                  <Pie
                    data={pieData}
                    innerRadius={45}
                    outerRadius={75}
                    dataKey="value"
                    stroke="none"
                  >
                    {pieData.map((_, i) => (
                      <Cell key={i} fill={COLORS[i % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip formatter={(v) => fmt(v)} />
                </PieChart>
              </ResponsiveContainer>
            </div>
            <div className="space-y-1.5 pt-2">
              {pieData.map((c, i) => (
                <div key={i} className="flex items-center gap-2 text-xs">
                  <div
                    className="w-2.5 h-2.5 rounded-full flex-shrink-0"
                    style={{ backgroundColor: COLORS[i] }}
                  />
                  <span className="text-gray-600 dark:text-gray-400 truncate max-w-[100px]">
                    {c.name}
                  </span>
                  <span className="ml-auto font-semibold text-gray-900 dark:text-white">
                    {Math.round(
                      (c.value / summary.total_expense) * 100
                    )}
                    %
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {monthlyData.length > 0 && (
        <div className="card p-5">
          <h3 className="font-display font-bold text-gray-900 dark:text-white mb-4">
            Тренд по месяцам
          </h3>
          <div className="h-48">
            <ResponsiveContainer>
              <LineChart data={monthlyData}>
                <XAxis
                  dataKey="month"
                  tick={{ fontSize: 12 }}
                  stroke="#94a3b8"
                />
                <YAxis
                  tick={{ fontSize: 10 }}
                  stroke="#94a3b8"
                  tickFormatter={(v) => v / 1000 + "к"}
                />
                <Tooltip formatter={(v) => fmt(v)} />
                <Line
                  type="monotone"
                  dataKey="income"
                  stroke="#22c55e"
                  strokeWidth={2}
                  name="Доходы"
                  dot={{ r: 3 }}
                />
                <Line
                  type="monotone"
                  dataKey="expense"
                  stroke="#ef4444"
                  strokeWidth={2}
                  name="Расходы"
                  dot={{ r: 3 }}
                />
              </LineChart>
            </ResponsiveContainer>
          </div>
          <div className="flex justify-center gap-6 mt-3">
            <div className="flex items-center gap-2 text-xs">
              <div className="w-3 h-0.5 bg-green-500" />
              <span className="text-gray-500">Доходы</span>
            </div>
            <div className="flex items-center gap-2 text-xs">
              <div className="w-3 h-0.5 bg-red-500" />
              <span className="text-gray-500">Расходы</span>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}