'use client';

import { useEffect, useState } from 'react';
import { CreditCard } from 'lucide-react';
import { SubscriptionManagement } from '@/components/settings/SubscriptionManagement';
import { getSubscriptionData } from '@/components/settings/SubscriptionManagement/actions';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

export default function SubscriptionPage() {
  const [data, setData] = useState<Awaited<ReturnType<typeof getSubscriptionData>>['data']>(undefined);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    getSubscriptionData()
      .then(result => {
        setData(result.data);
      })
      .finally(() => setIsLoading(false));
  }, []);

  if (isLoading) {
    return (
      <PageLayout>
        <PageHeader
          title="구독관리"
          description="구독 정보를 관리합니다"
          icon={CreditCard}
        />
        {/* 헤더 액션 버튼 스켈레톤 */}
        <div className="flex justify-end gap-2 mb-4">
          <Skeleton className="h-10 w-32" />
          <Skeleton className="h-10 w-24" />
        </div>
        <div className="space-y-6">
          {/* 구독 정보 카드 그리드 스켈레톤 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {[1, 2, 3].map((i) => (
              <Card key={i}>
                <CardContent className="pt-6">
                  <Skeleton className="h-4 w-24 mb-2" />
                  <Skeleton className="h-8 w-32" />
                </CardContent>
              </Card>
            ))}
          </div>
          {/* 구독 정보 카드 스켈레톤 */}
          <Card>
            <CardContent className="pt-6">
              <Skeleton className="h-4 w-20 mb-2" />
              <Skeleton className="h-6 w-32 mb-6" />
              <div className="space-y-6">
                {[1, 2, 3].map((i) => (
                  <div key={i} className="flex items-center gap-4">
                    <Skeleton className="h-4 w-24 flex-shrink-0" />
                    <Skeleton className="h-2 flex-1" />
                    <Skeleton className="h-4 w-24" />
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </PageLayout>
    );
  }

  return <SubscriptionManagement initialData={data} />;
}