'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 { 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 { cancelSubscription, requestDataExport } from './actions';
import type { SubscriptionInfo } from './types';
import { PLAN_LABELS, SUBSCRIPTION_STATUS_LABELS } from './types';

// ===== Props 타입 =====
interface SubscriptionClientProps {
  initialData: SubscriptionInfo;
}

// ===== 날짜 포맷 함수 =====
const formatDate = (dateStr: string): string => {
  if (!dateStr) return '-';
  const date = new Date(dateStr);
  if (isNaN(date.getTime())) return '-';
  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 SubscriptionClient({ initialData }: SubscriptionClientProps) {
  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 (error) {
      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]);

  // ===== Progress 계산 =====
  const storageProgress = subscription.storageLimit > 0
    ? (subscription.storageUsed / subscription.storageLimit) * 100
    : 0;
  const userProgress = subscription.userLimit
    ? (subscription.userCount / subscription.userLimit) * 100
    : 30; // 무제한일 경우 30%로 표시

  return (
    <>
      <PageLayout>
        {/* ===== 페이지 헤더 ===== */}
        <PageHeader
          title="구독관리"
          description="구독 정보를 관리합니다"
          icon={CreditCard}
          actions={
            <div className="flex items-center gap-2">
              <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">
                  {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>
                {subscription.remainingDays != null && subscription.remainingDays > 0 && (
                  <div className="text-sm text-muted-foreground mt-1">
                    ({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.subscriptionAmount)}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* ===== 구독 정보 영역 ===== */}
          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center justify-between mb-2">
                <div className="text-sm text-muted-foreground">구독 정보</div>
                <Badge variant={subscription.status === 'active' ? 'default' : 'secondary'}>
                  {SUBSCRIPTION_STATUS_LABELS[subscription.status] || subscription.status}
                </Badge>
              </div>

              {/* 플랜명 */}
              <h3 className="text-xl font-bold mb-6">
                {subscription.planName || 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={userProgress} 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.storageUsedFormatted} / {subscription.storageLimitFormatted}
                  </div>
                </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}
      />
    </>
  );
}