'use client';

import Link from 'next/link';
import { Calendar } from 'lucide-react';
import { ProtectedRoute } from '@/components/layout/ProtectedRoute';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ProfileSection } from '@/components/sections/ProfileSection';
import { SubscriptionSection } from '@/components/sections/SubscriptionSection';
import { ROUTES } from '@/constants';

function AccountContent() {
  return (
    <div className="relative min-h-[calc(100vh-4rem)] px-4 py-10">
      <div className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute top-0 left-1/4 w-[400px] h-[400px] rounded-full bg-brand-500/[0.03] dark:bg-brand-400/[0.05] blur-[100px]" />
      </div>

      <div className="max-w-2xl mx-auto space-y-6 animate-fade-in">
        <div>
          <h1 className="text-3xl font-bold">Account</h1>
          <p className="text-muted-foreground mt-1">Manage your profile and subscription</p>
        </div>

        <ProfileSection />
        <SubscriptionSection />

        {/* Billing History */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base flex items-center gap-2">
              <Calendar className="h-4 w-4 text-brand-500 dark:text-brand-300" /> Billing History
            </CardTitle>
          </CardHeader>
          <CardContent>
            <Button variant="glass" size="sm" asChild>
              <Link href={ROUTES.TRANSACTIONS}>View All Transactions</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

export default function AccountPage() {
  return (
    <ProtectedRoute>
      <AccountContent />
    </ProtectedRoute>
  );
}