// src/renderer/components/OnboardingModal.tsx
// 첫 실행 시 마이크 + 핫키 설정 안내

import { useState, useEffect } from 'react'
import {
  Dialog,
  DialogContent,
  Box,
  Typography,
  Button,
  Stack,
  Chip,
} from '@mui/material'
import MicIcon from '@mui/icons-material/Mic'
import KeyboardIcon from '@mui/icons-material/Keyboard'
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
import OpenInNewIcon from '@mui/icons-material/OpenInNew'
import { d3roPalette, d3roFontMono, d3roShadow } from '../theme'
import { Led } from './ds'
import { HotkeyRecordModal } from './HotkeyRecordModal'
import { useI18n } from '../i18n'
import type { HotkeyBinding, AudioDevice } from '@shared/types'

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

export function OnboardingModal({ open, onClose }: OnboardingModalProps): React.ReactElement {
  const { t } = useI18n()
  const [step, setStep] = useState(0) // 0: 환영, 1: 마이크, 2: 핫키, 3: Ollama, 4: 완료
  const [devices, setDevices] = useState<AudioDevice[]>([])
  const [selectedDevice, setSelectedDevice] = useState('default')
  const [hotkeyBinding, setHotkeyBinding] = useState<HotkeyBinding | null>(null)
  const [hotkeyModalOpen, setHotkeyModalOpen] = useState(false)

  useEffect(() => {
    if (!open) return
    setStep(0)
    window.electronAPI.audio.getDevices().then((r) => {
      if (r.success) setDevices(r.data)
    })
    window.electronAPI.hotkey.getDictationShortcut().then((r) => {
      if (r.success && r.data) setHotkeyBinding(r.data)
    })
  }, [open])

  const handleFinish = () => {
    // 온보딩 완료 플래그 저장
    window.electronAPI.config.set({ key: 'onboardingCompleted' as keyof import('@shared/types').AppConfig, value: true as never })
    onClose()
  }

  const handleHotkeySave = (binding: HotkeyBinding) => {
    setHotkeyBinding(binding)
    window.electronAPI.hotkey.setDictationShortcut({ binding })
    window.electronAPI.hotkey.setEnabled({ enabled: true })
  }

  return (
    <>
      <Dialog
        open={open}
        maxWidth="sm"
        fullWidth
        PaperProps={{
          sx: {
            bgcolor: d3roPalette.bg.chassis,
            backgroundImage: 'none',
            border: `1px solid ${d3roPalette.border.subtle}`,
            boxShadow: d3roShadow.chassis,
          },
        }}
      >
        <DialogContent sx={{ p: 4 }}>
          {/* Step 0: 환영 */}
          {step === 0 && (
            <Box sx={{ textAlign: 'center', py: 3 }}>
              <Led color="amber" pulse size={16} />
              <Typography
                sx={{
                  fontFamily: d3roFontMono,
                  fontSize: '24px',
                  fontWeight: 300,
                  color: d3roPalette.accent.amber,
                  mt: 3,
                  mb: 1,
                }}
              >
                D3RO-VOICE
              </Typography>
              <Typography sx={{ color: d3roPalette.text.secondary, mb: 4 }}>
                {t('onboarding.welcome.desc')}
              </Typography>
              <Button variant="contained" onClick={() => setStep(1)} fullWidth>
                {t('onboarding.welcome.start')}
              </Button>
            </Box>
          )}

          {/* Step 1: 마이크 */}
          {step === 1 && (
            <Box>
              <Stack direction="row" alignItems="center" gap={1} mb={3}>
                <MicIcon sx={{ color: d3roPalette.accent.amber }} />
                <Typography sx={{ fontFamily: d3roFontMono, fontWeight: 700, fontSize: '14px' }}>
                  {t('onboarding.mic.title')}
                </Typography>
              </Stack>
              <Typography variant="body2" sx={{ color: d3roPalette.text.secondary, mb: 2 }}>
                {t('onboarding.mic.desc')}
              </Typography>
              <Stack spacing={1} mb={3}>
                {devices.map((d, idx) => (
                  <Box
                    key={`${d.deviceId}-${idx}`}
                    onClick={() => {
                      setSelectedDevice(d.deviceId)
                      window.electronAPI.audio.setSelectedDevice({ deviceId: d.deviceId })
                    }}
                    sx={{
                      p: 1.5,
                      borderRadius: '8px',
                      cursor: 'pointer',
                      bgcolor: selectedDevice === d.deviceId ? d3roPalette.accent.amberDim : d3roPalette.bg.inset,
                      border: selectedDevice === d.deviceId
                        ? `1px solid ${d3roPalette.accent.amber}`
                        : `1px solid ${d3roPalette.border.subtle}`,
                      '&:hover': { bgcolor: d3roPalette.bg.cardHover },
                    }}
                  >
                    <Typography variant="body2" sx={{ fontSize: '13px' }}>
                      {d.label}{d.isDefault ? ` ${t('settings.deviceDefault')}` : ''}
                    </Typography>
                  </Box>
                ))}
              </Stack>
              <Stack direction="row" justifyContent="space-between">
                <Button onClick={() => setStep(0)} sx={{ color: d3roPalette.text.inactive }}>{t('onboarding.back')}</Button>
                <Button variant="contained" onClick={() => setStep(2)}>{t('onboarding.next')}</Button>
              </Stack>
            </Box>
          )}

          {/* Step 2: 핫키 */}
          {step === 2 && (
            <Box>
              <Stack direction="row" alignItems="center" gap={1} mb={3}>
                <KeyboardIcon sx={{ color: d3roPalette.accent.amber }} />
                <Typography sx={{ fontFamily: d3roFontMono, fontWeight: 700, fontSize: '14px' }}>
                  {t('onboarding.hotkey.title')}
                </Typography>
              </Stack>
              <Typography variant="body2" sx={{ color: d3roPalette.text.secondary, mb: 2 }}>
                {t('onboarding.hotkey.desc')}
              </Typography>
              <Box
                sx={{
                  p: 2,
                  borderRadius: '10px',
                  bgcolor: d3roPalette.bg.inset,
                  boxShadow: d3roShadow.inset,
                  textAlign: 'center',
                  mb: 3,
                }}
              >
                {hotkeyBinding ? (
                  <Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
                    <Led color="green" size={8} />
                    {hotkeyBinding.displayLabel.split(' + ').map((key) => (
                      <Chip
                        key={key}
                        label={key}
                        sx={{
                          fontFamily: d3roFontMono,
                          fontWeight: 700,
                          bgcolor: d3roPalette.bg.chassis,
                          color: d3roPalette.text.primary,
                          border: `1px solid ${d3roPalette.border.default}`,
                        }}
                      />
                    ))}
                  </Stack>
                ) : (
                  <Typography sx={{ color: d3roPalette.text.inactive, fontSize: '13px' }}>
                    {t('onboarding.hotkey.notSet')}
                  </Typography>
                )}
              </Box>
              <Button
                variant="outlined"
                fullWidth
                onClick={() => setHotkeyModalOpen(true)}
                sx={{ mb: 3, fontFamily: d3roFontMono }}
              >
                {hotkeyBinding ? t('onboarding.hotkey.change') : t('onboarding.hotkey.set')}
              </Button>
              <Stack direction="row" justifyContent="space-between">
                <Button onClick={() => setStep(1)} sx={{ color: d3roPalette.text.inactive }}>{t('onboarding.back')}</Button>
                <Button variant="contained" onClick={() => setStep(3)}>{t('onboarding.next')}</Button>
              </Stack>
            </Box>
          )}

          {/* Step 3: Ollama 설치 */}
          {step === 3 && (
            <Box>
              <Stack direction="row" alignItems="center" gap={1} mb={3}>
                <Led color="amber" size={12} />
                <Typography sx={{ fontFamily: d3roFontMono, fontWeight: 700, fontSize: '14px' }}>
                  {t('onboarding.ollama.title')}
                </Typography>
              </Stack>
              <Typography variant="body2" sx={{ color: d3roPalette.text.secondary, mb: 2 }}>
                {t('onboarding.ollama.desc')}
              </Typography>
              <Button
                variant="outlined"
                endIcon={<OpenInNewIcon sx={{ fontSize: 14 }} />}
                onClick={() => window.electronAPI.system.openExternal({ url: 'https://ollama.com/download' })}
                fullWidth
                sx={{ mb: 1.5, fontFamily: d3roFontMono }}
              >
                {t('onboarding.ollama.download')}
              </Button>
              <Box sx={{ p: 1.5, borderRadius: '8px', bgcolor: d3roPalette.bg.inset, boxShadow: d3roShadow.inset, mb: 3 }}>
                <Typography sx={{ fontFamily: d3roFontMono, fontSize: '11px', color: d3roPalette.accent.amber }}>
                  $ ollama pull qwen3:4b
                </Typography>
                <Typography sx={{ fontSize: '10px', color: d3roPalette.text.inactive, mt: 0.5 }}>
                  {t('onboarding.ollama.modelHint')}
                </Typography>
              </Box>
              <Stack direction="row" justifyContent="space-between">
                <Button onClick={() => setStep(2)} sx={{ color: d3roPalette.text.inactive }}>{t('onboarding.back')}</Button>
                <Button variant="contained" onClick={() => setStep(4)}>{t('onboarding.next')}</Button>
              </Stack>
            </Box>
          )}

          {/* Step 4: 완료 */}
          {step === 4 && (
            <Box sx={{ textAlign: 'center', py: 3 }}>
              <CheckCircleIcon sx={{ fontSize: 48, color: d3roPalette.tag.green, mb: 2 }} />
              <Typography sx={{ fontFamily: d3roFontMono, fontSize: '18px', fontWeight: 700, mb: 1 }}>
                {t('onboarding.done.title')}
              </Typography>
              <Typography variant="body2" sx={{ color: d3roPalette.text.secondary, mb: 4 }}>
                {hotkeyBinding
                  ? t('onboarding.done.descWithKey', { key: hotkeyBinding.displayLabel })
                  : t('onboarding.done.descNoKey')}
              </Typography>
              <Button variant="contained" onClick={handleFinish} fullWidth>
                {t('onboarding.done.start')}
              </Button>
            </Box>
          )}
        </DialogContent>
      </Dialog>

      <HotkeyRecordModal
        open={hotkeyModalOpen}
        onClose={() => setHotkeyModalOpen(false)}
        onSave={handleHotkeySave}
        currentBinding={hotkeyBinding}
        title={t('hotkey.dictationTitle')}
      />
    </>
  )
}