import { useState, useEffect, useCallback } from 'react'
import { User, Brain, Wrench, Monitor, AlertTriangle, Bot, Sparkles, Zap, GitBranch, Container, Circle, Hexagon, Code, Rocket, Download } from 'lucide-react'
import { useI18n } from '../i18n'

const PANELS = [
  { id: 'profile', icon: User },
  { id: 'providers', icon: Brain },
  { id: 'skills', icon: Wrench },
  { id: 'system', icon: Monitor },
]

export default function Config({ api }) {
  const { t, language, keyboard, setLanguage, setKeyboard } = useI18n()
  const [activePanel, setActivePanel] = useState('profile')
  const [config, setConfig] = useState(null)
  const [providers, setProviders] = useState([])
  const [skillList, setSkillList] = useState([])

  const [editProfile, setEditProfile] = useState(false)
  const [editProvider, setEditProvider] = useState(null)
  const [profileForm, setProfileForm] = useState({})
  const [providerForm, setProviderForm] = useState({}) // keyed by provider name
  const [toast, setToast] = useState(null)


  const loadData = useCallback(() => {
    api.getConfig().then(d => {
      setConfig(d)
      setProfileForm(d.profile ? JSON.parse(JSON.stringify(d.profile)) : {})
    }).catch(() => {})
    api.getProviders().then(d => setProviders(d.providers || [])).catch(() => {})
    api.getSkills().then(d => setSkillList(d.skills || [])).catch(() => {})

  }, [api])

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

  const showToast = (msg) => {
    setToast(msg)
    setTimeout(() => setToast(null), 2500)
  }


  const handleSaveProfile = async () => {
    try {
      await api.saveProfile(profileForm)
      setEditProfile(false)
      loadData()
      showToast(t('config.saved'))
    } catch (err) {
      showToast(`${t('config.error')}: ${err.message}`)
    }
  }

  const handleSaveProvider = async (name) => {
    const form = providerForm[name]
    if (!form) return
    try {
      await api.saveProvider({ name, ...form })
      setEditProvider(null)
      loadData()
      showToast(t('config.saved'))
    } catch (err) {
      showToast(`${t('config.error')}: ${err.message}`)
    }
  }

  const openProviderEdit = (p) => {
    setProviderForm(prev => ({
      ...prev,
      [p.name]: {
        name: p.name,
        api_key: p.api_key || '',
        model: p.model || '',
        base_url: p.base_url || '',
      },
    }))
    setEditProvider(p.name)
  }



  return (
    <div className="config-window">
      {toast && <div className="config-toast">{toast}</div>}

      <div className="config-tabs-bar">
        {PANELS.map(p => {
          const Icon = p.icon
          return (
            <div
              key={p.id}
              className={`nav-tab ${activePanel === p.id ? 'active' : ''}`}
              onClick={() => setActivePanel(p.id)}
            >
              <span className="tab-icon"><Icon size={15} /></span>
              {t(`config.panels.${p.id}`)}
            </div>
          )
        })}
      </div>

      <div className="config-panel-area">
        <div className="config-panel-body">
          {activePanel === 'profile' && (
            <PanelProfile
              config={config} editProfile={editProfile}
              profileForm={profileForm} setProfileForm={setProfileForm}
              setEditProfile={setEditProfile} handleSaveProfile={handleSaveProfile}
              t={t}
            />
          )}
          {activePanel === 'providers' && (
            <PanelProviders
              providers={providers} editProvider={editProvider}
              providerForm={providerForm} setProviderForm={setProviderForm}
              setEditProvider={setEditProvider} openProviderEdit={openProviderEdit}
              handleSaveProvider={handleSaveProvider} api={api} loadData={loadData}
              t={t}
            />
          )}
          {activePanel === 'skills' && (
            <PanelSkills skillList={skillList} api={api} loadData={loadData} t={t} />
          )}
          {activePanel === 'system' && (
            <PanelSystem api={api} t={t} />
          )}

        </div>
      </div>
    </div>
  )
}

function PanelProfile({ config, editProfile, profileForm, setProfileForm, setEditProfile, handleSaveProfile, t }) {
  const updateField = (path, value) => {
    setProfileForm(prev => {
      const next = JSON.parse(JSON.stringify(prev))
      const keys = path.split('.')
      let target = next
      for (let i = 0; i < keys.length - 1; i++) {
        if (target[keys[i]] == null) target[keys[i]] = {}
        target = target[keys[i]]
      }
      target[keys[keys.length - 1]] = value
      return next
    })
  }

  const profile = editProfile ? profileForm : config?.profile

  if (!profile) {
    return (
      <div className="config-profile-center">
        <div className="config-card">
          <div className="empty-state">{t('config.loadingProfile')}</div>
        </div>
      </div>
    )
  }

  const personalKeys = Object.entries(profile).filter(([k, v]) => k !== 'preferences' && typeof v !== 'object')
  const personalObj = Object.fromEntries(personalKeys)
  const preferences = profile.preferences || null

  return (
    <div className="config-profile-center">
      <div className="config-card">
        <div className="section-title">{t('config.profileInfo') || 'Informations personnelles'}</div>
        <RenderFields obj={personalObj} path="" editing={editProfile} onChange={updateField} t={t} />
      </div>
      <div className="config-card">
        <div className="section-title">{t('config.profilePrefs') || 'Préférences'}</div>
        {preferences ? (
          <RenderFields obj={preferences} path="preferences" editing={editProfile} onChange={updateField} t={t} />
        ) : (
          <div className="config-card-row"><span className="config-card-value" style={{ color: 'var(--text-disabled)' }}>—</span></div>
        )}
      </div>
      <div className="config-card">
        <div className="config-card-actions" style={{ justifyContent: 'center' }}>
          {editProfile ? (
            <>
              <button className="primary sm" onClick={handleSaveProfile}>{t('config.save')}</button>
              <button className="ghost sm" onClick={() => setEditProfile(false)}>{t('config.cancel')}</button>
            </>
          ) : (
            <button className="primary sm" onClick={() => {
              setProfileForm(config.profile ? JSON.parse(JSON.stringify(config.profile)) : {})
              setEditProfile(true)
            }}>{t('config.editProfile')}</button>
          )}
        </div>
      </div>
    </div>
  )
}

function RenderFields({ obj, path, editing, onChange, t }) {
  if (!obj || typeof obj !== 'object') return null

  return Object.entries(obj).filter(([, v]) => v === null || typeof v !== 'object').map(([key, value]) => {
    const fieldPath = path ? `${path}.${key}` : key
    const label = getFieldLabel(key, t)

    if (editing) {
      if (typeof value === 'boolean') {
        return (
          <div key={key} className="config-card-row">
            <span className="config-card-label">{label}</span>
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
              <input type="checkbox" checked={value} onChange={e => onChange(fieldPath, e.target.checked)} />
              <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{value ? 'On' : 'Off'}</span>
            </label>
          </div>
        )
      }
      if (Array.isArray(value)) {
        return (
          <div key={key} className="config-form-field">
            <label className="config-form-label">{label}</label>
            <input className="config-form-input" value={value.join(', ')} onChange={e => onChange(fieldPath, e.target.value.split(',').map(s => s.trim()).filter(Boolean))} />
          </div>
        )
      }
      return (
        <div key={key} className="config-form-field">
          <label className="config-form-label">{label}</label>
          <input className="config-form-input" type={typeof value === 'number' ? 'number' : 'text'} value={value ?? ''} onChange={e => onChange(fieldPath, typeof value === 'number' ? Number(e.target.value) : e.target.value)} />
        </div>
      )
    }

    if (typeof value === 'boolean') {
      return (
        <div key={key} className="config-card-row">
          <span className="config-card-label">{label}</span>
          <span className="config-card-value">{value ? 'On' : 'Off'}</span>
        </div>
      )
    }
    if (Array.isArray(value)) {
      return (
        <div key={key} className="config-card-row">
          <span className="config-card-label">{label}</span>
          <span className="config-card-value">{value.length > 0 ? value.join(', ') : '—'}</span>
        </div>
      )
    }
    return (
      <div key={key} className="config-card-row">
        <span className="config-card-label">{label}</span>
        <span className="config-card-value">{value != null && value !== '' ? String(value) : '—'}</span>
      </div>
    )
  })
}

function getFieldLabel(key, t) {
  const translated = t(`config.${key}`)
  if (translated !== `config.${key}`) return translated
  return key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
}

function PanelProviders({ providers, editProvider, providerForm, setProviderForm, setEditProvider, openProviderEdit, handleSaveProvider, api, loadData, t }) {
  const [validating, setValidating] = useState(null)
  const [keyStatus, setKeyStatus] = useState({})

  const validateKey = async (p) => {
    setValidating(p.name)
    try {
      await api.validateProvider({ name: p.name, api_key: p.api_key, model: p.model, base_url: p.base_url || '' })
      setKeyStatus(prev => ({ ...prev, [p.name]: { valid: true, checked: true } }))
    } catch (err) {
      setKeyStatus(prev => ({ ...prev, [p.name]: { valid: false, checked: true, error: err.message || 'Clé invalide' } }))
    }
    setValidating(null)
  }

  useEffect(() => {
    providers.forEach(p => {
      if (p.api_key && !keyStatus[p.name]) {
        validateKey(p)
      } else if (!p.api_key) {
        setKeyStatus(prev => ({ ...prev, [p.name]: { valid: false, checked: true, error: 'Aucune clé' } }))
      }
    })
  }, [providers])

  const handleValidate = async (name, apiKey, model, baseUrl) => {
    setValidating(name)
    try {
      await api.validateProvider({ name, api_key: apiKey, model, base_url: baseUrl })
      setKeyStatus(prev => ({ ...prev, [name]: { valid: true, checked: true } }))
    } catch (err) {
      setKeyStatus(prev => ({ ...prev, [name]: { valid: false, checked: true, error: err.message || 'Clé invalide' } }))
    }
    setValidating(null)
  }

  const displayed = providers.filter(p => p.name === 'minimax' || p.name === 'mimo')

  return (
    <div className="config-providers-list">
      {displayed.map((p, i) => {
        const isEditing = editProvider === p.name
        const currentModel = providerForm[p.name]?.model || p.model
        const status = keyStatus[p.name]

        return (
          <div key={i} className="config-card provider-card-v2">
            <div className="provider-card-top">
              <div className="provider-card-identity">
                <span className="provider-card-name">{p.name.toUpperCase()}</span>
                {p.active && <span className="badge ok" style={{ marginLeft: 6 }}>active</span>}
                {status?.checked && status?.valid && <span className="badge ok">✓ {t('config.keyValid')}</span>}
                {status?.checked && !status?.valid && <span className="badge error">✗ {status.error || t('config.keyInvalid')}</span>}
              </div>
            </div>

            <div className="provider-card-form">
              <div className="provider-setup-token-row">
                <div className="provider-setup-token-input">
                  <label className="config-form-label">{t('config.apiKey')}</label>
                  <input
                    className="config-form-input"
                    type="password"
                    placeholder={p.api_key ? '••••••••' : t('config.tokenPlaceholder')}
                    value={isEditing ? (providerForm[p.name]?.api_key || '') : ''}
                    onChange={e => {
                      if (!isEditing) openProviderEdit(p)
                      setProviderForm(prev => ({
                        ...prev,
                        [p.name]: { ...(prev[p.name] || {}), api_key: e.target.value },
                      }))
                    }}
                  />
                </div>
                <div className="provider-setup-token-actions">
                  <button
                    className="sm primary"
                    disabled={validating === p.name || !providerForm[p.name]?.api_key}
                    onClick={() => handleValidate(p.name, providerForm[p.name]?.api_key, currentModel, providerForm[p.name]?.base_url)}
                  >
                    {validating === p.name ? t('config.validating') : t('config.validateKey')}
                  </button>
                  {isEditing && (
                    <button className="sm" onClick={() => handleSaveProvider(p.name)}>{t('config.save')}</button>
                  )}
                </div>
              </div>
              <div className="provider-card-model">
                <span className="provider-card-model-label">{t('config.model')}</span>
                <span className="provider-card-model-value">{p.model || '—'}</span>
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}

function PanelSkills({ skillList, api, loadData, t }) {
  const [deploying, setDeploying] = useState(null)

  const handleDeploy = async (name) => {
    setDeploying(name + '-deploy')
    try {
      await api.deploySkill(name)
      loadData()
    } catch (err) {
      console.error('deploy skill:', err)
    }
    setDeploying(null)
  }

  const handleUndeploy = async (name) => {
    setDeploying(name + '-undeploy')
    try {
      await api.undeploySkill(name)
      loadData()
    } catch (err) {
      console.error('undeploy skill:', err)
    }
    setDeploying(null)
  }

  if (skillList.length === 0) {
    return <div className="empty-state" style={{ color: 'var(--text-disabled)', padding: 40 }}>{t('config.noSkills')}</div>
  }

  return (
    <div className="skills-list">
      {skillList.map((s, i) => (
        <div key={i} className="config-update-row" style={{ alignItems: 'center' }}>
          <div className="skill-list-info">
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span className="config-update-name">{s.name}</span>
              {s.deployed ? (
                <span className="badge ok">{t('config.installed')}</span>
              ) : (
                <span className="badge neutral">{t('config.notInstalled')}</span>
              )}
            </div>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>{s.description}</div>
          </div>
          <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
            <button
              className="sm primary"
              disabled={s.deployed || deploying === s.name + '-deploy'}
              onClick={() => handleDeploy(s.name)}
            >
              {deploying === s.name + '-deploy' ? '...' : t('config.apply')}
            </button>
            <button
              className="sm ghost"
              disabled={!s.deployed || deploying === s.name + '-undeploy'}
              onClick={() => handleUndeploy(s.name)}
            >
              {deploying === s.name + '-undeploy' ? '...' : t('config.remove')}
            </button>
          </div>
        </div>
      ))}
    </div>
  )
}

function PanelSystem({ api, t }) {
  const [showResetModal, setShowResetModal] = useState(false)
  const [toast, setToast] = useState(null)
  const [isSudo, setIsSudo] = useState(false)

  useEffect(() => {
    api.getInfo().then(d => setIsSudo(!!d.sudo)).catch(() => {})
  }, [api])

  const showToast = (msg) => {
    setToast(msg)
    setTimeout(() => setToast(null), 3000)
  }

  const handleReset = async () => {
    try {
      await api.resetConfig()
      setShowResetModal(false)
      showToast(t('config.resetDone'))
      setTimeout(() => window.location.reload(), 1500)
    } catch (err) {
      showToast(`${t('config.error')}: ${err.message}`)
    }
  }

  const handleSystemUpdate = () => {
    window.dispatchEvent(new CustomEvent('navigate-to-shell'))
    if (isSudo) {
      window.dispatchEvent(new CustomEvent('ask-ai-terminal', { detail: { message: `Mets à jour le système et tous les outils utilisés par l'application Muyue. Exécute les commandes suivantes dans l'ordre :\n1. Met à jour les paquets système : sudo apt update && sudo apt upgrade -y\n2. Installe les dépendances utiles si manquantes : sudo apt install -y sshpass git curl wget\n3. Mets à jour les outils installés : crush, claude, gh, go, node/npm, python3/pip3/uv, docker, starship\n4. Pour chaque outil, vérifie la version actuelle, mets à jour si possible, puis vérifie la nouvelle version\n5. Donne un récapitulatif final de tout ce qui a été mis à jour ou installé` } }))
    } else {
      window.dispatchEvent(new CustomEvent('ask-ai-terminal', { detail: { message: `Je n'ai pas les droits sudo sur ce système. Donne-moi les commandes nécessaires pour mettre à jour le système et les outils suivants. Pour chaque outil, indique la commande exacte à exécuter :\n1. Paquets système (apt update && apt upgrade)\n2. Outils à mettre à jour : crush, claude, gh, go, node/npm, python3/pip3/uv, docker, starship\n3. Dépendances utiles à installer : sshpass, git, curl, wget\n4. Présente les commandes dans un tableau markdown avec le nom de l'outil, la commande, et si sudo est requis` } }))
    }
  }

  const configureTool = (tool) => {
    window.dispatchEvent(new CustomEvent('navigate-to-shell'))
    window.dispatchEvent(new CustomEvent('ask-ai-terminal', { detail: { message: tool.prompt } }))
  }

  const AI_TOOLS = [
    {
      id: 'crush',
      name: 'Crush',
      icon: 'Zap',
      description: t('config.toolCrushDesc'),
      prompt: `Configure l'outil Crush sur ce système. Vérifie d'abord s'il est installé avec "crush --version". S'il n'est pas installé, installe-le avec la méthode appropriée (npm install -g @anthropic/crush ou via le script officiel). S'il est déjà installé, vérifie sa configuration dans ~/.config/crush/ et affiche son état. Demande-moi les informations nécessaires si besoin (clés API, préférences, etc.).`,
    },
    {
      id: 'claude',
      name: 'Claude Code',
      icon: 'Bot',
      description: t('config.toolClaudeDesc'),
      prompt: `Configure l'outil Claude Code (claude) sur ce système. Vérifie d'abord s'il est installé avec "claude --version". S'il n'est pas installé, installe-le avec npm install -g @anthropic-ai/claude-code. S'il est installé, vérifie sa configuration et son authentification. Demande-moi les informations nécessaires si besoin (clé API Anthropic, etc.).`,
    },
    {
      id: 'gh',
      name: 'GitHub CLI',
      icon: 'GitBranch',
      description: t('config.toolGhDesc'),
      prompt: `Configure l'outil GitHub CLI (gh) sur ce système. Vérifie d'abord s'il est installé avec "gh --version". S'il n'est pas installé, installe-le avec la méthode appropriée pour ce système. S'il est installé, vérifie son authentification avec "gh auth status". Si non authentifié, guide-moi pour le configurer avec "gh auth login". Demande-moi le token si nécessaire.`,
    },
    {
      id: 'docker',
      name: 'Docker',
      icon: 'Container',
      description: t('config.toolDockerDesc'),
      prompt: `Configure Docker sur ce système. Vérifie d'abord s'il est installé avec "docker --version". Vérifie aussi si le daemon tourne avec "docker info". S'il n'est pas installé, installe-le avec la méthode appropriée. Vérifie que l'utilisateur est dans le groupe docker. Si des problèmes de permissions existent, explique comment les résoudre.`,
    },
    {
      id: 'go',
      name: 'Go',
      icon: 'Circle',
      description: t('config.toolGoDesc'),
      prompt: `Configure l'environnement Go sur ce système. Vérifie s'il est installé avec "go version". Vérifie le GOPATH, GOROOT et les variables d'environnement. S'il n'est pas installé, installe-le avec la méthode appropriée. Vérifie que les binaires Go sont dans le PATH.`,
    },
    {
      id: 'node',
      name: 'Node.js',
      icon: 'Hexagon',
      description: t('config.toolNodeDesc'),
      prompt: `Configure l'environnement Node.js sur ce système. Vérifie s'il est installé avec "node --version" et "npm --version". Vérifie aussi pnpm et npx. S'il n'est pas installé, installe-le avec la méthode recommandée (nvm, fnm ou le gestionnaire de paquets). Vérifie la version LTS vs Current.`,
    },
    {
      id: 'python',
      name: 'Python',
      icon: 'Code',
      description: t('config.toolPythonDesc'),
      prompt: `Configure l'environnement Python sur ce système. Vérifie python3 --version, pip3 --version, et uv --version. S'ils ne sont pas installés, installe-les avec la méthode appropriée. Vérifie les paquets essentiels (venv, pip). Configure uv si nécessaire.`,
    },
    {
      id: 'starship',
      name: 'Starship',
      icon: 'Rocket',
      description: t('config.toolStarshipDesc'),
      prompt: `Configure Starship (prompt shell) sur ce système. Vérifie s'il est installé avec "starship --version". S'il n'est pas installé, installe-le. Ensuite, configure le thème "charm" dans ~/.config/starship.toml. Assure-toi que starship est initialisé dans le shell de l'utilisateur (.bashrc, .zshrc ou config fish).`,
    },
  ]

  const ICON_MAP = { Zap, Bot, GitBranch, Container, Circle, Hexagon, Code, Rocket }

  return (
    <>
      {toast && <div className="config-toast">{toast}</div>}

      <div className="section-title" style={{ marginBottom: 8 }}>{t('config.systemConfig')}</div>

      <div className="section-title" style={{ marginTop: 4, marginBottom: 8, fontSize: 12, color: 'var(--text-tertiary)', textTransform: 'none', letterSpacing: 0 }}>
        <Bot size={13} style={{ verticalAlign: 'middle', marginRight: 6 }} />
        {t('config.aiToolsConfig')}
      </div>
      <div className="config-ai-tools-grid">
        {AI_TOOLS.map(tool => {
          const Icon = ICON_MAP[tool.icon] || Bot
          return (
            <div key={tool.id} className="config-ai-tool-card">
              <div className="config-ai-tool-header">
                <span className="config-ai-tool-icon"><Icon size={16} /></span>
                <span className="config-ai-tool-name">{tool.name}</span>
              </div>
              <div className="config-ai-tool-desc">{tool.description}</div>
              <button className="sm primary" onClick={() => configureTool(tool)} style={{ marginTop: 'auto' }}>
                <Sparkles size={12} style={{ verticalAlign: 'middle', marginRight: 4 }} />
                {t('config.configureViaAI')}
              </button>
            </div>
          )
        })}
      </div>

      <div className="config-card" style={{ marginTop: 12, marginBottom: 4 }}>
        <div className="config-card-row" style={{ alignItems: 'center' }}>
          <div>
            <span className="config-card-label" style={{ fontWeight: 600 }}>{t('config.systemUpdate')}</span>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>
              {isSudo ? t('config.systemUpdateDescSudo') : t('config.systemUpdateDescNoSudo')}
            </div>
          </div>
          <button className="sm primary" onClick={handleSystemUpdate}>
            <Download size={12} style={{ verticalAlign: 'middle', marginRight: 4 }} />
            {t('config.updateBtn')}
          </button>
        </div>
      </div>

      <div className="section-title" style={{ marginTop: 20, marginBottom: 8, color: 'var(--danger)' }}>
        <AlertTriangle size={14} style={{ verticalAlign: 'middle', marginRight: 6 }} />
        Zone Rouge
      </div>
      <div className="config-card" style={{ borderColor: 'var(--danger)', borderWidth: 1, borderStyle: 'solid' }}>
        <div className="config-card-row" style={{ marginBottom: 16 }}>
          <span className="config-card-label" style={{ fontWeight: 600, color: 'var(--danger)' }}>{t('config.resetConfig')}</span>
        </div>
        <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginBottom: 12 }}>
          Cette action supprimera toute votre configuration et relancera l'application.
        </div>
        <button className="sm ghost danger" onClick={() => setShowResetModal(true)}>
          {t('config.resetConfig')}
        </button>
      </div>

      {showResetModal && (
        <div className="shell-modal-overlay" onClick={() => setShowResetModal(false)}>
          <div className="shell-modal" onClick={e => e.stopPropagation()}>
            <div className="shell-modal-header" style={{ color: 'var(--danger)' }}>
              <AlertTriangle size={16} style={{ verticalAlign: 'middle', marginRight: 8 }} />
              {t('config.resetConfig')}
            </div>
            <div className="shell-modal-body">
              <p style={{ color: 'var(--warning)', fontSize: 13, marginBottom: 12 }}>
                {t('config.resetConfirm')}
              </p>
              <p style={{ color: 'var(--text-tertiary)', fontSize: 12 }}>
                Cette action est irréversible. Toute votre configuration (profil, clés API, préférences) sera supprimée.
              </p>
            </div>
            <div className="shell-modal-footer">
              <button className="ghost" onClick={() => setShowResetModal(false)}>{t('config.cancel')}</button>
              <button className="danger" onClick={handleReset}>{t('config.resetConfig')}</button>
            </div>
          </div>
        </div>
      )}
    </>
  )
}

function FormInput({ label, value, onChange, type = 'text' }) {
  return (
    <div className="config-form-field">
      <label className="config-form-label">{label}</label>
      <input
        className="config-form-input"
        type={type}
        value={value}
        onChange={e => onChange(e.target.value)}
      />
    </div>
  )
}