"use client";

import Link from "next/link";
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, BarChart, Bar, XAxis, YAxis } from "recharts";
import { Plus, Receipt, Target, RefreshCw, Wallet } from "lucide-react";
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import { EmptyState } from "@/components/shared/empty-state";
import { useTranslations, useLocale } from "@/lib/i18n/i18n-provider";
import { formatMoney, formatDate, clampPercent } from "@/lib/utils";
import type { Expense, Goal, Subscription } from "@/types/database";

const CATEGORY_COLORS: Record<string, string> = {
  food: "#3f8570",
  housing: "#5da28c",
  transport: "#8bc0ac",
  shopping: "#dcece5",
  entertainment: "#275548",
  health: "#22453b",
  bills: "#b6b6c0",
  subscriptions: "#6d6d7d",
  travel: "#8c8c9a",
  education: "#465464",
  other: "#d9d9de"
};

export function DashboardView({
  firstName,
  currency,
  monthlyIncome,
  thisMonthTotal,
  lastMonthTotal,
  byCategory,
  goals,
  subscriptions,
  recentExpenses
}: {
  firstName: string | null;
  currency: string;
  monthlyIncome: number;
  thisMonthTotal: number;
  lastMonthTotal: number;
  byCategory: Record<string, number>;
  goals: Goal[];
  subscriptions: Subscription[];
  recentExpenses: Expense[];
}) {
  const t = useTranslations();
  const locale = useLocale();
  const remaining = monthlyIncome - thisMonthTotal;
  const savings = Math.max(0, remaining);

  const pieData = Object.entries(byCategory).map(([category, amount]) => ({
    name: t(`expenses.categories.${category}`),
    value: amount,
    key: category
  }));

  const comparisonData = [
    { name: t("dashboard.monthlyComparison").split(" vs")[0] || "Last", amount: lastMonthTotal },
    { name: "This", amount: thisMonthTotal }
  ];

  return (
    <div className="space-y-6">
      <p className="text-sm text-ink-500">{t("dashboard.welcome", { name: firstName ?? "" })}</p>

      {/* Overview cards */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <OverviewCard icon={Wallet} label={t("dashboard.overview.income")} value={formatMoney(monthlyIncome, currency, locale)} />
        <OverviewCard icon={Receipt} label={t("dashboard.overview.expenses")} value={formatMoney(thisMonthTotal, currency, locale)} />
        <OverviewCard icon={Target} label={t("dashboard.overview.savings")} value={formatMoney(savings, currency, locale)} />
        <OverviewCard
          icon={RefreshCw}
          label={t("dashboard.overview.remaining")}
          value={formatMoney(remaining, currency, locale)}
          tone={remaining < 0 ? "danger" : "brand"}
        />
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Spending by category */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>{t("dashboard.spendingByCategory")}</CardTitle>
          </CardHeader>
          {pieData.length === 0 ? (
            <EmptyState title={t("dashboard.empty")} />
          ) : (
            <div className="flex flex-col items-center gap-4 sm:flex-row">
              <div className="h-56 w-56 shrink-0">
                <ResponsiveContainer>
                  <PieChart>
                    <Pie data={pieData} dataKey="value" nameKey="name" innerRadius={55} outerRadius={90} paddingAngle={2}>
                      {pieData.map((entry) => (
                        <Cell key={entry.key} fill={CATEGORY_COLORS[entry.key] ?? "#8bc0ac"} />
                      ))}
                    </Pie>
                    <Tooltip formatter={(v: number) => formatMoney(v, currency, locale)} />
                  </PieChart>
                </ResponsiveContainer>
              </div>
              <ul className="grid flex-1 grid-cols-1 gap-2 sm:grid-cols-2">
                {pieData.map((entry) => (
                  <li key={entry.key} className="flex items-center gap-2 text-sm text-ink-600">
                    <span
                      className="h-2.5 w-2.5 rounded-full"
                      style={{ backgroundColor: CATEGORY_COLORS[entry.key] ?? "#8bc0ac" }}
                    />
                    {entry.name}
                    <span className="ml-auto font-medium text-ink-900">
                      {formatMoney(entry.value, currency, locale)}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </Card>

        {/* Quick actions */}
        <Card>
          <CardHeader>
            <CardTitle>{t("dashboard.quickActions.title")}</CardTitle>
          </CardHeader>
          <div className="grid grid-cols-2 gap-2">
            <QuickAction href={`/${locale}/expenses`} icon={Receipt} label={t("dashboard.quickActions.addExpense")} />
            <QuickAction href={`/${locale}/expenses`} icon={Plus} label={t("dashboard.quickActions.addIncome")} />
            <QuickAction href={`/${locale}/goals`} icon={Target} label={t("dashboard.quickActions.createGoal")} />
            <QuickAction href={`/${locale}/subscriptions`} icon={RefreshCw} label={t("dashboard.quickActions.addSubscription")} />
          </div>
        </Card>
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Monthly comparison */}
        <Card>
          <CardHeader>
            <CardTitle>{t("dashboard.monthlyComparison")}</CardTitle>
          </CardHeader>
          <div className="h-40">
            <ResponsiveContainer>
              <BarChart data={comparisonData}>
                <XAxis dataKey="name" tick={{ fontSize: 12 }} axisLine={false} tickLine={false} />
                <YAxis hide />
                <Tooltip formatter={(v: number) => formatMoney(v, currency, locale)} />
                <Bar dataKey="amount" fill="#3f8570" radius={[6, 6, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </Card>

        {/* Savings goals */}
        <Card>
          <CardHeader>
            <CardTitle>{t("dashboard.savingsGoals")}</CardTitle>
          </CardHeader>
          {goals.length === 0 ? (
            <EmptyState title={t("goals.empty.title")} />
          ) : (
            <div className="space-y-4">
              {goals.map((g) => {
                const pct = clampPercent((Number(g.current_amount) / Number(g.target_amount)) * 100);
                return (
                  <div key={g.id}>
                    <div className="mb-1 flex justify-between text-sm">
                      <span className="font-medium text-ink-800">{g.name}</span>
                      <span className="text-ink-400">{pct}%</span>
                    </div>
                    <Progress value={pct} />
                  </div>
                );
              })}
            </div>
          )}
        </Card>

        {/* Upcoming subscriptions */}
        <Card>
          <CardHeader>
            <CardTitle>{t("dashboard.upcomingSubscriptions")}</CardTitle>
          </CardHeader>
          {subscriptions.length === 0 ? (
            <EmptyState title={t("subscriptions.empty.title")} />
          ) : (
            <ul className="space-y-3">
              {subscriptions.map((s) => (
                <li key={s.id} className="flex items-center justify-between text-sm">
                  <span className="text-ink-700">{s.name}</span>
                  <div className="text-right">
                    <div className="font-medium text-ink-900">{formatMoney(Number(s.price), s.currency, locale)}</div>
                    <div className="text-xs text-ink-400">{formatDate(s.next_payment_date, locale)}</div>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </Card>
      </div>

      {/* Recent transactions */}
      <Card>
        <CardHeader>
          <CardTitle>{t("dashboard.recentTransactions")}</CardTitle>
        </CardHeader>
        {recentExpenses.length === 0 ? (
          <EmptyState title={t("expenses.empty.title")} cta={t("expenses.empty.cta")} />
        ) : (
          <ul className="divide-y divide-ink-100">
            {recentExpenses.map((e) => (
              <li key={e.id} className="flex items-center justify-between py-3">
                <div>
                  <p className="text-sm font-medium text-ink-900">{e.description || t(`expenses.categories.${e.category}`)}</p>
                  <p className="text-xs text-ink-400">{formatDate(e.occurred_on, locale)}</p>
                </div>
                <div className="flex items-center gap-2">
                  <Badge>{t(`expenses.categories.${e.category}`)}</Badge>
                  <span className="text-sm font-semibold text-ink-900">
                    {formatMoney(Number(e.amount), e.currency, locale)}
                  </span>
                </div>
              </li>
            ))}
          </ul>
        )}
      </Card>
    </div>
  );
}

function OverviewCard({
  icon: Icon,
  label,
  value,
  tone = "neutral"
}: {
  icon: React.ElementType;
  label: string;
  value: string;
  tone?: "neutral" | "brand" | "danger";
}) {
  return (
    <Card>
      <div className="flex items-center gap-3">
        <div
          className={
            "flex h-9 w-9 items-center justify-center rounded-xl " +
            (tone === "danger" ? "bg-red-50 text-red-600" : "bg-brand-50 text-brand-700")
          }
        >
          <Icon className="h-4 w-4" aria-hidden="true" />
        </div>
        <div>
          <p className="text-xs text-ink-400">{label}</p>
          <p className="text-lg font-semibold text-ink-900">{value}</p>
        </div>
      </div>
    </Card>
  );
}

function QuickAction({ href, icon: Icon, label }: { href: string; icon: React.ElementType; label: string }) {
  return (
    <Link
      href={href}
      className="flex flex-col items-center justify-center gap-2 rounded-xl border border-ink-100 p-4 text-center text-xs font-medium text-ink-600 hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700"
    >
      <Icon className="h-4 w-4" aria-hidden="true" />
      {label}
    </Link>
  );
}