'use client';

import { useState } from 'react';
import { ConnectionGate } from '@/components/ConnectionGate';
import { DashboardHeader } from '@/components/DashboardHeader';
import { ConversationList } from '@/components/ConversationList';
import { ConversationPanel } from '@/components/ConversationPanel';
import { SettingsPanel } from '@/components/SettingsPanel';
import { LeadsPanel } from '@/components/LeadsPanel';
import { Conversation } from '@/lib/db';

export default function DashboardPage() {
  const [selectedConversation, setSelectedConversation] = useState<Conversation | null>(null);
  const [activeTab, setActiveTab] = useState<'chats' | 'leads' | 'settings' | 'security'>('chats');
  
  // mobileView: 'list' | 'chat'
  const [mobileView, setMobileView] = useState<'list' | 'chat'>('list');

  const handleConversationSelect = (convo: Conversation) => {
    setSelectedConversation(convo);
    setMobileView('chat');
  };

  const handleConversationDelete = (id: number) => {
    if (selectedConversation?.id === id) {
      setSelectedConversation(null);
      setMobileView('list');
    }
  };

  const handleBackMobile = () => {
    setMobileView('list');
  };

  return (
    <ConnectionGate>
      <div className="backdrop" aria-hidden="true"></div>
      <div className="toast-stack" id="toastStack"></div>

      <div id="screen-dashboard" className="screen active">
        {/* Header */}
        <DashboardHeader
          activeTab={activeTab}
          onChangeTab={setActiveTab}
        />

        {/* Main Content */}
        <div className="dash-body">
          {activeTab === 'chats' && (
            <>
              {/* Sidebar */}
              <aside className={`sidebar ${mobileView === 'chat' ? 'hidden-mobile' : ''}`} id="sidebarPanel">
                <ConversationList
                  onSelect={handleConversationSelect}
                  selectedId={selectedConversation?.id || null}
                />
              </aside>

              {/* Dynamic Content Panel */}
              <section className={`chat-main ${mobileView === 'list' ? 'hidden-mobile' : ''}`} id="chatPanel">
                <ConversationPanel
                  conversation={selectedConversation}
                  onDelete={handleConversationDelete}
                  onBackMobile={handleBackMobile}
                />
              </section>
            </>
          )}
          {activeTab === 'leads' && <LeadsPanel />}
          {activeTab === 'settings' && (
            <div style={{
              flex: 1,
              height: '100%',
              overflow: 'hidden auto',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              padding: '32px 24px 40px',
            }}>
              {/* Page Header */}
              <div style={{
                width: '100%',
                maxWidth: '860px',
                marginBottom: '28px',
                display: 'flex',
                alignItems: 'flex-start',
                justifyContent: 'space-between',
                gap: '16px',
              }}>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '6px' }}>
                    <div style={{
                      width: '38px', height: '38px', borderRadius: '10px',
                      background: 'linear-gradient(135deg, rgba(16,185,129,0.2), rgba(52,211,153,0.1))',
                      border: '1px solid rgba(16,185,129,0.25)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: '18px',
                    }}>⚙️</div>
                    <h1 style={{ fontSize: '1.4rem', fontWeight: 800, color: 'var(--text)', margin: 0 }}>Configuración</h1>
                  </div>
                  <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)', margin: 0, paddingLeft: '50px' }}>
                    Personaliza el comportamiento del bot, horarios, prompts y más.
                  </p>
                </div>
              </div>

              {/* Settings Panel */}
              <div style={{
                width: '100%',
                maxWidth: '860px',
                background: 'var(--panel-bg)',
                borderRadius: '20px',
                border: '1px solid var(--border-strong)',
                boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
                overflow: 'hidden',
                minHeight: '500px',
              }}>
                <SettingsPanel mode="settings" embedded={true} />
              </div>
            </div>
          )}
          {activeTab === 'security' && (
            <div style={{
              flex: 1,
              height: '100%',
              overflow: 'hidden auto',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              padding: '32px 24px 40px',
            }}>
              {/* Page Header */}
              <div style={{
                width: '100%',
                maxWidth: '860px',
                marginBottom: '28px',
                display: 'flex',
                alignItems: 'flex-start',
                gap: '16px',
              }}>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '6px' }}>
                    <div style={{
                      width: '38px', height: '38px', borderRadius: '10px',
                      background: 'linear-gradient(135deg, rgba(239,68,68,0.2), rgba(239,68,68,0.08))',
                      border: '1px solid rgba(239,68,68,0.25)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: '18px',
                    }}>🛡️</div>
                    <h1 style={{ fontSize: '1.4rem', fontWeight: 800, color: 'var(--text)', margin: 0 }}>Seguridad</h1>
                  </div>
                  <p style={{ fontSize: '0.78rem', color: 'var(--text-muted)', margin: 0, paddingLeft: '50px' }}>
                    Gestiona claves API, permisos de acceso y auditoría del sistema.
                  </p>
                </div>
              </div>

              {/* Security Panel */}
              <div style={{
                width: '100%',
                maxWidth: '860px',
                background: 'var(--panel-bg)',
                borderRadius: '20px',
                border: '1px solid var(--border-strong)',
                boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
                overflow: 'hidden',
                minHeight: '500px',
              }}>
                <SettingsPanel mode="security" embedded={true} />
              </div>
            </div>
          )}
        </div>
      </div>
    </ConnectionGate>
  );
}