import { useState, useEffect } from "react"
import {
  PieChart, Pie, Cell, LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer,
} 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") + " ₽"

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

  useEffect(() => {
    setLoading(true)
    financeApi
      .getSummary({ month, year })
      .then(setSummary)
      .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-6 animate-pulse">
            <div className="h-8 bg-gray-200 dark:bg-gray-800 rounded w-1/2" />
          </div>
        ))}
      </div>
    )
  }

  if (!summary || (summary.total_income === 0 && summary.total_expense === 0)) {
    return (
      <div className="card p-12 text-center">
        <span className="text-5xl block mb-4">📊</span>
        <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">
          Нет данных
        </h3>
        <p className="text-gray-500 dark:text-gray-400">
          Добавьте первую транзакцию
        </p>
      </div>
    )
  }

  const expenseCategories = summary.by_category.filter((c) => c.type === "expense")
  const pieData = expenseCategories.map((c) => ({
    name: c.category_emoji + " " + c.category_name,
    value: c.amount,
  }))
  const dailyData = summary.daily.map((d) => ({
    day: d.date.slice(8, 10),
    amount: d.amount,
  }))

  return (
    <div className="space-y-6">
      <div className="card p-6 bg-gradient-to-br from-primary-950 to-primary-800 text-white">
        <p className="text-sm opacity-70">Баланс за месяц</p>
        <p className="text-3xl font-bold mt-1">{fmt(summary.balance)}</p>
        <div className="flex gap-6 mt-4">
          <div>
            <p className="text-xs opacity-60">Доходы</p>
            <p className="text-lg font-semibold text-green-300">
              +{fmt(summary.total_income)}
            </p>
          </div>
          <div>
            <p className="text-xs opacity-60">Расходы</p>
            <p className="text-lg font-semibold text-red-300">
              -{fmt(summary.total_expense)}
            </p>
          </div>
        </div>
      </div>

      {expenseCategories.length > 0 && (
        <div className="card p-5">
          <h3 className="font-display font-bold text-gray-900 dark:text-white mb-4">
            Топ расходов
          </h3>
          <div className="space-y-3">
            {expenseCategories.slice(0, 5).map((c, i) => (
              <div key={i} className="flex items-center gap-3">
                <span className="text-xl w-8 text-center">
                  {c.category_emoji}
                </span>
                <div className="flex-1">
                  <div className="flex justify-between mb-1">
                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                      {c.category_name}
                    </span>
                    <span className="text-sm font-semibold text-gray-900 dark:text-white">
                      {fmt(c.amount)}
                    </span>
                  </div>
                  <div className="h-2 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                    <div
                      className="h-full rounded-full"
                      style={{
                        width: Math.round(c.percentage) + "%",
                        backgroundColor: COLORS[i % COLORS.length],
                      }}
                    />
                  </div>
                </div>
              </div>
            ))}
          </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-center gap-4">
            <div className="w-40 h-40">
              <ResponsiveContainer>
                <PieChart>
                  <Pie
                    data={pieData}
                    innerRadius={40}
                    outerRadius={70}
                    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="flex-1 space-y-1">
              {pieData.slice(0, 6).map((c, i) => (
                <div key={i} className="flex items-center gap-2 text-xs">
                  <div
                    className="w-2.5 h-2.5 rounded-full"
                    style={{ backgroundColor: COLORS[i] }}
                  />
                  <span className="text-gray-600 dark:text-gray-400 truncate">
                    {c.name}
                  </span>
                  <span className="ml-auto font-medium text-gray-900 dark:text-white">
                    {Math.round(
                      (c.value / summary.total_expense) * 100
                    )}
                    %
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {dailyData.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={dailyData}>
                <XAxis dataKey="day" tick={{ fontSize: 12 }} stroke="#94a3b8" />
                <YAxis
                  tick={{ fontSize: 10 }}
                  stroke="#94a3b8"
                  tickFormatter={(v) => v / 1000 + "к"}
                />
                <Tooltip formatter={(v) => fmt(v)} />
                <Line
                  type="monotone"
                  dataKey="amount"
                  stroke="#0D4F4F"
                  strokeWidth={2}
                  dot={{ r: 4, fill: "#0D4F4F" }}
                />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>
      )}
    </div>
  )
}