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

// ─── Safe chrome storage wrapper ─────────────────────────────────────────────

function safeStorageGet(keys: string[], callback: (result: Record<string, string>) => void) {
  try {
    if (typeof chrome === 'undefined' || !chrome.runtime?.id) return;
    chrome.storage.local.get(keys, callback);
  } catch (err) {
    console.warn('LexAI: Extension context invalidated', err);
  }
}

function Popup() {
  const [configured, setConfigured] = useState(false);
  const [provider, setProvider] = useState('');
  const [model, setModel] = useState('');

  useEffect(() => {
    safeStorageGet(["provider", "apiKey", "model"], (result) => {
      if (result.apiKey) {
        setConfigured(true);
        setProvider(result.provider || 'openai');
        setModel(result.model || '');
      }
    });
  }, []);

  const openSettings = () => {
    try {
      if (typeof chrome !== 'undefined' && chrome.runtime?.id) {
        chrome.runtime.openOptionsPage();
      }
    } catch (err) {
      console.warn('LexAI: Extension context invalidated', err);
    }
  };

  return (
    <div style={{ padding: 16, fontFamily: 'system-ui, sans-serif', color: '#1e1e2e' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <span style={{ fontSize: 20 }}>⚡</span>
        <span style={{ fontSize: 16, fontWeight: 700 }}>LexAI</span>
      </div>

      {configured ? (
        <div>
          <div style={{ background: '#e8f5e9', borderRadius: 8, padding: '8px 12px', marginBottom: 12 }}>
            <div style={{ fontSize: 12, color: '#388e3c', fontWeight: 600 }}>✓ Active</div>
            <div style={{ fontSize: 12, color: '#555', marginTop: 2 }}>{provider} / {model}</div>
          </div>
          <p style={{ fontSize: 12, color: '#6c6f85', marginBottom: 12 }}>
            Select any text on a webpage to see LexAI options appear.
          </p>
        </div>
      ) : (
        <div style={{ background: '#fff3e0', borderRadius: 8, padding: '8px 12px', marginBottom: 12 }}>
          <div style={{ fontSize: 12, color: '#e65100', fontWeight: 600 }}>⚠ Setup Required</div>
          <div style={{ fontSize: 12, color: '#555', marginTop: 2 }}>Add your API key to get started</div>
        </div>
      )}

      <button
        onClick={openSettings}
        style={{
          width: '100%',
          background: '#89b4fa',
          color: '#1e1e2e',
          border: 'none',
          borderRadius: 8,
          padding: '8px',
          fontSize: 13,
          fontWeight: 600,
          cursor: 'pointer',
        }}
      >
        ⚙ Open Settings
      </button>
    </div>
  );
}

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