import { redirect } from "next/navigation";
import Link from "next/link";
import {
  ArrowRightIcon,
  CreditCardIcon,
  DollarSignIcon,
  LayersIcon,
  PlusIcon,
  SlidersHorizontalIcon,
  TrendingUpIcon,
  WalletIcon,
} from "lucide-react";

import { auth } from "@/lib/auth";
import { AppSidebar } from "@/components/app-sidebar";
import { AppHeader } from "@/components/app-header";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  SidebarInset,
  SidebarProvider,
} from "@/components/ui/sidebar";

export default async function HomePage() {
  const session = await auth();

  // 若用户未登录，由于 proxy 会拦截并重定向，作为服务端页面增加双重保障
  if (!session?.user) {
    redirect("/login");
  }

  const user = session.user;
  const userName = user.name || "Fluxent 用户";
  const userEmail = user.email || "";
  const userAvatar = user.image || null;

  return (
    <SidebarProvider>
      <AppSidebar
        user={{
          name: userName,
          email: userEmail,
          avatar: userAvatar,
        }}
      />
      <SidebarInset>
        <AppHeader title="控制台" />

        {/* Inset Main Dashboard Content */}
        <div className="flex flex-1 flex-col gap-6 p-4 md:p-6 lg:p-8">
          {/* Welcome greeting banner */}
          <div className="relative overflow-hidden rounded-2xl border border-border/80 bg-gradient-to-br from-card via-card to-muted/40 p-6 md:p-8">
            <div className="relative z-10 flex flex-col gap-3 md:max-w-2xl">
              <h1 className="font-heading text-2xl font-bold tracking-tight text-foreground md:text-3xl">
                欢迎回来，{userName}
              </h1>
              <p className="text-sm text-muted-foreground leading-relaxed">
                这是您的 Fluxent 多币种资产与记账中心。通过左侧导航栏，您可以轻松追踪你的资金流动、管理银行与支付卡账户、维护清晰的收支流水。
              </p>

              <div className="mt-2 flex flex-wrap items-center gap-3">
                <Button size="sm" className="text-xs">
                  <PlusIcon data-icon="inline-start" />
                  记一笔交易
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  className="text-xs"
                  render={<Link href="/accounts" />}
                  nativeButton={false}
                >
                  <LayersIcon data-icon="inline-start" />
                  管理资金账户
                </Button>
              </div>
            </div>

            {/* Subtle background decoration */}
            <div className="pointer-events-none absolute -right-12 -bottom-12 size-64 rounded-full bg-primary/5 blur-2xl" />
          </div>

          {/* Quick Metrics & Highlights Cards (3 columns on desktop) */}
          <div className="grid gap-4 md:grid-cols-3">
            <Card className="border-border/70 bg-card/60 backdrop-blur-xs">
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-xs font-medium text-muted-foreground">
                  总资产估值 (CNY)
                </CardTitle>
                <DollarSignIcon className="size-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold tracking-tight">¥ 0.00</div>
                <p className="mt-1 text-[11px] text-muted-foreground">
                  暂未录入资金账户余额
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/70 bg-card/60 backdrop-blur-xs">
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-xs font-medium text-muted-foreground">
                  活跃账户与卡片
                </CardTitle>
                <WalletIcon className="size-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold tracking-tight">0</div>
                <p className="mt-1 text-[11px] text-muted-foreground">
                  支持银行卡、信用卡、电子钱包
                </p>
              </CardContent>
            </Card>

            <Card className="border-border/70 bg-card/60 backdrop-blur-xs">
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-xs font-medium text-muted-foreground">
                  本月记账笔数
                </CardTitle>
                <TrendingUpIcon className="size-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold tracking-tight">0</div>
                <p className="mt-1 text-[11px] text-muted-foreground">
                  全场景交易流水自动归集
                </p>
              </CardContent>
            </Card>
          </div>

          {/* Next Steps / Feature Guide (3 columns) */}
          <div className="flex flex-col gap-4">
            <h2 className="font-heading text-base font-semibold tracking-tight text-foreground">
              开始搭建您的资产版图
            </h2>
            <div className="grid gap-4 md:grid-cols-3">
              <Link
                href="/accounts"
                className="group flex flex-col justify-between rounded-xl border border-border/80 bg-card p-5 transition-all hover:border-foreground/30 hover:shadow-sm"
              >
                <div className="flex flex-col gap-2">
                  <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <CreditCardIcon className="size-4.5" />
                  </div>
                  <h3 className="font-heading text-sm font-semibold text-foreground">
                    1. 添加账户与支付渠道
                  </h3>
                  <p className="text-xs text-muted-foreground leading-relaxed">
                    录入您的现金账户、活期存款，或绑定支持港币、美元、日元结算的跨境信用卡与电子钱包。
                  </p>
                </div>
                <div className="mt-4 flex items-center gap-1 text-xs font-medium text-primary">
                  <span>去配置账户</span>
                  <ArrowRightIcon
                    data-icon="inline-end"
                    className="size-3.5 transition-transform group-hover:translate-x-0.5"
                  />
                </div>
              </Link>

              <div className="group flex flex-col justify-between rounded-xl border border-border/80 bg-card p-5 transition-all hover:border-foreground/30 hover:shadow-sm">
                <div className="flex flex-col gap-2">
                  <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <LayersIcon className="size-4.5" />
                  </div>
                  <h3 className="font-heading text-sm font-semibold text-foreground">
                    2. 建立首笔复式流水
                  </h3>
                  <p className="text-xs text-muted-foreground leading-relaxed">
                    支持自动计算交易币种到入账币种的清算汇率与手续费，让每一分折损清清楚楚。
                  </p>
                </div>
                <div className="mt-4 flex items-center gap-1 text-xs font-medium text-primary">
                  <span>新增记账</span>
                  <ArrowRightIcon
                    data-icon="inline-end"
                    className="size-3.5 transition-transform group-hover:translate-x-0.5"
                  />
                </div>
              </div>

              <div className="group flex flex-col justify-between rounded-xl border border-border/80 bg-card p-5 transition-all hover:border-foreground/30 hover:shadow-sm">
                <div className="flex flex-col gap-2">
                  <div className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
                    <SlidersHorizontalIcon className="size-4.5" />
                  </div>
                  <h3 className="font-heading text-sm font-semibold text-foreground">
                    3. 账户首选项与设置
                  </h3>
                  <p className="text-xs text-muted-foreground leading-relaxed">
                    配置个人偏好货币、导出记账数据或连接外部服务。
                  </p>
                </div>
                <div className="mt-4 flex items-center gap-1 text-xs font-medium text-primary">
                  <span>偏好设置</span>
                  <ArrowRightIcon
                    data-icon="inline-end"
                    className="size-3.5 transition-transform group-hover:translate-x-0.5"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}