MuyueWorkspace/web/src/components/Config.jsx

import { useState, useEffect, useCallback } from 'react'
import { User, Brain, RefreshCw, Globe, Wrench, Monitor } from 'lucide-react'
import { useI18n, LANGUAGES } from '../i18n'
import { getLayoutList } from '../i18n/keyboards'

const PANELS = [
  { id: 'profile', icon: User },
  { id: 'providers', icon: Brain },
  { id: 'updates', icon: RefreshCw },
  { id: 'locale', icon: Globe },
  { 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 [updates, setUpdates] = useState([])
  const [tools, setTools] = useState([])
  const [checking, setChecking] = useState(false)
  const [updating, setUpdating] = useState(null)
  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 layouts = getLayoutList()

  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.getUpdates().then(d => setUpdates(d.updates || [])).catch(() => {})
    api.getTools().then(d => setTools(d.tools || [])).catch(() => {})

  }, [api])

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

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

  const handleCheckUpdates = async () => {
    setChecking(true)
    try {
      await api.runScan()
      const d = await api.getUpdates()
      setUpdates(d.updates || [])
      const td = await api.getTools()
      setTools(td.tools || [])
      showToast(t('config.upToDate'))
    } catch (err) {
      showToast(`${t('config.error')}: ${err.message}`)
    }
    setChecking(false)
  }

  const handleUpdateTool = (tool) => {
    window.dispatchEvent(new CustomEvent('navigate-to-shell', {}))
    window.dispatchEvent(new CustomEvent('ask-ai-terminal', { detail: { message: `Met à jour l'outil ${tool} sur mon système. Exécute les commandes nécessaires.` } }))
  }

  const handleUpdateAll = () => {
    const toUpdate = updates.filter(u => u.needsUpdate).map(u => u.tool)
    window.dispatchEvent(new CustomEvent('navigate-to-shell', {}))
    window.dispatchEvent(new CustomEvent('ask-ai-terminal', { detail: { message: `Met à jour tous les outils suivants sur mon système : ${toUpdate.join(', ')}. Exécute les commandes nécessaires une par une.` } }))
  }

  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.apiKey || '',
        model: p.model || '',
        base_url: p.baseURL || '',
      },
    }))
    setEditProvider(p.name)
  }

  const needsUpdateCount = updates.filter(u => u.needsUpdate).length
  const installedCount = tools.filter(tool => tool.installed).length
  const missingCount = tools.filter(tool => !tool.installed).length

  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 === 'updates' && (
            <PanelUpdates
              updates={updates} tools={tools}
              checking={checking} updating={updating}
              needsUpdateCount={needsUpdateCount}
              installedCount={installedCount} missingCount={missingCount}
              handleCheckUpdates={handleCheckUpdates}
              handleUpdateTool={handleUpdateTool}
              handleUpdateAll={handleUpdateAll}
              t={t}
            />
          )}
          {activePanel === 'locale' && (
            <PanelLocale
              language={language} keyboard={keyboard} layouts={layouts}
              api={api}
              t={t}
            />
          )}
          {activePanel === 'skills' && (
            <PanelSkills skillList={skillList} 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 [validationStatus, setValidationStatus] = useState(null)

  const handleValidate = async (name, apiKey, model, baseUrl) => {
    setValidating(name)
    setValidationStatus(null)
    try {
      await api.validateProvider({ name, api_key: apiKey, model, base_url: baseUrl })
      setValidationStatus({ provider: name, valid: true })
    } catch (err) {
      const msg = err.message || ''
      if (msg.includes('invalid_api_key')) {
        setValidationStatus({ provider: name, valid: false, error: t('config.keyInvalid') })
      } else {
        setValidationStatus({ provider: name, valid: false, error: `${t('config.connectionFailed')}: ${msg}` })
      }
    }
    setValidating(null)
  }

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

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

        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>}
                {isValidationTarget && validationStatus?.valid && <span className="badge ok">{t('config.keyValid')}</span>}
                {isValidationTarget && !validationStatus?.valid && <span className="badge error">{validationStatus?.error}</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.apiKey ? '••••••••' : 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 PanelUpdates({ updates, checking, updating, needsUpdateCount, installedCount, missingCount, handleCheckUpdates, handleUpdateTool, handleUpdateAll, t }) {
  return (
    <>
      <div className="config-card">
        <div className="config-update-controls">
          <div className="config-update-stats">
            <span className="badge ok">{installedCount} {t('config.installed')}</span>
            {missingCount > 0 && <span className="badge error">{missingCount} {t('config.missing')}</span>}
            {needsUpdateCount > 0 && <span className="badge warn">{needsUpdateCount} {t('config.needsUpdate')}</span>}
          </div>
          <div className="config-update-buttons">
            <button className="sm" onClick={handleCheckUpdates} disabled={checking}>
              {checking ? <><RefreshCw size={12} className="spin-icon" /> {t('config.checking')}</> : t('config.checkUpdates')}
            </button>
            {needsUpdateCount > 0 && (
              <button className="sm primary" onClick={handleUpdateAll} disabled={updating === '__all__'}>
                {updating === '__all__' ? t('config.updating') : `${t('config.updateAll')} (${needsUpdateCount})`}
              </button>
            )}
          </div>
        </div>
      </div>

      {updates.length === 0 ? (
        <div className="config-card">
          <div className="empty-state">{t('config.noUpdates')}</div>
        </div>
      ) : (
        <div className="config-update-list">
          {updates.map((u, i) => (
            <div key={i} className="config-update-row">
              <div className="config-update-info">
                <span className="config-update-name">{u.tool}</span>
                <span className="config-update-versions">
                  {u.needsUpdate ? (
                    <>{u.current} → <span style={{ color: 'var(--warning)' }}>{u.latest}</span></>
                  ) : (
                    <span style={{ color: 'var(--success)' }}>{u.current}</span>
                  )}
                </span>
              </div>
              {u.needsUpdate && (
                <button
                  className="sm"
                  onClick={() => handleUpdateTool(u.tool)}
                  disabled={updating === u.tool}
                >
                  {updating === u.tool ? t('config.updating') : t('config.updateTool')}
                </button>
              )}
            </div>
          ))}
        </div>
      )}
    </>
  )
}

function PanelLocale({ language, keyboard, layouts, api, t }) {
  const { setLanguage, setKeyboard } = useI18n()
  const [editLocale, setEditLocale] = useState(false)
  const [draftLang, setDraftLang] = useState(language)
  const [draftKbd, setDraftKbd] = useState(keyboard)
  const [saving, setSaving] = useState(false)
  const [toast, setToast] = useState(null)

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

  const handleSave = async () => {
    setSaving(true)
    try {
      await api.savePreferences({ language: draftLang, keyboard_layout: draftKbd })
      setLanguage(draftLang)
      setKeyboard(draftKbd)
      setEditLocale(false)
      showToast(t('config.saved'))
    } catch (err) {
      showToast(`${t('config.error')}: ${err.message}`)
    }
    setSaving(false)
  }

  const currentLang = LANGUAGES.find(l => l.id === language)
  const currentKbd = layouts.find(l => l.id === keyboard)

  return (
    <div className="config-profile-center">
      {toast && <div className="config-toast">{toast}</div>}
      <div className="config-card">
        <div className="config-card-row">
          <span className="config-card-label">{t('config.language')}</span>
          <span className="config-card-value">{currentLang?.name || language}</span>
        </div>
        <div className="config-card-row">
          <span className="config-card-label">{t('config.keyboardLayout')}</span>
          <span className="config-card-value">{currentKbd?.name || keyboard}</span>
        </div>
      </div>
      {editLocale && (
        <div className="config-card">
          <div className="config-card-group">
            <span className="config-card-group-label">{t('config.language')}</span>
            <div className="chip-row">
              {LANGUAGES.map(lang => (
                <div
                  key={lang.id}
                  className={`chip ${draftLang === lang.id ? 'active' : ''}`}
                  onClick={() => setDraftLang(lang.id)}
                >
                  {lang.name}
                </div>
              ))}
            </div>
          </div>
          <div className="config-card-group">
            <span className="config-card-group-label">{t('config.keyboardLayout')}</span>
            <div className="chip-row">
              {layouts.map(l => (
                <div
                  key={l.id}
                  className={`chip ${draftKbd === l.id ? 'active' : ''}`}
                  onClick={() => setDraftKbd(l.id)}
                >
                  {l.name}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
      <div className="config-card">
        <div className="config-card-actions" style={{ justifyContent: 'center' }}>
          {editLocale ? (
            <>
              <button className="primary sm" onClick={handleSave} disabled={saving}>
                {saving ? t('config.saving') : t('config.save')}
              </button>
              <button className="ghost sm" onClick={() => setEditLocale(false)}>{t('config.cancel')}</button>
            </>
          ) : (
            <button className="primary sm" onClick={() => { setDraftLang(language); setDraftKbd(keyboard); setEditLocale(true) }}>{t('config.editProfile')}</button>
          )}
        </div>
      </div>
    </div>
  )
}

function PanelSkills({ skillList, t }) {
  const [selected, setSelected] = useState(null)

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

  return (
    <>
      <div className="skill-tiles">
        {skillList.map((s, i) => (
          <div key={i} className="skill-tile" onClick={() => setSelected(s)}>
            <div className="skill-tile-name">{s.name}</div>
            <div className="skill-tile-desc">{s.description}</div>
            <div className="skill-tile-tags">
              {s.target && <span className="badge neutral">{s.target}</span>}
              {s.version && <span className="badge">{s.version}</span>}
              {s.category && <span className="badge" style={{ opacity: 0.7 }}>{s.category}</span>}
            </div>
          </div>
        ))}
      </div>
      {selected && (
        <div className="skill-detail-overlay" onClick={() => setSelected(null)}>
          <div className="skill-detail-panel" onClick={e => e.stopPropagation()}>
            <div className="skill-detail-header">
              <span className="skill-detail-name">{selected.name}</span>
              <button className="ghost sm" onClick={() => setSelected(null)}>✕</button>
            </div>
            <div className="skill-detail-body">
              <div className="skill-detail-section">
                <div className="skill-detail-label">Description</div>
                <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{selected.description}</div>
              </div>
              <div className="skill-detail-section">
                <div className="skill-detail-label">Métadonnées</div>
                <div className="skill-detail-meta">
                  {selected.target && <span className="badge neutral">{selected.target}</span>}
                  {selected.version && <span className="badge">{selected.version}</span>}
                  {selected.category && <span className="badge">{selected.category}</span>}
                  {selected.author && <span className="badge ghost">{selected.author}</span>}
                  {selected.languages && selected.languages.map(l => <span key={l} className="badge ghost">{l}</span>)}
                </div>
              </div>
              {selected.tags && selected.tags.length > 0 && (
                <div className="skill-detail-section">
                  <div className="skill-detail-label">Tags</div>
                  <div className="chip-row">
                    {selected.tags.map(tag => <span key={tag} className="badge">{tag}</span>)}
                  </div>
                </div>
              )}
              {selected.content && (
                <div className="skill-detail-section">
                  <div className="skill-detail-label">Contenu</div>
                  <div className="skill-detail-content">{selected.content}</div>
                </div>
              )}
              {selected.dependencies && selected.dependencies.length > 0 && (
                <div className="skill-detail-section">
                  <div className="skill-detail-label">Dépendances</div>
                  <div className="skill-detail-deps">
                    {selected.dependencies.map((d, i) => (
                      <div key={i} className="skill-detail-dep">
                        <span className="badge">{d.type}</span>
                        <span>{d.name}</span>
                        {d.required === false && <span style={{ fontSize: 11, color: 'var(--text-disabled)' }}>optionnel</span>}
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </>
  )
}

function PanelSystem({ api, t }) {
  const [resetConfirm, setResetConfirm] = useState(false)
  const [toast, setToast] = useState(null)

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

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

  const handleApplyStarship = async () => {
    try {
      await api.applyStarshipTheme('charm')
      showToast(t('config.starshipApplied'))
    } catch (err) {
      showToast(`${t('config.error')}: ${err.message}`)
    }
  }

  return (
    <>
      {toast && <div className="config-toast">{toast}</div>}
      <div className="config-card">
        <div className="config-card-row" style={{ marginBottom: 16 }}>
          <span className="config-card-label" style={{ fontWeight: 600 }}>{t('config.applyStarship')}</span>
        </div>
        <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 12 }}>
          {t('config.starshipApplied')}
        </div>
        <button className="sm primary" onClick={handleApplyStarship}>
          {t('config.applyStarship')}
        </button>
      </div>
      <div className="config-card" style={{ marginTop: 12 }}>
        <div className="config-card-row" style={{ marginBottom: 16 }}>
          <span className="config-card-label" style={{ fontWeight: 600 }}>{t('config.resetConfig')}</span>
        </div>
        {resetConfirm ? (
          <div>
            <div style={{ fontSize: 12, color: 'var(--warning)', marginBottom: 12 }}>
              {t('config.resetConfirm')}
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="sm" onClick={() => setResetConfirm(false)}>{t('config.cancel')}</button>
              <button className="sm danger" onClick={handleReset}>{t('config.resetConfig')}</button>
            </div>
          </div>
        ) : (
          <button className="sm ghost danger" onClick={() => setResetConfirm(true)}>
            {t('config.resetConfig')}
          </button>
        )}
      </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>
  )
}