"use client";

import { AreaChart } from "@/components/charts/AreaChart";
import { DonutChart } from "@/components/charts/DonutChart";
import { GaugeChart } from "@/components/charts/GaugeChart";
import { MiniBars } from "@/components/charts/MiniBars";
import { FactorRow } from "@/components/finance/FactorRow";
import { GoalCard } from "@/components/finance/GoalCard";
import { InsightCard } from "@/components/finance/InsightCard";
import { TransactionRow } from "@/components/finance/TransactionRow";
import { Card, StatCard } from "@/components/ui/Card";
import { Chip } from "@/components/ui/Chip";
import { ProgressBar } from "@/components/ui/ProgressBar";
import { goals, transactions } from "@/lib/data";
import type { ViewKey } from "./Sidebar";

export function DashboardView({ active }: { active: ViewKey }) {
  const views: Record<ViewKey, JSX.Element> = {
    overview: <Overview />,
    transactions: <Transactions />,
    budget: <Budget />,
    goals: <Goals />,
    networth: <NetWorth />,
    credit: <CreditRewards />,
    insights: <Insights />
  };
  return views[active];
}

function Overview() {
  return (
    <div className="space-y-5">
      <div className="grid gap-4 md:grid-cols-4">
        <StatCard label="Net worth" value="$184,220" detail="+$2,840 this month" />
        <StatCard label="Spent today" value="$93" detail="$61 below pace" tone="saffron" />
        <StatCard label="Flex left" value="$1,184" detail="17 days remaining" tone="indigo" />
        <StatCard label="FICO 8" value="742" detail="+21 in 90 days" tone="forest" />
      </div>
      <div className="grid gap-5 lg:grid-cols-[1.5fr_.9fr]">
        <Card>
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-bold text-ink dark:text-paper">Net worth trend</h2>
            <Chip>12 months</Chip>
          </div>
          <AreaChart values={[112, 116, 121, 129, 133, 141, 148, 153, 161, 169, 177, 184]} />
        </Card>
        <Card>
          <h2 className="text-xl font-bold text-ink dark:text-paper">Spending mix</h2>
          <div className="mt-6">
            <DonutChart segments={[{ label: "Needs", value: 48, color: "#0F6E56" }, { label: "Wants", value: 32, color: "#E8A23A" }, { label: "Goals", value: 20, color: "#7F77DD" }]} />
          </div>
        </Card>
      </div>
      <div className="grid gap-5 lg:grid-cols-2">
        <InsightCard title="Cash-flow cushion is improving" tag="AI coach" body="Your next 30 days look $420 stronger than last month because subscription spend dropped and payroll timing is favorable." />
        <InsightCard title="Rewards opportunity found" tag="Cards" body="Move grocery purchases to Sapphire Preferred through July 15 to earn an estimated $18 more in rewards." />
      </div>
    </div>
  );
}

function Transactions() {
  return (
    <Card>
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-bold text-ink dark:text-paper">Recent transactions</h2>
        <Chip tone="indigo">Undo-ready categorization</Chip>
      </div>
      <div className="mt-5 space-y-3">
        {transactions.map(([merchant, category, amount, date]) => <TransactionRow key={merchant} merchant={merchant} category={category} amount={amount} date={date} />)}
      </div>
    </Card>
  );
}

function Budget() {
  const categories = [["Housing", 62], ["Groceries", 84], ["Dining", 109], ["Transport", 42], ["Subscriptions", 77]] as const;
  return (
    <div className="grid gap-5 lg:grid-cols-[.9fr_1.1fr]">
      <Card>
        <div className="flex items-center justify-between">
          <h2 className="text-xl font-bold text-ink dark:text-paper">Flex budget</h2>
          <Chip>Default mode</Chip>
        </div>
        <div className="mt-8"><GaugeChart value={72} label="$93 safe to spend today" /></div>
      </Card>
      <Card>
        <h2 className="text-xl font-bold text-ink dark:text-paper">Category guardrails</h2>
        <div className="mt-5 space-y-5">
          {categories.map(([name, value]) => <ProgressBar key={name} label={name} value={value} />)}
        </div>
      </Card>
    </div>
  );
}

function Goals() {
  return <div className="grid gap-5 md:grid-cols-3">{goals.map((goal) => <GoalCard key={goal.name} {...goal} />)}</div>;
}

function NetWorth() {
  return (
    <div className="grid gap-5 lg:grid-cols-[1.2fr_.8fr]">
      <Card><h2 className="text-xl font-bold text-ink dark:text-paper">Assets over time</h2><AreaChart values={[122, 128, 136, 141, 152, 167, 184]} color="#7F77DD" /></Card>
      <Card><h2 className="text-xl font-bold text-ink dark:text-paper">Allocation</h2><div className="mt-6"><DonutChart segments={[{ label: "Cash", value: 18, color: "#1D9E75" }, { label: "Investments", value: 64, color: "#7F77DD" }, { label: "Retirement", value: 18, color: "#E8A23A" }]} /></div></Card>
    </div>
  );
}

function CreditRewards() {
  return (
    <div className="grid gap-5 lg:grid-cols-2">
      <Card>
        <h2 className="text-xl font-bold text-ink dark:text-paper">FICO 8 factors</h2>
        <div className="mt-4">
          <FactorRow label="Utilization" value="27%" detail="Below 30%, improving" />
          <FactorRow label="Payment history" value="100%" detail="No missed payments" />
          <FactorRow label="Credit age" value="6.2y" detail="Stable contributor" />
        </div>
      </Card>
      <Card>
        <h2 className="text-xl font-bold text-ink dark:text-paper">Rewards this month</h2>
        <div className="mt-6"><MiniBars values={[12, 18, 9, 24, 31, 22, 38]} /></div>
        <p className="mt-4 text-sm text-ink/62 dark:text-paper/62">Estimated $142 earned; $28 more available by shifting grocery spend.</p>
      </Card>
    </div>
  );
}

function Insights() {
  return (
    <div className="grid gap-5 md:grid-cols-3">
      <InsightCard tag="Budget" title="Dining is trending hot" body="You are 9% over the recommended pacing curve. Aartha can auto-adjust flex spend for the next 10 days." />
      <InsightCard tag="Subscription" title="Duplicate media spend" body="Two music services posted this month. Canceling one protects $132 annually." />
      <InsightCard tag="Goals" title="Emergency fund can arrive early" body="Rolling over unused flex could pull the target date from October to September." />
    </div>
  );
}