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

'use client';

/**
 * SubscriptionClient — 대체 구독관리 컴포넌트 (SubscriptionManagement.tsx 사용 권장)
 * 기존 호환성 유지를 위해 보존
 */

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 { Badge } from '@/components/ui/badge';
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { toast } from 'sonner';
import { usePermission } from '@/hooks/usePermission';
import { cancelSubscription, requestDataExport } from './actions';
import type { SubscriptionInfo } from './types';
import { SUBSCRIPTION_STATUS_LABELS } from './types';
import { formatKrw, getProgressColor } from './utils';
import { formatAmountWon as formatCurrency } from '@/lib/utils/amount';

interface SubscriptionClientProps {
  initialData: SubscriptionInfo;
}

const formatDate = (dateStr: string | null): string => {
  if (!dateStr) return '-';
  const date = new Date(dateStr);
  if (isNaN(date.getTime())) return '-';
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

function ColoredProgress({ value }: { value: number }) {
  const color = getProgressColor(value);
  const clamped = Math.min(value, 100);
  return (
    <div className="relative h-2 w-full overflow-hidden rounded-full bg-gray-100">
      <div className={`h-full rounded-full transition-all ${color}`} style={{ width: `${clamped}%` }} />
    </div>
  );
}

export function SubscriptionClient({ initialData }: SubscriptionClientProps) {
  const { canExport } = usePermission();
  const [subscription, setSubscription] = useState<SubscriptionInfo>(initialData);
  const [showCancelDialog, setShowCancelDialog] = useState(false);
  const [isExporting, setIsExporting] = useState(false);
  const [isCancelling, setIsCancelling] = useState(false);

  const handleExportData = useCallback(async () => {
    setIsExporting(true);
    try {
      const result = await requestDataExport('all');
      if (result.success) toast.success('내보내기 요청이 등록되었습니다.');
      else toast.error(result.error || '내보내기 요청에 실패했습니다.');
    } catch { toast.error('서버 오류가 발생했습니다.'); }
    finally { setIsExporting(false); }
  }, []);

  const handleCancelService = useCallback(async () => {
    if (!subscription.id) { toast.error('구독 정보를 찾을 수 없습니다.'); setShowCancelDialog(false); return; }
    setIsCancelling(true);
    try {
      const result = await cancelSubscription(subscription.id, '사용자 요청');
      if (result.success) { toast.success('서비스가 해지되었습니다.'); setSubscription(prev => ({ ...prev, status: 'cancelled' })); }
      else toast.error(result.error || '서비스 해지에 실패했습니다.');
    } catch { toast.error('서버 오류가 발생했습니다.'); }
    finally { setIsCancelling(false); setShowCancelDialog(false); }
  }, [subscription.id]);

  const userPercentage = subscription.userLimit ? (subscription.userCount / subscription.userLimit) * 100 : 30;

  return (
    <>
      <PageLayout>
        <PageHeader
          title="구독관리"
          description="구독 정보와 사용량을 관리합니다"
          icon={CreditCard}
          actions={
            <div className="flex items-center gap-2">
              {canExport && (
                <Button variant="outline" onClick={handleExportData} disabled={isExporting}>
                  <Download className="w-4 h-4 mr-2" />
                  {isExporting ? '처리 중...' : '자료 내보내기'}
                </Button>
              )}
              <Button
                variant="outline"
                className="border-red-200 text-red-600 hover:bg-red-50 hover:border-red-300"
                onClick={() => setShowCancelDialog(true)}
                disabled={subscription.status === 'cancelled'}
              >
                서비스 해지
              </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">{subscription.planName}</div>
                <div className="text-sm text-muted-foreground mt-2">시작: {formatDate(subscription.startedAt)}</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <div className="text-sm text-muted-foreground mb-1">구독 상태</div>
                <Badge variant={subscription.status === 'active' ? 'default' : 'secondary'}>
                  {SUBSCRIPTION_STATUS_LABELS[subscription.status] || subscription.status}
                </Badge>
                {subscription.remainingDays != null && subscription.remainingDays > 0 && (
                  <div className="text-sm text-muted-foreground mt-2">남은 일: {subscription.remainingDays}일</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.monthlyFee)}/월</div>
                <div className="text-sm text-muted-foreground mt-2">종료: {formatDate(subscription.endedAt)}</div>
              </CardContent>
            </Card>
          </div>

          <Card>
            <CardContent className="pt-6">
              <div className="text-sm text-muted-foreground mb-4">리소스 사용량</div>
              <div className="space-y-5">
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">사용자</span>
                    <span className="text-sm font-medium">
                      {subscription.userCount}명 / {subscription.userLimit ? `${subscription.userLimit}명` : '무제한'}
                    </span>
                  </div>
                  <ColoredProgress value={userPercentage} />
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">저장 공간</span>
                    <span className="text-sm font-medium">
                      {subscription.storageUsedFormatted} / {subscription.storageLimitFormatted}
                    </span>
                  </div>
                  <ColoredProgress value={subscription.storagePercentage} />
                </div>
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground">AI 토큰</span>
                    <span className="text-sm font-medium">{formatKrw(subscription.aiTokens.costKrw)}</span>
                  </div>
                  <ColoredProgress value={subscription.aiTokens.percentage} />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </PageLayout>

      <ConfirmDialog
        open={showCancelDialog}
        onOpenChange={setShowCancelDialog}
        onConfirm={handleCancelService}
        variant="destructive"
        title={<span className="flex items-center gap-2"><AlertTriangle className="w-5 h-5 text-red-500" />서비스 해지</span>}
        description={<>모든 데이터가 삭제되며 복구할 수 없습니다.<br /><span className="font-medium text-red-600">정말 서비스를 해지하시겠습니까?</span></>}
        confirmText="확인"
        loading={isCancelling}
      />
    </>
  );
}