import { useState, useEffect } from 'react'
import { CompanyTable } from './components/CompanyTable'
import { ContactsTable } from './components/ContactsTable' // NEW
import { ImportWizard } from './components/ImportWizard'
import { Inspector } from './components/Inspector'
import { RoboticsSettings } from './components/RoboticsSettings'
import { LayoutDashboard, UploadCloud, RefreshCw, Settings, Users, Building, Sun, Moon, Activity } from 'lucide-react'
import clsx from 'clsx'

// Base URL detection (Production vs Dev)
const API_BASE = import.meta.env.BASE_URL === '/ce/' ? '/ce/api' : '/api';

function App() {
  const [refreshKey, setRefreshKey] = useState(0)
  const [isImportOpen, setIsImportOpen] = useState(false)
  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
  const [selectedCompanyId, setSelectedCompanyId] = useState<number | null>(null)
  const [selectedContactId, setSelectedContactId] = useState<number | null>(null)
  const [backendVersion, setBackendVersion] = useState('');

  // Navigation State
  const [view, setView] = useState<'companies' | 'contacts'>('companies')

  // Theme State
  const [theme, setTheme] = useState<'dark' | 'light'>(() => {
    if (typeof window !== 'undefined' && window.localStorage) {
      return localStorage.getItem('theme') as 'dark' | 'light' || 'dark'
    }
    return 'dark'
  })

  useEffect(() => {
    if (theme === 'dark') {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
    localStorage.setItem('theme', theme)
  }, [theme])

  useEffect(() => {
    fetch(`${API_BASE}/health`)
      .then(res => res.json())
      .then(data => setBackendVersion(data.version || ''))
      .catch(() => setBackendVersion('N/A'))
  }, [])

  const toggleTheme = () => setTheme(prev => prev === 'dark' ? 'light' : 'dark')

  const handleCompanySelect = (id: number) => {
    setSelectedCompanyId(id)
    setSelectedContactId(null)
  }

  const handleCloseInspector = () => {
    setSelectedCompanyId(null)
    setSelectedContactId(null)
  }

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-200 font-sans transition-colors">
      <ImportWizard
        isOpen={isImportOpen}
        onClose={() => setIsImportOpen(false)}
        apiBase={API_BASE}
        onSuccess={() => setRefreshKey(k => k + 1)}
      />

      <RoboticsSettings
        isOpen={isSettingsOpen}
        onClose={() => setIsSettingsOpen(false)}
        apiBase={API_BASE}
      />

      <Inspector
        companyId={selectedCompanyId}
        initialContactId={selectedContactId}
        onClose={handleCloseInspector}
        apiBase={API_BASE}
      />

      {/* Header */}
      <header className="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/50 sticky top-0 z-10 backdrop-blur-md">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-blue-600 rounded-lg">
              <LayoutDashboard className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-xl font-bold text-slate-900 dark:text-white tracking-tight">Company Explorer</h1>
              <p className="text-xs text-blue-600 dark:text-blue-400 font-medium">ROBOTICS EDITION {backendVersion && <span className="text-slate-500 dark:text-slate-600 ml-2">v{backendVersion}</span>}</p>
            </div>
          </div>

          <div className="flex items-center gap-2 md:gap-4">
            {/* View Switcher */}
            <div className="hidden md:flex bg-slate-100 dark:bg-slate-800 rounded-lg p-1">
              <button
                onClick={() => setView('companies')}
                className={clsx("px-3 py-1.5 rounded-md text-sm font-medium transition-all flex items-center gap-2", view === 'companies' ? "bg-white dark:bg-slate-700 shadow text-blue-600 dark:text-white" : "text-slate-500 hover:text-slate-900 dark:hover:text-slate-300")}
              >
                <Building className="h-4 w-4" /> Companies
              </button>
              <button
                onClick={() => setView('contacts')}
                className={clsx("px-3 py-1.5 rounded-md text-sm font-medium transition-all flex items-center gap-2", view === 'contacts' ? "bg-white dark:bg-slate-700 shadow text-blue-600 dark:text-white" : "text-slate-500 hover:text-slate-900 dark:hover:text-slate-300")}
              >
                <Users className="h-4 w-4" /> Contacts
              </button>
            </div>

            <div className="h-6 w-px bg-slate-300 dark:bg-slate-700 mx-2 hidden md:block"></div>

            <button
              onClick={toggleTheme}
              className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors text-slate-500 dark:text-slate-400"
              title="Toggle Theme"
            >
              {theme === 'dark' ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
            </button>

            <a
              href="/connector/dashboard"
              target="_blank"
              rel="noopener noreferrer"
              className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors text-slate-500 dark:text-slate-400"
              title="Connector Status Dashboard"
            >
              <Activity className="h-5 w-5" />
            </a>

            <button
              onClick={() => setIsSettingsOpen(true)}
              className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors text-slate-500 dark:text-slate-400"
              title="Configure Robotics Logic"
            >
              <Settings className="h-5 w-5" />
            </button>

            <button
              onClick={() => setRefreshKey(k => k + 1)}
              className="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors text-slate-500 dark:text-slate-400"
              title="Refresh Data"
            >
              <RefreshCw className="h-5 w-5" />
            </button>

            {view === 'companies' && (
              <button
                className="hidden md:flex items-center gap-2 bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-md font-medium text-sm transition-all shadow-lg shadow-blue-900/20"
                onClick={() => setIsImportOpen(true)}
              >
                <UploadCloud className="h-4 w-4" />
                Import List
              </button>
            )}
          </div>
        </div>

        {/* Mobile Nav */}
        <div className="md:hidden border-t border-slate-200 dark:border-slate-800 flex">
          <button
            onClick={() => setView('companies')}
            className={clsx("flex-1 py-3 text-sm font-medium flex justify-center items-center gap-2 border-b-2", view === 'companies' ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-slate-500")}
          >
            <Building className="h-4 w-4" /> Companies
          </button>
          <button
            onClick={() => setView('contacts')}
            className={clsx("flex-1 py-3 text-sm font-medium flex justify-center items-center gap-2 border-b-2", view === 'contacts' ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-slate-500")}
          >
            <Users className="h-4 w-4" /> Contacts
          </button>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 h-[calc(100vh-4rem)]">

        <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl overflow-hidden shadow-sm dark:shadow-xl h-full">
          {view === 'companies' ? (
            <CompanyTable
              refreshKey={refreshKey}
              apiBase={API_BASE}
              onRowClick={handleCompanySelect}
              onImportClick={() => setIsImportOpen(true)}
            />
          ) : (
            <ContactsTable
              apiBase={API_BASE}
              onCompanyClick={(id) => { setSelectedCompanyId(id); setView('companies'); }}
              onContactClick={(companyId, contactId) => {
                setSelectedCompanyId(companyId);
                setSelectedContactId(contactId);
                // setView('companies')? No, we stay in context of 'Contacts' but Inspector opens
              }}
            />
          )}
        </div>
      </main>
    </div>
  )
}

export default App