'use client';

import { useEffect, useState } from 'react';
import { User } from 'lucide-react';
import { AccountInfoClient } from '@/components/settings/AccountInfoManagement';
import { getAccountInfo } from '@/components/settings/AccountInfoManagement/actions';
import type { AccountInfo, TermsAgreement, MarketingConsent } from '@/components/settings/AccountInfoManagement/types';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

const DEFAULT_ACCOUNT_INFO: AccountInfo = {
  id: '',
  email: '',
  profileImage: undefined,
  role: '',
  status: 'active',
  isTenantMaster: false,
  createdAt: '',
  updatedAt: '',
};

const DEFAULT_MARKETING_CONSENT: MarketingConsent = {
  email: { agreed: false },
  sms: { agreed: false },
};

export default function AccountInfoPage() {
  const [accountInfo, setAccountInfo] = useState<AccountInfo>(DEFAULT_ACCOUNT_INFO);
  const [termsAgreements, setTermsAgreements] = useState<TermsAgreement[]>([]);
  const [marketingConsent, setMarketingConsent] = useState<MarketingConsent>(DEFAULT_MARKETING_CONSENT);
  const [error, setError] = useState<string | undefined>();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    getAccountInfo()
      .then(result => {
        if (result.success && result.data) {
          setAccountInfo(result.data.accountInfo);
          setTermsAgreements(result.data.termsAgreements);
          setMarketingConsent(result.data.marketingConsent);
        } else {
          setError(result.error);
        }
      })
      .finally(() => setIsLoading(false));
  }, []);

  if (isLoading) {
    return (
      <PageLayout>
        <PageHeader
          title="계정정보"
          description="계정 정보를 관리합니다"
          icon={User}
        />
        <div className="space-y-6">
          {/* 계정 정보 카드 스켈레톤 */}
          <Card>
            <CardHeader>
              <Skeleton className="h-5 w-24" />
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <Skeleton className="h-4 w-20" />
                <Skeleton className="h-24 w-24 rounded-full" />
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Skeleton className="h-4 w-16" />
                  <Skeleton className="h-10 w-full" />
                </div>
                <div className="space-y-2">
                  <Skeleton className="h-4 w-16" />
                  <Skeleton className="h-10 w-20" />
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Skeleton className="h-4 w-12" />
                  <Skeleton className="h-10 w-full" />
                </div>
                <div className="space-y-2">
                  <Skeleton className="h-4 w-12" />
                  <Skeleton className="h-10 w-full" />
                </div>
              </div>
            </CardContent>
          </Card>
          {/* 약관 동의 정보 카드 스켈레톤 */}
          <Card>
            <CardHeader>
              <Skeleton className="h-5 w-32" />
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Skeleton className="h-4 w-40" />
                  <Skeleton className="h-4 w-32" />
                </div>
                <div className="space-y-2">
                  <Skeleton className="h-4 w-40" />
                  <Skeleton className="h-4 w-32" />
                </div>
              </div>
              <div className="space-y-4">
                <Skeleton className="h-4 w-36" />
                <div className="space-y-3 pl-4">
                  <Skeleton className="h-5 w-full" />
                  <Skeleton className="h-5 w-full" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </PageLayout>
    );
  }

  return (
    <AccountInfoClient
      initialAccountInfo={accountInfo}
      initialTermsAgreements={termsAgreements}
      initialMarketingConsent={marketingConsent}
      error={error}
    />
  );
}