// src/renderer/components/LicenseTab.tsx
// 구독 기반 라이선스 탭 — 클라우드 인증 + Payple 결제 연동

import {
  Box,
  Divider,
  LinearProgress,
} from '@mui/material'
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
import CancelIcon from '@mui/icons-material/Cancel'
import { Led, PhosphorText, PhysicalButton, MetalCard } from '@d3ro/ui/components/ds'
import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '@d3ro/ui/theme'
import { useI18n } from '@d3ro/i18n'
import { PREMIUM_MODEL_LIMITS } from '@d3ro/core/constants'
import { useLicenseState } from '../hooks/useLicenseState'

export function LicenseTab(): React.ReactElement {
  const { t } = useI18n()
  const {
    licenseInfo, usage, comparison, cloud,
    currentTier, isFree, isPro,
    handleUpgrade, handleOpenBilling, openCloudSettings,
  } = useLicenseState()

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
      {/* ── 현재 플랜 + 계정 상태 ── */}
      <MetalCard>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          <Led
            color={currentTier === 'free' ? 'amber' : 'green'}
            size={12}
            pulse={currentTier !== 'free'}
          />
          <Box sx={{ flex: 1 }}>
            <PhosphorText variant="label" sx={{ mb: 0.5, display: 'block' }}>
              {t('license.currentTier')}
            </PhosphorText>
            <TierLabel tier={currentTier} t={t} />
          </Box>
          {cloud.authenticated && cloud.userEmail && (
            <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size }}>
              {cloud.userEmail}
            </PhosphorText>
          )}
        </Box>
      </MetalCard>

      {/* ── 구독 관리 / 업그레이드 ── */}
      <MetalCard>
        <SubscriptionSection
          t={t}
          authenticated={cloud.authenticated}
          isFree={isFree}
          isPro={isPro}
          currentTier={currentTier}
          onUpgrade={handleUpgrade}
          onManage={handleOpenBilling}
          onSignIn={openCloudSettings}
        />
      </MetalCard>

      <Divider sx={{ borderColor: d3roPalette.border.subtle }} />

      {/* ── 일일 사용량 ── */}
      <UsageSection t={t} usage={usage} currentTier={currentTier} />

      {/* ── 티어 비교표 ── */}
      <ComparisonTable t={t} comparison={comparison} />
    </Box>
  )
}

// ── 하위 컴포넌트 ──────────────────────────────────────

function TierLabel({ tier, t }: { tier: string; t: (k: string) => string }): React.ReactElement {
  const color = tier === 'pro_plus'
    ? d3roPalette.tag.purple
    : tier === 'pro'
      ? d3roPalette.tag.green
      : d3roPalette.accent.amber
  const label = tier === 'pro_plus' ? t('license.proPlus') : tier === 'pro' ? t('license.pro') : t('license.free')
  return <PhosphorText variant="value" sx={{ color }}>{label}</PhosphorText>
}

interface SubscriptionSectionProps {
  t: (k: string) => string
  authenticated: boolean
  isFree: boolean
  isPro: boolean
  currentTier: string
  onUpgrade: (tier: 'pro' | 'pro_plus') => void
  onManage: () => void
  onSignIn: () => void
}

function SubscriptionSection({ t, authenticated, isFree, isPro, onUpgrade, onManage, onSignIn }: SubscriptionSectionProps): React.ReactElement {
  if (!authenticated) {
    return (
      <Box sx={{ textAlign: 'center', py: 1 }}>
        <PhosphorText variant="body" sx={{ mb: 1.5, display: 'block', color: d3roPalette.text.secondary }}>
          {t('license.signInRequired')}
        </PhosphorText>
        <PhysicalButton onClick={onSignIn} sx={{ width: '100%' }}>
          {t('license.signInToUpgrade')}
        </PhysicalButton>
      </Box>
    )
  }

  if (isFree) {
    return (
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
        <PhosphorText variant="label" sx={{ display: 'block' }}>
          {t('license.subscribe')}
        </PhosphorText>
        <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, mb: 0.5, display: 'block' }}>
          {t('license.upgradeToProDesc')}
        </PhosphorText>
        <UpgradeButton tier="pro" t={t} onUpgrade={onUpgrade} />
        <UpgradeButton tier="pro_plus" t={t} onUpgrade={onUpgrade} />
      </Box>
    )
  }

  if (isPro) {
    return (
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
        <ActivePlanIndicator label={`${t('license.currentPlanActive')} — ${t('license.proPlan')}`} color={d3roPalette.tag.green} />
        <UpgradeButton tier="pro_plus" t={t} onUpgrade={onUpgrade} />
        <PhysicalButton onClick={onManage} sx={{ width: '100%' }}>
          <PhosphorText variant="compact">{t('license.subscriptionManage')}</PhosphorText>
        </PhysicalButton>
      </Box>
    )
  }

  // Pro+
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
      <ActivePlanIndicator label={`${t('license.currentPlanActive')} — ${t('license.proPlusPlan')}`} color={d3roPalette.tag.purple} />
      <PhysicalButton onClick={onManage} sx={{ width: '100%' }}>
        <PhosphorText variant="compact">{t('license.subscriptionManage')}</PhosphorText>
      </PhysicalButton>
    </Box>
  )
}

function ActivePlanIndicator({ label, color }: { label: string; color: string }): React.ReactElement {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
      <Led color="green" size={8} pulse />
      <PhosphorText variant="compact" sx={{ color }}>{label}</PhosphorText>
    </Box>
  )
}

function UpgradeButton({ tier, t, onUpgrade }: { tier: 'pro' | 'pro_plus'; t: (k: string) => string; onUpgrade: (t: 'pro' | 'pro_plus') => void }): React.ReactElement {
  const planLabel = tier === 'pro_plus' ? t('license.proPlusPlan') : t('license.proPlan')
  return (
    <PhysicalButton onClick={() => onUpgrade(tier)} sx={{ width: '100%' }}>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <Led color="green" size={8} />
        <PhosphorText variant="compact">
          {t('license.upgrade')} — {planLabel}
        </PhosphorText>
      </Box>
    </PhysicalButton>
  )
}

function UsageSection({ t, usage, currentTier }: { t: (k: string) => string; usage: Array<{ feature: string; used: number; limit: number; remaining: number }>; currentTier: string }): React.ReactElement | null {
  if (usage.length === 0) return null

  return (
    <>
      <PhosphorText variant="label" sx={{ color: d3roPalette.text.label }}>
        {t('license.dailyUsage')}
      </PhosphorText>

      {usage.map((q) => (
        <QuotaBar key={q.feature} t={t} feature={q.feature} used={q.used} limit={q.limit} remaining={q.remaining} />
      ))}

      {/* Premium 모델별 쿼터 */}
      {PREMIUM_MODEL_LIMITS[currentTier as keyof typeof PREMIUM_MODEL_LIMITS]?.length > 0 && (
        <>
          <PhosphorText variant="label" sx={{ mt: 1, color: d3roPalette.tag.green }}>
            {t('license.premiumQuota')}
          </PhosphorText>
          {PREMIUM_MODEL_LIMITS[currentTier as keyof typeof PREMIUM_MODEL_LIMITS].map((m) => (
            <Box key={m.model}>
              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
                <PhosphorText variant="small">{t(m.i18nKey)}</PhosphorText>
                <PhosphorText variant="small" sx={{ color: d3roPalette.accent.amber }}>
                  {m.limit === -1
                    ? t('license.unlimited')
                    : `${m.limit}/${t(m.period === 'weekly' ? 'license.quotaWeekly' : 'license.quotaDaily')}`}
                </PhosphorText>
              </Box>
              {m.limit > 0 && (
                <LinearProgress
                  variant="determinate"
                  value={0}
                  sx={{
                    height: 4,
                    borderRadius: d3roRadius.xs,
                    bgcolor: d3roPalette.bg.inset,
                    '& .MuiLinearProgress-bar': {
                      bgcolor: d3roPalette.tag.green,
                      borderRadius: d3roRadius.xs,
                    },
                  }}
                />
              )}
            </Box>
          ))}
        </>
      )}

      <Divider sx={{ borderColor: d3roPalette.border.subtle }} />
    </>
  )
}

function QuotaBar({ t, feature, used, limit, remaining }: { t: (k: string, p?: Record<string, string>) => string; feature: string; used: number; limit: number; remaining: number }): React.ReactElement {
  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
        <PhosphorText variant="small">
          {t(`license.feature.${feature}`)}
        </PhosphorText>
        <PhosphorText variant="small" sx={{
          color: limit === -1 ? d3roPalette.tag.green : remaining === 0 ? d3roPalette.tag.red : d3roPalette.accent.amber,
        }}>
          {limit === -1
            ? t('license.unlimited')
            : t('license.quotaUsed', { used: String(used), limit: String(limit) })}
        </PhosphorText>
      </Box>
      {limit > 0 && (
        <LinearProgress
          variant="determinate"
          value={Math.min(100, (used / limit) * 100)}
          sx={{
            height: 4,
            borderRadius: d3roRadius.xs,
            bgcolor: d3roPalette.bg.inset,
            '& .MuiLinearProgress-bar': {
              bgcolor: used >= limit ? d3roPalette.tag.red : d3roPalette.accent.amber,
              borderRadius: d3roRadius.xs,
            },
          }}
        />
      )}
    </Box>
  )
}

function ComparisonTable({ t, comparison }: { t: (k: string) => string; comparison: Array<{ feature: string; featureLabel: string; free: boolean | string; pro: boolean | string; proPlus: boolean | string }> }): React.ReactElement | null {
  if (comparison.length === 0) return null

  return (
    <>
      <PhosphorText variant="label" sx={{ color: d3roPalette.text.label }}>
        {t('license.tierComparison')}
      </PhosphorText>

      <Box
        component="table"
        sx={{
          width: '100%',
          borderCollapse: 'collapse',
          fontFamily: d3roFontMono,
          fontSize: d3roTypo.small.size,
          '& th, & td': {
            py: 0.5,
            px: 1,
            textAlign: 'center',
            borderBottom: `1px solid ${d3roPalette.border.subtle}`,
          },
          '& th': {
            color: d3roPalette.text.label,
            fontWeight: d3roTypo.label.weight,
            letterSpacing: d3roTypo.label.spacing,
            textTransform: 'uppercase',
          },
          '& td:first-of-type': {
            textAlign: 'left',
            color: d3roPalette.text.primary,
          },
        }}
      >
        <thead>
          <tr>
            <th>{''}</th>
            <th>{t('license.free')}</th>
            <th style={{ color: d3roPalette.tag.green }}>{t('license.pro')}</th>
            <th style={{ color: d3roPalette.tag.purple }}>{t('license.proPlus')}</th>
          </tr>
        </thead>
        <tbody>
          {comparison.map((row) => (
            <tr key={row.feature}>
              <td>{t(row.featureLabel)}</td>
              <td><TierCell value={row.free} /></td>
              <td><TierCell value={row.pro} /></td>
              <td><TierCell value={row.proPlus} /></td>
            </tr>
          ))}
        </tbody>
      </Box>
    </>
  )
}

function TierCell({ value }: { value: boolean | string }): React.ReactElement {
  if (value === true) {
    return <CheckCircleIcon sx={{ fontSize: 14, color: d3roPalette.tag.green }} />
  }
  if (value === false) {
    return <CancelIcon sx={{ fontSize: 14, color: d3roPalette.text.disabled }} />
  }
  return (
    <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, color: d3roPalette.accent.amber }}>
      {value}
    </PhosphorText>
  )
}