import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import './index.css';
import logo from './assets/logo.png';

interface QueuedOutput {
  id: string;
  target: string;
  content: string;
  status: 'pending' | 'approved' | 'rejected';
  metadata: string | null;
  comment: string | null;
  created_at: string;
}

const App: React.FC = () => {
  const { t, i18n } = useTranslation();
  const [items, setItems] = useState<QueuedOutput[]>([]);
  const [loading, setLoading] = useState(true);
  const [currentView, setCurrentView] = useState<'pending' | 'settings'>('pending');
  const [sidebarWidth, setSidebarWidth] = useState(280);
  const [masterWidth, setMasterWidth] = useState(320);
  const [resizingType, setResizingType] = useState<'sidebar' | 'master' | null>(null);
  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);

  // Auto-select first item
  useEffect(() => {
    if (items.length > 0 && !selectedItemId) {
      setSelectedItemId(items[0].id);
    }
  }, [items]);

  useEffect(() => {
    document.documentElement.style.setProperty('--dynamic-sidebar-width', `${sidebarWidth}px`);
  }, [sidebarWidth]);

  useEffect(() => {
    document.documentElement.style.setProperty('--dynamic-master-width', `${masterWidth}px`);
  }, [masterWidth]);

  const handleLanguageChange = (lang: string) => {
    i18n.changeLanguage(lang);
  };

  const startResizing = (type: 'sidebar' | 'master') => (e: React.MouseEvent) => {
    setResizingType(type);
    e.preventDefault();
  };

  const stopResizing = () => {
    setResizingType(null);
  };

  const resize = (e: MouseEvent) => {
    if (resizingType === 'sidebar') {
      const newWidth = e.clientX - 64; // 64px is the activity bar width
      if (newWidth > 150 && newWidth < 600) {
        setSidebarWidth(newWidth);
      }
    } else if (resizingType === 'master') {
      const sidebarTotal = 64 + sidebarWidth;
      const newWidth = e.clientX - sidebarTotal;
      if (newWidth > 200 && newWidth < 800) {
        setMasterWidth(newWidth);
      }
    }
  };

  useEffect(() => {
    if (resizingType) {
      window.addEventListener('mousemove', resize);
      window.addEventListener('mouseup', stopResizing);
    } else {
      window.removeEventListener('mousemove', resize);
      window.removeEventListener('mouseup', stopResizing);
    }
    return () => {
      window.removeEventListener('mousemove', resize);
      window.removeEventListener('mouseup', stopResizing);
    };
  }, [resizingType, sidebarWidth]); // need sidebarWidth for master resizing calc

  useEffect(() => {
    document.documentElement.style.setProperty('--dynamic-sidebar-width', `${sidebarWidth}px`);
  }, [sidebarWidth]);

  useEffect(() => {
    document.documentElement.style.setProperty('--dynamic-master-width', `${masterWidth}px`);
  }, [masterWidth]);

  const fetchItems = async (showLoading = true) => {
    try {
      if (showLoading) setLoading(true);
      const response = await fetch('http://localhost:3001/api/pending');
      const data = await response.json();
      setItems(data);
    } catch (err) {
      console.error('Failed to fetch items:', err);
    } finally {
      if (showLoading) setLoading(false);
    }
  };

  useEffect(() => {
    let isMounted = true;
    
    const initialFetch = async () => {
      await fetchItems(true);
    };

    initialFetch();

    // SSE Setup
    const eventSource = new EventSource('http://localhost:3001/api/sse');
    
    eventSource.onmessage = (event) => {
      console.log('SSE Event received:', event.data);
      if (isMounted) {
        fetchItems(false);
      }
    };

    eventSource.onerror = (err) => {
      console.error('SSE Error:', err);
      eventSource.close();
    };

    return () => {
      isMounted = false;
      eventSource.close();
    };
  }, []);

  const handleApprove = async (id: string) => {
    try {
      await fetch(`http://localhost:3001/api/approve/${id}`, { method: 'POST' });
      fetchItems(false);
    } catch (err) {
      alert('Failed to approve');
    }
  };

  const handleReject = async (id: string) => {
    const comment = prompt('Enter rejection feedback:');
    if (comment === null) return;
    try {
      await fetch(`http://localhost:3001/api/reject/${id}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ comment }),
      });
      fetchItems(false);
    } catch (err) {
      alert('Failed to reject');
    }
  };

  const mcpConfigSnippet = {
    "mcpServers": {
      "exolauncher": {
        "type": "sse",
        "url": "http://localhost:3001/mcp/sse"
      }
    }
  };

  useEffect(() => {
    document.documentElement.style.setProperty('--dynamic-sidebar-width', `${sidebarWidth}px`);
  }, [sidebarWidth]);

  return (
    <div className="app-container">
      {/* Sidebar (Dual Pane) */}
      <aside className="sidebar">
        {/* Activity Bar (Icons Only) */}
        <div className="activity-bar">
          <div className="logo-mini">
            <img src={logo} alt="Logo" />
          </div>
          <button 
            className={`activity-item ${currentView === 'pending' ? 'active' : ''}`}
            onClick={() => setCurrentView('pending')}
            title="Pending Queue"
          >
            <svg className="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
              <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
            </svg>
          </button>
          <button 
            className={`activity-item ${currentView === 'settings' ? 'active' : ''}`}
            onClick={() => setCurrentView('settings')}
            title="MCP Settings"
          >
            <svg className="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>
          </button>
        </div>

        {/* Side Panel (Details) */}
        <div className="side-panel">
          <div className="panel-header">
            <h3>{currentView === 'pending' ? t('common.dashboard') : t('common.configuration')}</h3>
          </div>
          <nav className="panel-nav">
            {currentView === 'pending' ? (
              <>
                <div className="panel-label">{t('sidebar.queues')}</div>
                <button className="panel-item active">{t('sidebar.pending')}</button>
                <button className="panel-item">{t('sidebar.history')}</button>
              </>
            ) : (
              <>
                <div className="panel-label">{t('sidebar.settings')}</div>
                <button className="panel-item active">{t('sidebar.mcp_servers')}</button>
                <button className="panel-item">{t('sidebar.network')}</button>
              </>
            )}
          </nav>
          <div className="sidebar-footer">
            {t('common.version', { version: '0.0.0' })}
          </div>
        </div>

        {/* Resizer Handle */}
        <div className="resizer" onMouseDown={startResizing('sidebar')} />
      </aside>

      <div className="main-content">
        <header className="main-header">
          <h1>{currentView === 'pending' ? t('views.pending_approvals') : t('views.mcp_settings')}</h1>
          <div className="status-badge">{t('common.status')}</div>
        </header>

        <main className="content">
          {currentView === 'pending' ? (
            loading ? (
              <div className="loading">{t('common.loading')}</div>
            ) : (
              <div className="split-view">
                <div className="master-list">
                  {items.length === 0 ? (
                    <div className="empty-list-message">
                      <p>{t('views.empty')}</p>
                    </div>
                  ) : (
                    items.map((item) => (
                      <div 
                        key={item.id} 
                        className={`list-item ${selectedItemId === item.id ? 'active' : ''}`}
                        onClick={() => setSelectedItemId(item.id)}
                      >
                        <div className="item-meta">
                          <span className="item-target">{item.target}</span>
                          <span className="item-time">{new Date(item.created_at).toLocaleTimeString(i18n.language === 'ja' ? 'ja-JP' : 'en-US', { hour: '2-digit', minute: '2-digit' })}</span>
                        </div>
                        <div className="item-snippet">{item.content.substring(0, 40)}...</div>
                      </div>
                    ))
                  )}
                </div>
                
                {/* Master-Detail Resizer */}
                <div className="resizer-v" onMouseDown={startResizing('master')} />

                <div className="detail-pane">
                  {items.length > 0 && items.find(i => i.id === selectedItemId) ? (
                    (() => {
                      const selectedItem = items.find(i => i.id === selectedItemId)!;
                      return (
                        <div className="preview-container">
                          <div className="preview-header">
                            <div className="header-info">
                              <h2>{selectedItem.target}</h2>
                              <span className="full-timestamp">{new Date(selectedItem.created_at).toLocaleString()}</span>
                            </div>
                            <div className="header-actions">
                              <button className="btn-reject" onClick={() => handleReject(selectedItem.id)}>{t('views.reject')}</button>
                              <button className="btn-approve" onClick={() => handleApprove(selectedItem.id)}>{t('views.approve')}</button>
                            </div>
                          </div>
                          <div className="preview-body">
                            <pre className="full-content">{selectedItem.content}</pre>
                            {selectedItem.metadata && (
                              <div className="detail-metadata">
                                <h4>Metadata</h4>
                                <code>{selectedItem.metadata}</code>
                              </div>
                            )}
                          </div>
                        </div>
                      );
                    })()
                  ) : (
                    <div className="no-selection">
                      <div className="empty-icon">
                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1-8.313-12.454z"></path>
                          <path d="M12 10l2 4l4 2l-4 2l-2 4l-2-4l-4-2l4-2z"></path>
                        </svg>
                      </div>
                      <p>{items.length === 0 ? '' : 'Select an item to preview'}</p>
                    </div>
                  )}
                </div>
              </div>
            )
          ) : (
            <div className="settings-view">
              <div className="settings-card">
                <h3>{t('sidebar.mcp_servers')}</h3>
                <p>{t('views.mcp_config_help')}</p>
                <div className="code-block">
                  <pre>{JSON.stringify(mcpConfigSnippet, null, 2)}</pre>
                  <button className="copy-btn" onClick={() => navigator.clipboard.writeText(JSON.stringify(mcpConfigSnippet, null, 2))}>
                    {t('views.copy_json')}
                  </button>
                </div>
                <div className="info-box">
                  <strong>{t('views.note')}:</strong> {t('views.sse_note')}
                </div>
              </div>

              <div className="settings-card">
                <h3>{t('settings.language')}</h3>
                <div className="select-wrapper">
                  <select 
                    className="lang-select"
                    title={t('settings.language')}
                    value={i18n.language}
                    onChange={(e) => handleLanguageChange(e.target.value)}
                  >
                    <option value="en">{t('settings.en')}</option>
                    <option value="ja">{t('settings.ja')}</option>
                  </select>
                </div>
              </div>
            </div>
          )}
        </main>
      </div>
    </div>
  );
};

export default App;
