import { useState, useEffect, useCallback } from 'react';
import useLabStore from '../store/labStore';
import { listOllamaModels, getOllamaModel, setOllamaModel } from '../services/localLLM';

// ── Sub-components ────────────────────────────────────────────────────────────

function StatusBadge({ status }) {
  if (status.usesSay) {
    return (
      <span className="px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
        Ready (macOS Voice)
      </span>
    );
  }
  if (status.available) {
    return (
      <span className="px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
        Ready
      </span>
    );
  }
  if (status.modelsDownloaded && !status.binaryPresent) {
    return (
      <span className="px-2.5 py-1 rounded-full text-xs font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20">
        Binary missing
      </span>
    );
  }
  if (!status.modelsDownloaded && status.binaryPresent) {
    return (
      <span className="px-2.5 py-1 rounded-full text-xs font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20">
        Model not installed
      </span>
    );
  }
  return (
    <span className="px-2.5 py-1 rounded-full text-xs font-medium bg-white/[0.04] text-slate-500 border border-white/[0.06]">
      Not installed
    </span>
  );
}

function ProgressBar({ progress }) {
  const { status, percent, file, error } = progress || {};

  if (status === 'error') {
    return (
      <p className="text-xs text-red-400 mb-3">
        Installation failed{error ? `: ${error}` : ''}. Check your internet connection and try again.
      </p>
    );
  }

  if (status === 'exists' || status === 'complete') {
    return (
      <div className="flex items-center gap-2 mb-3">
        <div className="w-4 h-4 rounded-full bg-emerald-500/20 flex items-center justify-center flex-shrink-0">
          <svg className="w-2.5 h-2.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
            <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
          </svg>
        </div>
        <p className="text-xs text-emerald-400">{file ? `${file} — ` : ''}{status === 'exists' ? 'already installed' : 'done'}</p>
      </div>
    );
  }

  if (status === 'downloading' || status === 'starting') {
    const pct = typeof percent === 'number' ? percent : null;
    return (
      <div className="space-y-1.5 mb-3">
        <div className="flex-1 h-1.5 bg-white/[0.06] rounded-full overflow-hidden">
          <div
            className={`h-full progress-bar-fill rounded-full transition-all duration-300 ${pct === null ? 'animate-pulse' : ''}`}
            style={{ width: pct !== null ? `${pct}%` : '40%' }}
          />
        </div>
        <p className="text-xs text-slate-400">
          {pct !== null ? `${pct}%` : 'Preparing…'}
          {file ? ` — ${file}` : ''}
        </p>
      </div>
    );
  }

  return null;
}

// ── Main screen ───────────────────────────────────────────────────────────────

export default function SettingsScreen() {
  const { navigate, useLocalAI, setUseLocalAI, theme, setTheme } = useLabStore();
  const [downloading, setDownloading] = useState({ piper: false, whisper: false });
  const [status, setStatus]           = useState({
    piper:   { available: false, modelsDownloaded: false, binaryPresent: false },
    whisper: { available: false, modelsDownloaded: false, binaryPresent: false },
  });
  const [progress, setProgress]       = useState({});
  const [ollamaModels, setOllamaModels] = useState([]);
  const [selectedModel, setSelectedModel] = useState(getOllamaModel());
  const [modelSaved, setModelSaved]   = useState(false);

  const checkStatus = useCallback(async () => {
    if (!window.electronAPI?.download) return;
    try {
      const s = await window.electronAPI.download.status();
      setStatus({
        piper:   s.piper   || { available: false, modelsDownloaded: false, binaryPresent: false },
        whisper: s.whisper || { available: false, modelsDownloaded: false, binaryPresent: false },
      });
    } catch (err) {
      console.warn('Failed to check download status:', err);
    }
  }, []);

  useEffect(() => {
    checkStatus();
    listOllamaModels().then(setOllamaModels);

    if (window.electronAPI) {
      window.electronAPI.config.get('ollamaModel').then(saved => {
        if (saved) { setOllamaModel(saved); setSelectedModel(saved); }
      });
      window.electronAPI.config.get('useLocalAI').then(saved => {
        if (saved != null) setUseLocalAI(saved);
      });
    }

    // Register progress listener — capture the returned cleanup fn
    let cleanup;
    if (window.electronAPI?.download?.onProgress) {
      cleanup = window.electronAPI.download.onProgress((data) => {
        setProgress(prev => ({ ...prev, [data.type]: data }));

        if (data.status === 'complete' || data.status === 'error') {
          setDownloading(prev => ({ ...prev, [data.type]: false }));
          checkStatus();
        }
      });
    }

    return () => { if (typeof cleanup === 'function') cleanup(); };
  }, [checkStatus, setUseLocalAI]);

  const downloadModel = async (type) => {
    if (!window.electronAPI?.download) return;
    setDownloading(prev => ({ ...prev, [type]: true }));
    setProgress(prev => ({ ...prev, [type]: { status: 'starting', percent: 0 } }));
    try {
      await window.electronAPI.download.start(type);
      await checkStatus();
    } catch (err) {
      console.error('Download failed:', err);
      setProgress(prev => ({ ...prev, [type]: { status: 'error', error: err.message } }));
    } finally {
      setDownloading(prev => ({ ...prev, [type]: false }));
    }
  };

  const saveOllamaModel = async (model) => {
    setOllamaModel(model);
    setSelectedModel(model);
    if (window.electronAPI) await window.electronAPI.config.set('ollamaModel', model);
    setModelSaved(true);
    setTimeout(() => setModelSaved(false), 2000);
  };

  const toggleLocalAI = async (value) => {
    setUseLocalAI(value);
    if (window.electronAPI) await window.electronAPI.config.set('useLocalAI', value);
  };

  const isElectron = !!window.electronAPI;

  // ── Model card helper ───────────────────────────────────────────────────────

  const platform = window.electronAPI?.platform;

  const ModelCard = ({ type, label, subtitle, iconColor, iconBg, icon, size }) => {
    const s = status[type];
    const isDownloading = downloading[type];
    const prog = progress[type];
    // macOS TTS is always ready via built-in 'say' — no install needed
    const isAutoReady = s.usesSay;
    const alreadyInstalled = s.modelsDownloaded && s.binaryPresent;

    return (
      <div className="glass rounded-2xl p-5 mb-4">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-3">
            <div className={`w-10 h-10 rounded-xl ${iconBg} flex items-center justify-center`}>
              <svg className={`w-5 h-5 ${iconColor}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                {icon}
              </svg>
            </div>
            <div>
              <h3 className="font-semibold text-sm">{label}</h3>
              <p className="text-xs text-slate-500">{subtitle}</p>
            </div>
          </div>
          <StatusBadge status={s} />
        </div>

        {/* Binary missing warning */}
        {!isAutoReady && s.modelsDownloaded && !s.binaryPresent && (
          <div className="bg-amber-500/10 border border-amber-500/20 rounded-xl px-3 py-2 mb-3">
            <p className="text-xs text-amber-400">
              Model installed but the {type === 'piper' ? 'Piper' : 'Whisper'} runtime is missing.
              Click Install to download it automatically.
            </p>
          </div>
        )}

        <p className="text-xs text-slate-400 mb-4">
          {isAutoReady
            ? 'Uses macOS built-in voice synthesis — works offline with no setup required.'
            : `Installs an offline ${type === 'piper' ? 'voice synthesis' : 'speech recognition'} engine (${size}). Enables ${type === 'piper' ? 'voice output' : 'voice input'} without internet after installation.`
          }
        </p>

        {/* Progress bar (shown while installing) */}
        {isDownloading && <ProgressBar progress={prog} />}

        {/* Install button — hidden for auto-ready and while installing */}
        {!isAutoReady && !isDownloading && (
          <button
            onClick={() => downloadModel(type)}
            disabled={!isElectron || alreadyInstalled}
            className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
              alreadyInstalled
                ? 'bg-white/[0.04] text-slate-500 cursor-not-allowed'
                : 'accent-gradient accent-glow-sm text-white'
            }`}
          >
            {alreadyInstalled ? 'Installed' : 'Install'}
          </button>
        )}
      </div>
    );
  };

  // ── Render ──────────────────────────────────────────────────────────────────

  return (
    <div className="min-h-screen bg-mesh text-white flex flex-col">
      <header className="glass border-0 border-b border-white/[0.06] px-5 py-3 flex items-center gap-3">
        <button
          onClick={() => navigate('dashboard')}
          className="text-slate-400 hover:text-white transition-colors p-1.5 rounded-lg hover:bg-white/[0.05]"
        >
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
          </svg>
        </button>
        <p className="font-semibold text-sm">Settings</p>
      </header>

      <main className="flex-1 p-6 max-w-2xl mx-auto w-full animate-slide-up">
        <h1 className="text-xl font-bold mb-6 tracking-tight">AI Models</h1>

        {!isElectron && (
          <div className="bg-amber-500/10 border border-amber-500/20 rounded-2xl p-4 mb-6 animate-fade-in">
            <p className="text-amber-400 text-sm">
              Model downloads are only available in the desktop app. You are currently running in browser mode.
            </p>
          </div>
        )}

        {/* TTS */}
        <ModelCard
          type="piper"
          label="Text-to-Speech (TTS)"
          subtitle="Piper — Offline voice synthesis"
          iconColor="text-blue-400"
          iconBg="bg-blue-500/15"
          size="~63 MB"
          icon={
            <path strokeLinecap="round" strokeLinejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
          }
        />

        {/* STT */}
        <ModelCard
          type="whisper"
          label="Speech-to-Text (STT)"
          subtitle="Whisper — Offline voice recognition"
          iconColor="text-rose-400"
          iconBg="bg-rose-500/15"
          size="~75 MB"
          icon={
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z" />
          }
        />

        {/* AI Source */}
        <div className="glass rounded-2xl p-5 mb-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-purple-500/15 flex items-center justify-center">
                <svg className="w-5 h-5 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 0 0-2.455 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
                </svg>
              </div>
              <div>
                <h3 className="font-semibold text-sm">AI Source</h3>
                <p className="text-xs text-slate-500">
                  {useLocalAI ? 'Using local Ollama model' : 'Using Sarthi Cloud AI (default)'}
                </p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <span className={`text-xs ${!useLocalAI ? 'text-indigo-400 font-semibold' : 'text-slate-600'}`}>Cloud</span>
              <button
                onClick={() => toggleLocalAI(!useLocalAI)}
                disabled={useLocalAI && ollamaModels.length === 0}
                className={`relative w-11 h-6 rounded-full transition-colors ${
                  useLocalAI ? 'bg-emerald-500' : 'bg-white/[0.1]'
                } disabled:opacity-40`}
              >
                <span className={`absolute top-1 w-4 h-4 bg-white rounded-full shadow transition-all ${
                  useLocalAI ? 'left-6' : 'left-1'
                }`} />
              </button>
              <span className={`text-xs ${useLocalAI ? 'text-emerald-400 font-semibold' : 'text-slate-600'}`}>Local</span>
            </div>
          </div>
          {useLocalAI && ollamaModels.length === 0 && (
            <p className="text-xs text-amber-400 mt-3">
              Ollama not detected at localhost:11434. Install Ollama and pull a model to use local AI.
            </p>
          )}
          {!useLocalAI && (
            <p className="text-xs text-slate-500 mt-3">
              Sarthi Cloud uses the full NCERT curriculum prompt and tracks progress. Recommended for most students.
            </p>
          )}
        </div>

        {/* Ollama model selector */}
        {useLocalAI && ollamaModels.length > 0 && (
          <div className="glass rounded-2xl p-5 mb-4 animate-fade-in">
            <div className="flex items-center gap-3 mb-3">
              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center">
                <svg className="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
                </svg>
              </div>
              <div>
                <h3 className="font-semibold text-sm">Local AI Model (Ollama)</h3>
                <p className="text-xs text-slate-500">Choose which model to use for offline chat</p>
              </div>
            </div>
            <div className="flex gap-2 flex-wrap">
              {ollamaModels.map(m => (
                <button
                  key={m}
                  onClick={() => saveOllamaModel(m)}
                  className={`px-3 py-1.5 rounded-lg text-xs font-mono transition-all ${
                    selectedModel === m
                      ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20'
                      : 'bg-white/[0.05] text-slate-300 hover:bg-white/[0.08] border border-white/[0.06]'
                  }`}
                >
                  {m}
                </button>
              ))}
            </div>
            {modelSaved && <p className="text-xs text-emerald-400 mt-2 animate-fade-in">Saved!</p>}
          </div>
        )}

        {/* Theme */}
        <div className="glass rounded-2xl p-5 mb-4">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center">
                <svg className="w-5 h-5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z" />
                </svg>
              </div>
              <div>
                <h3 className="font-semibold text-sm">Theme</h3>
                <p className="text-xs text-slate-500">Change the look and feel</p>
              </div>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-3">
            {[
              { id: 'indigo', name: 'Nebula', desc: 'Indigo & purple', colors: ['from-indigo-500 to-purple-600', 'from-purple-500 to-indigo-600', 'from-blue-500 to-indigo-500'] },
              { id: 'emerald', name: 'Forest', desc: 'Emerald & teal', colors: ['from-emerald-500 to-teal-600', 'from-teal-500 to-cyan-600', 'from-cyan-500 to-emerald-500'] },
            ].map(t => (
              <button
                key={t.id}
                onClick={async () => { setTheme(t.id); if (window.electronAPI) await window.electronAPI.config.set('theme', t.id); }}
                className={`relative rounded-xl p-4 border-2 transition-all ${
                  theme === t.id
                    ? `border-${t.id === 'indigo' ? 'indigo' : 'emerald'}-500 bg-${t.id === 'indigo' ? 'indigo' : 'emerald'}-500/10`
                    : 'border-white/[0.06] bg-white/[0.02] hover:border-white/[0.12]'
                }`}
              >
                <div className="flex items-center gap-2 mb-3">
                  {t.colors.map((c, i) => (
                    <div key={i} className={`w-4 h-4 rounded-full bg-gradient-to-br ${c}`} />
                  ))}
                </div>
                <p className="text-sm font-semibold text-white">{t.name}</p>
                <p className="text-xs text-slate-500">{t.desc}</p>
                {theme === t.id && (
                  <div className={`absolute top-2 right-2 w-5 h-5 rounded-full ${t.id === 'indigo' ? 'bg-indigo-500' : 'bg-emerald-500'} flex items-center justify-center`}>
                    <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                      <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                    </svg>
                  </div>
                )}
              </button>
            ))}
          </div>
        </div>

        {/* Info */}
        <div className="glass rounded-2xl p-5">
          <h3 className="font-semibold text-sm mb-2">About Offline Setup</h3>
          <ul className="text-xs text-slate-400 space-y-1.5 mb-3">
            <li className="flex items-start gap-2">
              <span className="w-1 h-1 rounded-full bg-emerald-500/60 flex-shrink-0 mt-1.5" />
              <span><strong className="text-slate-300">TTS (macOS):</strong> Uses the macOS built-in voice engine — no installation needed, works offline automatically.</span>
            </li>
            <li className="flex items-start gap-2">
              <span className="w-1 h-1 rounded-full bg-slate-600 flex-shrink-0 mt-1.5" />
              <span><strong className="text-slate-300">TTS (Linux):</strong> Click Install to download the Piper engine and voice model (~63 MB).</span>
            </li>
            <li className="flex items-start gap-2">
              <span className="w-1 h-1 rounded-full bg-slate-600 flex-shrink-0 mt-1.5" />
              <span><strong className="text-slate-300">STT:</strong> Click Install to download the Whisper speech recognition model (~75 MB). Works fully offline after setup.</span>
            </li>
          </ul>
          <p className="text-xs text-slate-500">
            Models are stored in your user data folder and persist across app updates.
            One-time install per device — no internet required after setup.
          </p>
        </div>
      </main>
    </div>
  );
}