import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import '../index.css';
import { createMcpApp } from '../lib/mcp-app-sdk';
import { Dashboard } from '../apps/Dashboard';

const app = createMcpApp();

// Mock data for standalone dev mode
const MOCK_DATA = {
  totalLeads: 342,
  scrapedToday: 28,
  dailyLimitRemaining: 22,
  dailyLimit: 50,
  recentJobs: [
    {
      id: 'job-001',
      location: 'Miami-Dade, FL',
      status: 'complete' as const,
      propertyCount: 25,
      startedAt: new Date(Date.now() - 3600000).toISOString(),
      propertyTypes: ['Multifamily', 'Office'],
    },
    {
      id: 'job-002',
      location: 'Broward, FL',
      status: 'running' as const,
      propertyCount: 12,
      startedAt: new Date(Date.now() - 900000).toISOString(),
      propertyTypes: ['Industrial'],
    },
    {
      id: 'job-003',
      location: 'Palm Beach, FL',
      status: 'complete' as const,
      propertyCount: 50,
      startedAt: new Date(Date.now() - 86400000).toISOString(),
      propertyTypes: ['Multifamily'],
    },
    {
      id: 'job-004',
      location: 'Austin, TX',
      status: 'pending' as const,
      propertyCount: 0,
      startedAt: new Date(Date.now() - 120000).toISOString(),
      propertyTypes: ['Office', 'Retail'],
    },
    {
      id: 'job-005',
      location: 'Nashville, TN',
      status: 'error' as const,
      propertyCount: 3,
      startedAt: new Date(Date.now() - 172800000).toISOString(),
      propertyTypes: ['Multifamily'],
    },
  ],
  propertyTypeBreakdown: {
    'Multifamily': 142,
    'Office': 68,
    'Industrial': 45,
    'Retail': 38,
    'Mixed Use': 27,
    'Warehouse': 22,
  },
};

function DashboardEntry() {
  const [data, setData] = useState(MOCK_DATA);

  useEffect(() => {
    app.on('toolresult', (result: any) => {
      if (result) {
        setData((prev) => ({ ...prev, ...result }));
      }
    });
  }, []);

  return <Dashboard data={data} />;
}

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(<DashboardEntry />);

app.connect().catch(() => {
  console.log('[Dashboard] Running in standalone mode with mock data');
});
