// src/renderer/components/payment/CheckoutModal.tsx
// Multi-PG Checkout & Subscription Modal (Toss Payments + Stripe)

import React, { useState } from 'react'
import {
  Modal,
  Box,
  Typography,
  Button,
  RadioGroup,
  FormControlLabel,
  Radio,
  TextField,
  CircularProgress,
} from '@mui/material'
import { CreditCard, Shield, Lock, CheckCircle2, X } from 'lucide-react'
import { d3roPalette, d3roFontSans, d3roFontMono, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
import type { LicenseTier } from '@d3ro/core/types'

interface CheckoutModalProps {
  open: boolean
  initialTier?: LicenseTier
  onClose: () => void
  onSuccess: (tier: LicenseTier) => void
}

export function CheckoutModal({
  open,
  initialTier = 'pro_plus',
  onClose,
  onSuccess,
}: CheckoutModalProps): React.ReactElement {
  const [tier, setTier] = useState<LicenseTier>(initialTier === 'free' ? 'pro_plus' : initialTier)
  const [currency, setCurrency] = useState<'KRW' | 'USD'>('KRW')
  const [isAnnual, setIsAnnual] = useState(true)
  const [gateway, setGateway] = useState<'toss' | 'kakao' | 'stripe'>('toss')
  const [isProcessing, setIsProcessing] = useState(false)
  const [completed, setCompleted] = useState(false)

  const priceTable = {
    KRW: {
      pro: isAnnual ? '₩119,000 / 년' : '₩12,900 / 월',
      pro_plus: isAnnual ? '₩229,000 / 년' : '₩24,900 / 월',
      team: isAnnual ? '₩299,000 / 유저 / 년' : '₩32,000 / 유저 / 월',
    },
    USD: {
      pro: isAnnual ? '$99.00 / yr' : '$9.90 / mo',
      pro_plus: isAnnual ? '$199.00 / yr' : '$19.90 / mo',
      team: isAnnual ? '$240.00 / user / yr' : '$25.00 / user / mo',
    },
  }

  const handlePay = () => {
    setIsProcessing(true)
    setTimeout(() => {
      setIsProcessing(false)
      setCompleted(true)
      onSuccess(tier)
    }, 1200)
  }

  return (
    <Modal open={open} onClose={onClose}>
      <Box
        sx={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: { xs: '90%', sm: 520 },
          bgcolor: d3roPalette.bg.modal,
          backdropFilter: 'blur(28px)',
          border: `1px solid ${d3roPalette.glass.hairline}`,
          borderRadius: d3roRadius.outer,
          boxShadow: d3roShadow.modal,
          p: 3,
          outline: 'none',
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
        }}
      >
        {/* Header */}
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px solid ${d3roPalette.glass.hairline}`, pb: 1.5 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25 }}>
            <CreditCard size={18} color={d3roPalette.accent.light} />
            <Typography sx={{ fontFamily: d3roFontSans, fontSize: '16px', fontWeight: 800, color: d3roPalette.text.primary }}>
              D3RO Voice Secure Checkout
            </Typography>
          </Box>
          <Box onClick={onClose} sx={{ cursor: 'pointer', color: d3roPalette.text.dimLabel, '&:hover': { color: d3roPalette.text.primary } }}>
            <X size={18} />
          </Box>
        </Box>

        {completed ? (
          <Box sx={{ textAlign: 'center', py: 4, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5 }}>
            <CheckCircle2 size={48} color={d3roPalette.tag.greenText} />
            <Typography sx={{ fontFamily: d3roFontSans, fontSize: '18px', fontWeight: 800, color: '#fff' }}>
              구독이 성공적으로 활성화되었습니다!
            </Typography>
            <Typography sx={{ fontFamily: d3roFontMono, fontSize: '12px', color: d3roPalette.accent.light }}>
              Plan: {tier.toUpperCase()} • 100% Ad-Free
            </Typography>
            <Typography sx={{ fontFamily: d3roFontSans, fontSize: '11px', color: d3roPalette.text.secondary }}>
              전자세금계산서 및 영수증이 등록된 이메일로 발송되었습니다.
            </Typography>
            <Button onClick={onClose} sx={{ mt: 2, bgcolor: d3roPalette.accent.main, color: '#fff', px: 3, borderRadius: '8px' }}>
              완료
            </Button>
          </Box>
        ) : (
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {/* Currency & Plan Selectors */}
            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Box sx={{ display: 'flex', gap: 1 }}>
                <Button
                  size="small"
                  onClick={() => setCurrency('KRW')}
                  sx={{
                    px: 1.5,
                    py: 0.5,
                    fontSize: '11px',
                    fontFamily: d3roFontMono,
                    fontWeight: 700,
                    color: currency === 'KRW' ? '#fff' : d3roPalette.text.dimLabel,
                    bgcolor: currency === 'KRW' ? d3roPalette.accent.main : 'rgba(255,255,255,0.05)',
                  }}
                >
                  KRW (₩)
                </Button>
                <Button
                  size="small"
                  onClick={() => setCurrency('USD')}
                  sx={{
                    px: 1.5,
                    py: 0.5,
                    fontSize: '11px',
                    fontFamily: d3roFontMono,
                    fontWeight: 700,
                    color: currency === 'USD' ? '#fff' : d3roPalette.text.dimLabel,
                    bgcolor: currency === 'USD' ? d3roPalette.accent.main : 'rgba(255,255,255,0.05)',
                  }}
                >
                  USD ($)
                </Button>
              </Box>

              <Button
                size="small"
                onClick={() => setIsAnnual(!isAnnual)}
                sx={{ fontSize: '11px', color: d3roPalette.tag.greenText, fontFamily: d3roFontSans, fontWeight: 600 }}
              >
                {isAnnual ? '연간 결제 (20% 할인)' : '월간 결제'}
              </Button>
            </Box>

            {/* Plan Card */}
            <Box sx={{ p: 2, borderRadius: d3roRadius.inner, bgcolor: 'rgba(17, 26, 48, 0.7)', border: `1px solid ${d3roPalette.accent.dim}` }}>
              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Typography sx={{ fontFamily: d3roFontSans, fontSize: '14px', fontWeight: 700, color: '#fff' }}>
                  {tier === 'pro' ? 'Pro Plan' : tier === 'pro_plus' ? 'Pro+ Plan (화자 구분 & 회의록)' : 'Team Plan'}
                </Typography>
                <Typography sx={{ fontFamily: d3roFontMono, fontSize: '15px', fontWeight: 800, color: d3roPalette.accent.light }}>
                  {priceTable[currency][tier as 'pro' | 'pro_plus' | 'team']}
                </Typography>
              </Box>
            </Box>

            {/* Payment Gateways */}
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              <Typography sx={{ fontFamily: d3roFontSans, fontSize: '11px', color: d3roPalette.text.dimLabel }}>
                결제 수단 선택
              </Typography>
              <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1 }}>
                <Button
                  onClick={() => setGateway('toss')}
                  sx={{
                    p: 1.5,
                    borderRadius: '10px',
                    bgcolor: gateway === 'toss' ? 'rgba(59, 130, 246, 0.2)' : 'rgba(255,255,255,0.03)',
                    border: `1px solid ${gateway === 'toss' ? d3roPalette.accent.main : 'rgba(255,255,255,0.08)'}`,
                    color: '#fff',
                    fontSize: '11px',
                    fontFamily: d3roFontSans,
                    fontWeight: 700,
                    textTransform: 'none',
                  }}
                >
                  토스페이 / 카드
                </Button>
                <Button
                  onClick={() => setGateway('kakao')}
                  sx={{
                    p: 1.5,
                    borderRadius: '10px',
                    bgcolor: gateway === 'kakao' ? 'rgba(245, 158, 11, 0.2)' : 'rgba(255,255,255,0.03)',
                    border: `1px solid ${gateway === 'kakao' ? '#f59e0b' : 'rgba(255,255,255,0.08)'}`,
                    color: '#fff',
                    fontSize: '11px',
                    fontFamily: d3roFontSans,
                    fontWeight: 700,
                    textTransform: 'none',
                  }}
                >
                  카카오페이
                </Button>
                <Button
                  onClick={() => setGateway('stripe')}
                  sx={{
                    p: 1.5,
                    borderRadius: '10px',
                    bgcolor: gateway === 'stripe' ? 'rgba(6, 182, 212, 0.2)' : 'rgba(255,255,255,0.03)',
                    border: `1px solid ${gateway === 'stripe' ? '#06b6d4' : 'rgba(255,255,255,0.08)'}`,
                    color: '#fff',
                    fontSize: '11px',
                    fontFamily: d3roFontSans,
                    fontWeight: 700,
                    textTransform: 'none',
                  }}
                >
                  Stripe (해외카드)
                </Button>
              </Box>
            </Box>

            {/* Input Card Info */}
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              <TextField
                size="small"
                label="카드 번호 (정기결제 빌링키 등록)"
                defaultValue="5361 •••• •••• 9842"
                InputProps={{ readOnly: true }}
                sx={{ '& .MuiInputBase-root': { fontSize: '12px', fontFamily: d3roFontMono } }}
              />
            </Box>

            {/* Pay Button */}
            <Button
              disabled={isProcessing}
              onClick={handlePay}
              sx={{
                py: 1.25,
                bgcolor: d3roPalette.accent.main,
                color: '#fff',
                fontWeight: 700,
                fontSize: '13px',
                borderRadius: '10px',
                boxShadow: d3roShadow.glowAccent,
                '&:hover': { bgcolor: d3roPalette.accent.light },
              }}
            >
              {isProcessing ? (
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                  <CircularProgress size={14} color="inherit" /> 결제 승인 중...
                </Box>
              ) : (
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                  <Lock size={14} /> 안전 결제 진행하기
                </Box>
              )}
            </Button>
          </Box>
        )}
      </Box>
    </Modal>
  )
}