// Main App
const { useState: useStApp, useMemo: useMemoApp, useEffect: useEffApp } = React;

function App({ user, onSignOut }) {
  const [data, setData] = useStApp(window.LMS_DATA);
  const [view, setView] = useStApp("list"); // Default to list view
  const [search, setSearch] = useStApp("");
  const [sort, setSort] = useStApp("lastActivity");
  const [filters, setFilters] = useStApp({ stages: [], agents: [], min: 1000000, max: 7000000, days: 30 });
  const [openLeadId, setOpenLeadId] = useStApp(null);
  const [transitioning, setTransitioning] = useStApp(false);

  // Listen for Firebase real-time updates
  useEffApp(() => {
    const handleFirebaseUpdate = () => {
      console.log('🔄 Firebase data updated, refreshing React state...');
      // Force deep copy to trigger React re-render
      setData({
        ...window.LMS_DATA,
        leads: [...window.LMS_DATA.leads]
      });
    };

    const handleFirebaseReset = () => {
      console.log('🗑️ Firebase cleared - resetting LMS to demo data');
      // Force deep copy to trigger React re-render with demo data
      setData({
        ...window.LMS_DATA,
        leads: [...window.LMS_DATA.leads]
      });
    };

    window.addEventListener('firebase:lead:added', handleFirebaseUpdate);
    window.addEventListener('firebase:lead:updated', handleFirebaseUpdate);
    window.addEventListener('firebase:lead:removed', handleFirebaseUpdate);
    window.addEventListener('firebase:lead:reset', handleFirebaseReset);

    return () => {
      window.removeEventListener('firebase:lead:added', handleFirebaseUpdate);
      window.removeEventListener('firebase:lead:updated', handleFirebaseUpdate);
      window.removeEventListener('firebase:lead:removed', handleFirebaseUpdate);
      window.removeEventListener('firebase:lead:reset', handleFirebaseReset);
    };
  }, []);

  // Refresh handler - advances Dushyant's pipeline step
  const handleRefresh = () => {
    console.log('🔄 Refresh button clicked');
    const newData = { ...data, leads: [...data.leads], metrics: { ...data.metrics } };
    const dushyantIndex = newData.leads.findIndex(l => l.id === 1);
    
    console.log('Current leads count:', newData.leads.length);
    console.log('Dushyant index:', dushyantIndex);
    
    if (dushyantIndex === -1) {
      // Dushyant not in list - add him
      const dushyantLead = {
        id: 1,
        pinned: false,
        borrower: "Dushyant Garg",
        business: "Garg Auto Parts",
        sector: "Auto Parts Trading & Distribution",
        amount: 4000000,
        agentId: "vikram",
        stageId: "new",
        lastActivity: "Just now",
        awaiting: true,
        phone: "+91 99109 88218",
        email: "dushyant@gargautoparts.in",
        city: "New Delhi, DL",
        vintage: "7 years",
        rating: "A-",
        pipelineStep: 0
      };
      newData.leads.unshift(dushyantLead); // Add to beginning
      
      // Update metrics when adding Dushyant
      newData.metrics.shown = 5;
      newData.metrics.pipelineValue = 18500000;  // Add 40L
      newData.metrics.awaitingAction = 2;  // Dushyant is awaiting
      
      console.log('✅ Dushyant Garg added to leads. New count:', newData.leads.length);
    } else {
      // Dushyant in list - remove him
      newData.leads.splice(dushyantIndex, 1);
      
      // Update metrics when removing Dushyant
      newData.metrics.shown = 4;
      newData.metrics.pipelineValue = 14500000;  // Subtract 40L
      newData.metrics.awaitingAction = 1;  // Only Manoj
      
      console.log('❌ Dushyant Garg removed from leads. New count:', newData.leads.length);
      
      // Close drawer if it's open for Dushyant
      if (openLead && openLead.id === 1) {
        setOpenLeadId(null);
      }
    }
    
    // Update window.LMS_DATA
    window.LMS_DATA = newData;
    setData(newData);
    console.log('State updated. Total leads now:', newData.leads.length);
  };

  // Check if refresh is disabled - never disable for toggle functionality
  const refreshDisabled = () => {
    return false;
  };

  // smooth fade between list/kanban
  const setViewSmooth = (next) => {
    if (next === view) return;
    setTransitioning(true);
    setTimeout(() => { setView(next); setTransitioning(false); }, 130);
  };

  const currentAgent = data.agents[data.currentAgentId];

  // Filter / search pipeline (always Vikram's view)
  const visibleLeads = useMemoApp(() => {
    let ls = data.leads;
    if (filters.stages.length) ls = ls.filter(l => filters.stages.includes(l.stageId));
    if (filters.agents.length) ls = ls.filter(l => filters.agents.includes(l.agentId));
    ls = ls.filter(l => l.amount >= filters.min && l.amount <= filters.max);
    if (search.trim()) {
      const q = search.toLowerCase();
      ls = ls.filter(l =>
        l.borrower.toLowerCase().includes(q) ||
        l.business.toLowerCase().includes(q) ||
        l.sector.toLowerCase().includes(q)
      );
    }
    return ls;
  }, [data.leads, filters, search]);

  const metrics = data.metrics;
  const setMetrics = (m) => {
    const newData = { ...data, metrics: m };
    window.LMS_DATA = newData;
    setData(newData);
  };

  const updateLead = (id, patch) => {
    const newData = {
      ...data,
      leads: data.leads.map(l => l.id === id ? { ...l, ...patch } : l),
    };
    window.LMS_DATA = newData;
    setData(newData);
  };

  // Navigate to timeline page for Dushyant, open drawer for others
  const handleLeadClick = (leadId) => {
    if (leadId === 1) {
      // Dushyant Garg - open timeline page
      window.location.href = 'timeline.html';
    } else {
      // Other leads - open drawer
      setOpenLeadId(leadId);
    }
  };

  const openLead = visibleLeads.find(l => l.id === openLeadId) || data.leads.find(l => l.id === openLeadId);

  return (
    <div style={{ display: "flex", minHeight: "100vh", background: "#fff", color: "#1F2433" }}>
      <Sidebar active="Dashboard" />
      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }}>
        <TopBar
          currentAgent={currentAgent}
          search={search}
          onSearch={setSearch}
          onRefresh={handleRefresh}
          refreshDisabled={refreshDisabled()}
          user={user}
          onSignOut={onSignOut}
        />
        <main style={{ flex: 1 }}>
          <PageHeader currentAgent={currentAgent} />
          <MetricsRow metrics={metrics} onUpdate={setMetrics} />

          <div style={{
            margin: "0 32px 40px",
            background: "#fff",
            border: "1px solid #ECECEA",
            borderRadius: 12,
            overflow: "hidden",
          }}>
            <TableToolbar
              filters={filters} setFilters={setFilters}
              stages={data.stages} agents={data.agents}
              sort={sort} setSort={setSort}
              view={view} setView={setViewSmooth}
              totalCount={data.metrics.totalLeads}
              shownCount={visibleLeads.length}
            />
            <div style={{
              opacity: transitioning ? 0 : 1,
              transition: "opacity 130ms ease",
            }}>
              {view === "list" ? (
                <ListView
                  leads={visibleLeads} agents={data.agents} stages={data.stages}
                  sort={sort}
                  onOpen={handleLeadClick} onUpdateLead={updateLead}
                />
              ) : (
                <KanbanView
                  leads={visibleLeads} stages={data.stages} agents={data.agents}
                  onOpen={handleLeadClick} onUpdateLead={updateLead}
                />
              )}
            </div>
          </div>
        </main>
      </div>
      {openLead && (
        <LeadDrawer
          lead={openLead} agents={data.agents} stages={data.stages}
          onClose={() => setOpenLeadId(null)}
          onUpdate={(patch) => updateLead(openLead.id, patch)}
        />
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <AuthWrapper>
    <App />
  </AuthWrapper>
);