import Link from "next/link";
import { Crown, Mail, Calendar } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { logoutUserAction } from "@/lib/actions/user-auth";
import {
  getActiveSubscription,
  requireUser,
  userHasActiveMembership,
} from "@/lib/user-auth";

export const metadata = {
  title: "我的帳號",
};

export default async function AccountPage() {
  const user = await requireUser();
  const [isMember, subscription] = await Promise.all([
    userHasActiveMembership(user.id),
    getActiveSubscription(user.id),
  ]);

  return (
    <div className="py-12 sm:py-16">
      <div className="mx-auto max-w-2xl space-y-6 px-4 sm:px-6">
        <h1 className="text-2xl font-bold">我的帳號</h1>

        <Card>
          <CardHeader>
            <CardTitle className="text-base">基本資料</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            <div className="flex items-center gap-2">
              <Mail className="size-4 text-primary" />
              {user.email}
            </div>
            {user.name && <p>暱稱：{user.name}</p>}
            <form action={logoutUserAction}>
              <Button type="submit" variant="outline" size="sm">
                登出
              </Button>
            </form>
          </CardContent>
        </Card>

        <Card className={isMember ? "border-primary/40" : ""}>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <Crown className="size-4 text-primary" />
              會員狀態
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            {isMember && subscription ? (
              <>
                <p className="font-medium text-primary">✓ 會員有效中</p>
                <p>方案：{subscription.plan.nameZh}</p>
                <div className="flex items-center gap-2 text-muted-foreground">
                  <Calendar className="size-4" />
                  到期日：
                  {new Date(subscription.expiresAt).toLocaleDateString("zh-TW", {
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                  })}
                </div>
              </>
            ) : (
              <>
                <p className="text-muted-foreground">您尚未訂閱會員</p>
                <Button
                  render={<Link href="/membership" />}
                  nativeButton={false}
                  className="bg-primary text-primary-foreground"
                >
                  查看會員方案
                </Button>
              </>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}