sam-react-prod/src/components/settings/SubscriptionManagement/index.tsx

'use client';

import { useState, useCallback } from 'react';
import { CreditCard, Download, AlertTriangle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import type { SubscriptionInfo } from './types';
import { PLAN_LABELS } from './types';

// ===== Mock 데이터 =====
const mockSubscription: SubscriptionInfo = {
  lastPaymentDate: '2025-12-01',
  nextPaymentDate: '2025-12-01',
  subscriptionAmount: 500000,
  plan: 'premium',
  userCount: 100,
  userLimit: null, // 무제한
  storageUsed: 5.5,
  storageLimit: 10,
  apiCallsUsed: 8500,
  apiCallsLimit: 10000,
};

// ===== 날짜 포맷 함수 =====
const formatDate = (dateStr: string): string => {
  const date = new Date(dateStr);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `${year}년 ${month}월 ${day}일`;
};

// ===== 금액 포맷 함수 =====
const formatCurrency = (amount: number): string => {
  return new Intl.NumberFormat('ko-KR').format(amount) + '원';
};

export function SubscriptionManagement() {
  const [subscription] = useState<SubscriptionInfo>(mockSubscription);
  const [showCancelDialog, setShowCancelDialog] = useState(false);

  // ===== 자료 내보내기 =====
  const handleExportData = useCallback(() => {
    // TODO: 실제 자료 다운로드 처리
    console.log('자료 내보내기');
  }, []);

  // ===== 서비스 해지 =====
  const handleCancelService = useCallback(() => {
    // TODO: 실제 서비스 해지 처리
    console.log('서비스 해지 처리');
    setShowCancelDialog(false);
  }, []);

  // ===== Progress 계산 =====
  const storageProgress = (subscription.storageUsed / subscription.storageLimit) * 100;
  const apiProgress = (subscription.apiCallsUsed / subscription.apiCallsLimit) * 100;

  return (
    <>
      <PageLayout>
        {/* ===== 페이지 헤더 ===== */}
        <PageHeader
          title="구독관리"
          description="구독 정보를 관리합니다"
          icon={CreditCard}
        />

        {/* ===== 헤더 액션 버튼 ===== */}
        <div className="flex justify-end gap-2 mb-4">
          <Button variant="outline" onClick={handleExportData}>
            <Download className="w-4 h-4 mr-2" />
            자료 내보내기
          </Button>
          <Button
            variant="outline"
            className="border-red-200 text-red-600 hover:bg-red-50 hover:border-red-300"
            onClick={() => setShowCancelDialog(true)}
          >
            서비스 해지
          </Button>
        </div>

        <div className="space-y-6">
          {/* ===== 구독 정보 카드 영역 ===== */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {/* 최근 결제일시 */}
            <Card>
              <CardContent className="pt-6">
                <div className="text-sm text-muted-foreground mb-1">최근 결제일시</div>
                <div className="text-2xl font-bold">
                  {formatDate(subscription.lastPaymentDate)}
                </div>
              </CardContent>
            </Card>

            {/* 다음 결제일시 */}
            <Card>
              <CardContent className="pt-6">
                <div className="text-sm text-muted-foreground mb-1">다음 결제일시</div>
                <div className="text-2xl font-bold">
                  {formatDate(subscription.nextPaymentDate)}
                </div>
              </CardContent>
            </Card>

            {/* 구독금액 */}
            <Card>
              <CardContent className="pt-6">
                <div className="text-sm text-muted-foreground mb-1">구독금액</div>
                <div className="text-2xl font-bold">
                  {formatCurrency(subscription.subscriptionAmount)}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* ===== 구독 정보 영역 ===== */}
          <Card>
            <CardContent className="pt-6">
              <div className="text-sm text-muted-foreground mb-2">구독 정보</div>

              {/* 플랜명 */}
              <h3 className="text-xl font-bold mb-6">
                {PLAN_LABELS[subscription.plan]}
              </h3>

              {/* 사용량 정보 */}
              <div className="space-y-6">
                {/* 사용자 수 */}
                <div className="flex items-center gap-4">
                  <div className="w-24 text-sm text-muted-foreground flex-shrink-0">
                    사용자 수
                  </div>
                  <div className="flex-1">
                    <Progress value={subscription.userLimit ? (subscription.userCount / subscription.userLimit) * 100 : 30} className="h-2" />
                  </div>
                  <div className="text-sm text-blue-600 min-w-[100px] text-right">
                    {subscription.userCount}명 / {subscription.userLimit ? `${subscription.userLimit}명` : '무제한'}
                  </div>
                </div>

                {/* 저장 공간 */}
                <div className="flex items-center gap-4">
                  <div className="w-24 text-sm text-muted-foreground flex-shrink-0">
                    저장 공간
                  </div>
                  <div className="flex-1">
                    <Progress value={storageProgress} className="h-2" />
                  </div>
                  <div className="text-sm text-blue-600 min-w-[100px] text-right">
                    {subscription.storageUsed} TB /{subscription.storageLimit} TB
                  </div>
                </div>

                {/* AI API 호출 */}
                <div className="flex items-center gap-4">
                  <div className="w-24 text-sm text-muted-foreground flex-shrink-0">
                    AI API 호출
                  </div>
                  <div className="flex-1">
                    <Progress value={apiProgress} className="h-2" />
                  </div>
                  <div className="text-sm text-blue-600 min-w-[100px] text-right">
                    {subscription.apiCallsUsed.toLocaleString()} /{subscription.apiCallsLimit.toLocaleString()}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </PageLayout>

      {/* ===== 서비스 해지 확인 다이얼로그 ===== */}
      <AlertDialog open={showCancelDialog} onOpenChange={setShowCancelDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle className="flex items-center gap-2">
              <AlertTriangle className="w-5 h-5 text-red-500" />
              서비스 해지
            </AlertDialogTitle>
            <AlertDialogDescription className="text-left">
              모든 데이터가 삭제되며 복구할 수 없습니다.
              <br />
              <span className="font-medium text-red-600">
                정말 서비스를 해지하시겠습니까?
              </span>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleCancelService}
              className="bg-red-600 hover:bg-red-700"
            >
              확인
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}