'use client';

import { useState } from 'react';
import { User, CreditCard, Receipt } from 'lucide-react';
import { ProfileSection } from '@/components/sections/ProfileSection';
import { SubscriptionSection } from '@/components/sections/SubscriptionSection';
import { ChoosePlanSection } from '@/components/sections/ChoosePlanSection';
import { BillingHistorySection } from '@/components/sections/BillingHistorySection';
import { cn } from '@/utils';

const SECTIONS = [
  { id: 'profile', label: 'Profile', icon: User },
  { id: 'plans', label: 'Plans', icon: CreditCard },
  { id: 'billing', label: 'Billing', icon: Receipt },
] as const;

export type MobileAccountSectionId = (typeof SECTIONS)[number]['id'];

interface MobileAccountViewProps {
  defaultSection?: MobileAccountSectionId;
}

export function MobileAccountView({ defaultSection = 'profile' }: MobileAccountViewProps) {
  const [activeSection, setActiveSection] = useState<MobileAccountSectionId>(defaultSection);

  return (
    <div className="flex flex-col h-[100dvh] overflow-hidden bg-background">
      <nav
        className="shrink-0 border-b border-border bg-background overflow-x-auto overscroll-x-contain"
        aria-label="Account sections"
      >
        <div className="flex gap-1 px-5 py-5 min-w-max sm:min-w-0">
          {SECTIONS.map(({ id, label, icon: Icon }) => {
            const isActive = activeSection === id;
            return (
              <button
                key={id}
                type="button"
                onClick={() => setActiveSection(id)}
                className={cn(
                  'inline-flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors touch-manipulation',
                  isActive
                    ? 'bg-brand-500/10 text-brand-600 dark:text-brand-300'
                    : 'text-muted-foreground hover:text-foreground hover:bg-accent',
                )}
                aria-current={isActive ? 'page' : undefined}
              >
                <Icon className="h-4 w-4 shrink-0" />
                {label}
              </button>
            );
          })}
        </div>
      </nav>

      <div className="flex-1 overflow-y-auto overscroll-y-contain px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
        <div className="max-w-lg mx-auto space-y-4 animate-fade-in">
          {activeSection === 'profile' && (
            <>
              <ProfileSection />
              <SubscriptionSection onChangePlan={() => setActiveSection('plans')} />
            </>
          )}
          {activeSection === 'plans' && <ChoosePlanSection compact />}
          {activeSection === 'billing' && (
            <BillingHistorySection showHeader={false} embedded />
          )}
        </div>
      </div>
    </div>
  );
}