import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';

const PROVIDERS = [
  { id: 'openai', name: 'OpenAI', models: ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo'] },
  { id: 'anthropic', name: 'Anthropic', models: ['claude-3-5-sonnet-20241022', 'claude-3-5-haiku-20241022'] },
  { id: 'groq', name: 'Groq (Free tier)', models: ['llama-3.3-70b-versatile', 'mixtral-8x7b-32768'] },
  { id: 'openrouter', name: 'OpenRouter', models: ['auto'] },
];

function OptionsPage() {
  const [provider, setProvider] = useState('openai');
  const [apiKey, setApiKey] = useState('');
  const [model, setModel] = useState('gpt-4o-mini');
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    chrome.storage.local.get(['provider', 'apiKey', 'model'], (result) => {
      if (result.provider) setProvider(result.provider);
      if (result.apiKey) setApiKey(result.apiKey);
      if (result.model) setModel(result.model);
    });
  }, []);

  const handleSave = () => {
    chrome.storage.local.set({ provider, apiKey, model }, () => {
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    });
  };

  const currentProvider = PROVIDERS.find((p) => p.id === provider);

  return (
    <div style={{ maxWidth: 480, margin: '40px auto', fontFamily: 'system-ui, sans-serif', color: '#1e1e2e' }}>
      <h1 style={{ fontSize: 24, marginBottom: 4 }}>⚡ LexAI Settings</h1>
      <p style={{ color: '#6c6f85', marginBottom: 32 }}>Configure your own LLM provider and API key</p>

      <div style={{ marginBottom: 20 }}>
        <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>LLM Provider</label>
        <select
          value={provider}
          onChange={(e) => { setProvider(e.target.value); setModel(''); }}
          style={{ width: '100%', padding: '8px 12px', borderRadius: 8, border: '1px solid #cdd6f4', fontSize: 14 }}
        >
          {PROVIDERS.map((p) => (
            <option key={p.id} value={p.id}>{p.name}</option>
          ))}
        </select>
      </div>

      <div style={{ marginBottom: 20 }}>
        <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>Model</label>
        <select
          value={model}
          onChange={(e) => setModel(e.target.value)}
          style={{ width: '100%', padding: '8px 12px', borderRadius: 8, border: '1px solid #cdd6f4', fontSize: 14 }}
        >
          {(currentProvider?.models || []).map((m) => (
            <option key={m} value={m}>{m}</option>
          ))}
        </select>
      </div>

      <div style={{ marginBottom: 28 }}>
        <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>API Key</label>
        <input
          type="password"
          value={apiKey}
          onChange={(e) => setApiKey(e.target.value)}
          placeholder="sk-..."
          style={{ width: '100%', padding: '8px 12px', borderRadius: 8, border: '1px solid #cdd6f4', fontSize: 14, boxSizing: 'border-box' }}
        />
        <p style={{ fontSize: 12, color: '#6c6f85', marginTop: 6 }}>
          🔒 Stored locally on your device only. Never sent anywhere except the LLM provider.
        </p>
      </div>

      <button
        onClick={handleSave}
        style={{
          background: saved ? '#a6e3a1' : '#89b4fa',
          color: '#1e1e2e',
          border: 'none',
          borderRadius: 8,
          padding: '10px 28px',
          fontSize: 15,
          fontWeight: 600,
          cursor: 'pointer',
        }}
      >
        {saved ? '✓ Saved!' : 'Save Settings'}
      </button>
    </div>
  );
}

createRoot(document.getElementById('app')!).render(<OptionsPage />);