// src/renderer/components/LicenseModal.tsx
// Full-screen license management modal with instrument aesthetic

import { useState, useEffect, useCallback } from 'react'
import {
  Dialog,
  DialogTitle,
  DialogContent,
  Box,
  IconButton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
} from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
import CancelIcon from '@mui/icons-material/Cancel'
import { MetalCard, PhosphorText, Led, PhysicalButton } from '@d3ro/ui/components/ds'
import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
import { useI18n } from '@d3ro/i18n'
import type { LicenseInfo, LicenseTier, TierComparison, UsageQuota } from '@d3ro/core/types'

interface LicenseModalProps {
  open: boolean
  onClose: () => void
}

type LedColor = 'amber' | 'green' | 'red' | 'orange' | 'off'

function tierToLedColor(tier: LicenseTier): LedColor {
  switch (tier) {
    case 'free': return 'amber'
    case 'pro': return 'green'
    case 'pro_plus': return 'green'
  }
}

function tierToLabel(tier: LicenseTier, t: (k: string) => string): string {
  switch (tier) {
    case 'free': return t('license.free')
    case 'pro': return t('license.pro')
    case 'pro_plus': return t('license.proPlus')
  }
}

export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactElement {
  const { t } = useI18n()
  const [licenseInfo, setLicenseInfo] = useState<LicenseInfo | null>(null)
  const [tierComparison, setTierComparison] = useState<TierComparison[]>([])
  const [usageQuotas, setUsageQuotas] = useState<UsageQuota[]>([])

  const loadData = useCallback(() => {
    window.electronAPI.license.getInfo().then((r) => {
      if (r.success) setLicenseInfo(r.data)
    })
    window.electronAPI.license.getTierComparison().then((r) => {
      if (r.success) setTierComparison(r.data)
    })
    window.electronAPI.license.getAllUsage().then((r) => {
      if (r.success) setUsageQuotas(r.data)
    })
  }, [])

  useEffect(() => {
    if (open) {
      loadData()
    }
  }, [open, loadData])

  // Subscribe to tier changes
  useEffect(() => {
    const unsub = window.electronAPI.license.onTierChanged((info) => {
      setLicenseInfo(info)
      loadData()
    })
    return unsub
  }, [loadData])

  const currentTier = licenseInfo?.tier ?? 'free'
  const isFree = currentTier === 'free'
  const isPro = currentTier === 'pro'

  const handleUpgrade = useCallback(() => {
    alert(t('license.paymentPending'))
  }, [t])

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="sm"
      fullWidth
      PaperProps={{
        sx: {
          bgcolor: d3roPalette.bg.app,
          backgroundImage: 'none',
          borderRadius: d3roRadius.card,
          border: `1px solid ${d3roPalette.border.subtle}`,
          boxShadow: d3roShadow.card,
          maxHeight: '85vh',
        },
      }}
    >
      <DialogTitle
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          py: 1.5,
          px: 3,
          borderBottom: `1px solid ${d3roPalette.border.subtle}`,
        }}
      >
        <PhosphorText variant="meta">{t('license.title')}</PhosphorText>
        <IconButton size="small" onClick={onClose} sx={{ color: d3roPalette.text.inactive }}>
          <CloseIcon sx={{ fontSize: 18 }} />
        </IconButton>
      </DialogTitle>

      <DialogContent sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 3, overflow: 'auto' }}>
        {/* ---- Current Tier ---- */}
        <MetalCard sx={{ overflow: 'visible' }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <Led color={licenseInfo ? tierToLedColor(licenseInfo.tier) : 'off'} size={12} pulse={!isFree} />
            <Box sx={{ flex: 1 }}>
              <PhosphorText variant="meta">{t('license.currentTier')}</PhosphorText>
              <PhosphorText variant="value">
                {licenseInfo ? tierToLabel(licenseInfo.tier, t) : '...'}
              </PhosphorText>
            </Box>
          </Box>
        </MetalCard>

        {/* ---- Subscription Management ---- */}
        <MetalCard sx={{ overflow: 'visible' }}>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <PhosphorText variant="meta">{t('license.subscribe')}</PhosphorText>

            {isFree && (
              <>
                <PhysicalButton onClick={handleUpgrade} sx={{ width: '100%' }}>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Led color="green" size={8} />
                    <PhosphorText variant="compact">
                      {t('license.upgrade')} — {t('license.proPlan')}
                    </PhosphorText>
                  </Box>
                </PhysicalButton>
                <PhysicalButton onClick={handleUpgrade} sx={{ width: '100%' }}>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Led color="green" size={8} />
                    <PhosphorText variant="compact">
                      {t('license.upgrade')} — {t('license.proPlusPlan')}
                    </PhosphorText>
                  </Box>
                </PhysicalButton>
              </>
            )}

            {isPro && (
              <>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                  <Led color="green" size={8} pulse />
                  <PhosphorText variant="compact" sx={{ color: d3roPalette.tag.green }}>
                    {t('license.currentPlan')} — {t('license.proPlan')}
                  </PhosphorText>
                </Box>
                <PhysicalButton onClick={handleUpgrade} sx={{ width: '100%' }}>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Led color="green" size={8} />
                    <PhosphorText variant="compact">
                      {t('license.upgrade')} — {t('license.proPlusPlan')}
                    </PhosphorText>
                  </Box>
                </PhysicalButton>
              </>
            )}

            {currentTier === 'pro_plus' && (
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                <Led color="green" size={8} pulse />
                <PhosphorText variant="compact" sx={{ color: d3roPalette.tag.purple }}>
                  {t('license.currentPlan')} — {t('license.proPlusPlan')}
                </PhosphorText>
              </Box>
            )}
          </Box>
        </MetalCard>

        {/* ---- Daily Usage ---- */}
        {usageQuotas.length > 0 && (
          <MetalCard sx={{ overflow: 'visible' }}>
            <PhosphorText variant="meta" sx={{ mb: 1.5 }}>{t('license.dailyUsage')}</PhosphorText>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              {usageQuotas.map((q) => (
                <Box key={q.feature} sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                  <PhosphorText variant="small" sx={{ flex: 1 }}>
                    {t(`license.feature.${q.feature}` as Parameters<typeof t>[0])}
                  </PhosphorText>
                  <Box sx={{ flex: 1 }}>
                    <Box
                      sx={{
                        height: 4,
                        borderRadius: d3roRadius.pill,
                        bgcolor: d3roPalette.bg.inset,
                        overflow: 'hidden',
                      }}
                    >
                      <Box
                        sx={{
                          height: '100%',
                          borderRadius: d3roRadius.pill,
                          bgcolor:
                            q.limit < 0
                              ? d3roPalette.tag.green
                              : q.used >= q.limit
                                ? d3roPalette.tag.red
                                : d3roPalette.accent.amber,
                          width: q.limit < 0 ? '100%' : `${Math.min(100, (q.used / q.limit) * 100)}%`,
                          transition: 'width 0.3s ease',
                        }}
                      />
                    </Box>
                  </Box>
                  <PhosphorText variant="dim" sx={{ minWidth: 60, textAlign: 'right' }}>
                    {q.limit < 0
                      ? t('license.quotaUnlimited')
                      : t('license.quotaUsed', { used: String(q.used), limit: String(q.limit) })}
                  </PhosphorText>
                </Box>
              ))}
            </Box>
          </MetalCard>
        )}

        {/* ---- Tier Comparison ---- */}
        {tierComparison.length > 0 && (
          <MetalCard sx={{ overflow: 'visible' }}>
            <PhosphorText variant="meta" sx={{ mb: 1.5 }}>{t('license.tierComparison')}</PhosphorText>
            <TableContainer>
              <Table size="small" sx={{ '& td, & th': { borderColor: d3roPalette.border.subtle, py: 0.75 } }}>
                <TableHead>
                  <TableRow>
                    <TableCell sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size, color: d3roPalette.text.label, letterSpacing: d3roTypo.label.spacing, textTransform: 'uppercase' }}>
                      &nbsp;
                    </TableCell>
                    <TableCell align="center" sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size, color: d3roPalette.text.label, letterSpacing: d3roTypo.label.spacing }}>
                      {t('license.free')}
                    </TableCell>
                    <TableCell align="center" sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size, color: d3roPalette.tag.green, letterSpacing: d3roTypo.label.spacing }}>
                      {t('license.pro')}
                    </TableCell>
                    <TableCell align="center" sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size, color: d3roPalette.tag.purple, letterSpacing: d3roTypo.label.spacing }}>
                      {t('license.proPlus')}
                    </TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {tierComparison.map((row) => (
                    <TableRow key={row.feature}>
                      <TableCell sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.compact.size, color: d3roPalette.text.secondary }}>
                        {t(row.featureLabel as Parameters<typeof t>[0])}
                      </TableCell>
                      <TableCell align="center">{renderTierCell(row.free)}</TableCell>
                      <TableCell align="center">{renderTierCell(row.pro)}</TableCell>
                      <TableCell align="center">{renderTierCell(row.proPlus)}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          </MetalCard>
        )}
      </DialogContent>
    </Dialog>
  )
}

function renderTierCell(value: boolean | string): React.ReactElement {
  if (typeof value === 'boolean') {
    return value ? (
      <CheckCircleIcon sx={{ fontSize: 16, color: d3roPalette.tag.green }} />
    ) : (
      <CancelIcon sx={{ fontSize: 16, color: d3roPalette.text.disabled }} />
    )
  }
  return (
    <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.compact.size }}>
      {value}
    </PhosphorText>
  )
}