import React, { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, Area, AreaChart } from 'recharts';
import { TrendingUp, TrendingDown, Home, DollarSign, Calendar, MapPin, Activity, AlertCircle, Star, RefreshCw, Wifi, WifiOff } from 'lucide-react';

const ApartmentDashboard = () => {
  const [selectedUnit, setSelectedUnit] = useState(null);
  const [viewMode, setViewMode] = useState('overview');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [lastUpdated, setLastUpdated] = useState(null);

  // Real data state
  const [dailySummary, setDailySummary] = useState(null);
  const [priceHistory, setPriceHistory] = useState([]);
  const [availableUnits, setAvailableUnits] = useState([]);
  const [recentActivity, setRecentActivity] = useState([]);
  const [planStats, setPlanStats] = useState([]);

  // API base URL
  const API_BASE = '/api';

  // Fetch data from API
  const fetchData = async () => {
    setLoading(true);
    setError(null);
    
    try {
      console.log('🔄 Fetching apartment data...');
      
      // Fetch all endpoints in parallel
      const [
        dailySummaryRes,
        priceHistoryRes,
        availableUnitsRes,
        recentActivityRes,
        planStatsRes
      ] = await Promise.all([
        fetch(`${API_BASE}/daily-summary`),
        fetch(`${API_BASE}/price-history`),
        fetch(`${API_BASE}/available-units`),
        fetch(`${API_BASE}/recent-activity`),
        fetch(`${API_BASE}/plan-stats`)
      ]);

      // Check if all requests were successful
      if (!dailySummaryRes.ok || !priceHistoryRes.ok || !availableUnitsRes.ok || 
          !recentActivityRes.ok || !planStatsRes.ok) {
        throw new Error('One or more API requests failed');
      }

      // Parse JSON responses
      const [
        dailySummaryData,
        priceHistoryData,
        availableUnitsData,
        recentActivityData,
        planStatsData
      ] = await Promise.all([
        dailySummaryRes.json(),
        priceHistoryRes.json(),
        availableUnitsRes.json(),
        recentActivityRes.json(),
        planStatsRes.json()
      ]);

      console.log('✅ Data fetched successfully:', {
        dailySummary: dailySummaryData,
        priceHistory: priceHistoryData.length,
        availableUnits: availableUnitsData.length,
        recentActivity: recentActivityData.length,
        planStats: planStatsData.length
      });

      // Update state with real data
      setDailySummary(dailySummaryData);
      setPriceHistory(priceHistoryData);
      setAvailableUnits(availableUnitsData);
      setRecentActivity(recentActivityData);
      setPlanStats(planStatsData);
      setLastUpdated(new Date());
      setLoading(false);

    } catch (err) {
      console.error('❌ Error fetching data:', err);
      setError(err.message);
      setLoading(false);
    }
  };

  // Initial data fetch
  useEffect(() => {
    fetchData();
  }, []);

  // Auto-refresh every 5 minutes
  useEffect(() => {
    const interval = setInterval(fetchData, 5 * 60 * 1000);
    return () => clearInterval(interval);
  }, []);

  const MetricCard = ({ title, value, subtitle, icon: Icon, trend, color = "blue" }) => (
    <div className="bg-white rounded-lg shadow-md p-6 border-l-4" style={{borderLeftColor: color === 'blue' ? '#3B82F6' : color === 'green' ? '#10B981' : color === 'red' ? '#EF4444' : '#F59E0B'}}>
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-gray-600">{title}</p>
          <p className="text-2xl font-bold text-gray-900">{value}</p>
          {subtitle && <p className="text-sm text-gray-500">{subtitle}</p>}
        </div>
        <div className="flex items-center space-x-2">
          {trend && (
            <span className={`text-sm ${trend > 0 ? 'text-green-600' : 'text-red-600'} flex items-center`}>
              {trend > 0 ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
              {Math.abs(trend)}%
            </span>
          )}
          <Icon className="w-8 h-8 text-gray-400" />
        </div>
      </div>
    </div>
  );

  const formatPrice = (price) => `$${price?.toLocaleString()}`;
  const formatDate = (dateStr) => new Date(dateStr).toLocaleDateString();

  const COLORS = ['#8B0000', '#DC143C', '#B22222', '#CD5C5C', '#F08080'];

  // Loading state
  if (loading && !dailySummary) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <RefreshCw className="w-12 h-12 animate-spin text-blue-600 mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-gray-900 mb-2">Loading Apartment Data</h2>
          <p className="text-gray-600">Fetching real-time market information...</p>
        </div>
      </div>
    );
  }

  // Error state
  if (error && !dailySummary) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <WifiOff className="w-12 h-12 text-red-600 mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-gray-900 mb-2">Connection Error</h2>
          <p className="text-gray-600 mb-4">Unable to fetch apartment data: {error}</p>
          <button 
            onClick={fetchData}
            className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
          >
            Try Again
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-gray-900 mb-2">Country Club Towers & Gardens</h1>
              <p className="text-gray-600">Real-time apartment market dashboard</p>
              {lastUpdated && (
                <div className="flex items-center mt-2 text-sm text-gray-500">
                  <Wifi className="w-4 h-4 mr-1" />
                  Last updated: {lastUpdated.toLocaleTimeString()}
                </div>
              )}
            </div>
            <button
              onClick={fetchData}
              disabled={loading}
              className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50"
            >
              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
              <span>Refresh</span>
            </button>
          </div>
          
          <div className="flex items-center space-x-4 mt-4">
            <button
              onClick={() => setViewMode('overview')}
              className={`px-4 py-2 rounded-md ${viewMode === 'overview' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border'}`}
            >
              Overview
            </button>
            <button
              onClick={() => setViewMode('units')}
              className={`px-4 py-2 rounded-md ${viewMode === 'units' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border'}`}
            >
              Available Units ({availableUnits.length})
            </button>
            <button
              onClick={() => setViewMode('analytics')}
              className={`px-4 py-2 rounded-md ${viewMode === 'analytics' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border'}`}
            >
              Market Analytics
            </button>
          </div>
        </div>

        {/* Overview Tab */}
        {viewMode === 'overview' && dailySummary && (
          <>
            {/* Daily Metrics */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
              <MetricCard
                title="Available Units"
                value={dailySummary.totalAvailable || availableUnits.length}
                icon={Home}
                color="blue"
              />
              <MetricCard
                title="New Today"
                value={dailySummary.newUnits || dailySummary.new_units_count || 0}
                subtitle="Units available"
                icon={TrendingUp}
                color="green"
              />
              <MetricCard
                title="Rented Today"
                value={dailySummary.rentedUnits || dailySummary.rented_units_count || 0}
                subtitle="Units leased"
                icon={TrendingDown}
                color="red"
              />
              <MetricCard
                title="Turnover Rate"
                value={`${(dailySummary.turnoverRate || dailySummary.turnover_rate || 0).toFixed(1)}%`}
                subtitle="Daily activity"
                icon={Activity}
                color="orange"
              />
            </div>

            {/* Price Trends */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
              <div className="bg-white rounded-lg shadow-md p-6">
                <h3 className="text-lg font-semibold mb-4">Average Price Trend ({priceHistory.length} days)</h3>
                <ResponsiveContainer width="100%" height={300}>
                  <AreaChart data={priceHistory.filter(d => d.avgPrice !== null)}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis 
                      dataKey="date" 
                      tickFormatter={(date) => new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                    />
                    <YAxis tickFormatter={(value) => `$${value}`} />
                    <Tooltip 
                      formatter={(value, name) => [formatPrice(value), 'Avg Price']}
                      labelFormatter={(date) => formatDate(date)}
                    />
                    <Area type="monotone" dataKey="avgPrice" stroke="#8B0000" fill="#8B0000" fillOpacity={0.1} />
                  </AreaChart>
                </ResponsiveContainer>
              </div>

              <div className="bg-white rounded-lg shadow-md p-6">
                <h3 className="text-lg font-semibold mb-4">Unit Availability</h3>
                <ResponsiveContainer width="100%" height={300}>
                  <AreaChart data={priceHistory}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis 
                      dataKey="date" 
                      tickFormatter={(date) => new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                    />
                    <YAxis />
                    <Tooltip 
                      formatter={(value, name) => [value, 'Available Units']}
                      labelFormatter={(date) => formatDate(date)}
                    />
                    <Area type="monotone" dataKey="unitCount" stroke="#3B82F6" fill="#3B82F6" fillOpacity={0.2} />
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </div>

            {/* Plan Distribution */}
            {planStats.length > 0 && (
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                <div className="bg-white rounded-lg shadow-md p-6">
                  <h3 className="text-lg font-semibold mb-4">Units by Floor Plan</h3>
                  <ResponsiveContainer width="100%" height={300}>
                    <PieChart>
                      <Pie
                        data={planStats}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        label={({ name, count }) => `${name}: ${count}`}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="count"
                      >
                        {planStats.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </PieChart>
                  </ResponsiveContainer>
                </div>

                <div className="bg-white rounded-lg shadow-md p-6">
                  <h3 className="text-lg font-semibold mb-4">Average Price by Plan</h3>
                  <ResponsiveContainer width="100%" height={300}>
                    <BarChart data={planStats}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="name" angle={-45} textAnchor="end" height={80} />
                      <YAxis tickFormatter={(value) => `$${value}`} />
                      <Tooltip formatter={(value, name) => [formatPrice(value), 'Avg Price']} />
                      <Bar dataKey="avgPrice" fill="#8B0000" />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </div>
            )}

            {/* Recent Activity */}
            {recentActivity.length > 0 && (
              <div className="bg-white rounded-lg shadow-md p-6">
                <h3 className="text-lg font-semibold mb-4">Recent Activity</h3>
                <div className="space-y-4">
                  {recentActivity.map((activity, index) => (
                    <div key={index} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                      <div className="flex items-center space-x-3">
                        {activity.type === 'new' && <div className="w-3 h-3 bg-green-500 rounded-full"></div>}
                        {activity.type === 'rented' && <div className="w-3 h-3 bg-red-500 rounded-full"></div>}
                        {activity.type === 'price_drop' && <div className="w-3 h-3 bg-orange-500 rounded-full"></div>}
                        <div>
                          <p className="font-medium">
                            {activity.type === 'new' && `New unit available: ${activity.unitCode}`}
                            {activity.type === 'rented' && `Unit rented: ${activity.unitCode}`}
                            {activity.type === 'price_drop' && `Price drop: ${activity.unitCode}`}
                          </p>
                          <p className="text-sm text-gray-500">
                            {activity.planName} • {activity.bedCount}BR/{activity.bathCount}BA
                            {activity.type === 'price_drop' 
                              ? ` • ${formatPrice(activity.oldPrice)} → ${formatPrice(activity.newPrice)}`
                              : activity.price ? ` • ${formatPrice(activity.price)}` : ''
                            }
                          </p>
                        </div>
                      </div>
                      <span className="text-sm text-gray-500">{formatDate(activity.date)}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </>
        )}

        {/* Units Tab */}
        {viewMode === 'units' && (
          <div className="space-y-6">
            <div className="flex justify-between items-center">
              <h2 className="text-xl font-semibold">Available Units ({availableUnits.length})</h2>
              <div className="flex space-x-2">
                <select className="border rounded-md px-3 py-2">
                  <option>All Plans</option>
                  {[...new Set(availableUnits.map(u => u.planName))].map(plan => (
                    <option key={plan}>{plan}</option>
                  ))}
                </select>
                <select className="border rounded-md px-3 py-2">
                  <option>All Bedrooms</option>
                  {[...new Set(availableUnits.map(u => u.bedCount))].sort().map(beds => (
                    <option key={beds}>{beds} BR</option>
                  ))}
                </select>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
              {availableUnits.map((unit) => (
                <div key={unit.unitCode} className="bg-white rounded-lg shadow-md overflow-hidden">
                  <div className="p-6">
                    <div className="flex justify-between items-start mb-4">
                      <div>
                        <h3 className="text-lg font-bold">{unit.unitCode}</h3>
                        <p className="text-gray-600">{unit.planName}</p>
                        {unit.planName && unit.planName.toLowerCase().includes('maroon peak') && unit.currentPrice < 3800 && 
                          <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 mt-1">
                            <Star className="w-3 h-3 mr-1" />
                            Priority
                          </span>
                        }
                      </div>
                      <div className="text-right">
                        <p className="text-2xl font-bold text-green-600">{formatPrice(unit.currentPrice)}</p>
                        <p className="text-sm text-gray-500">Current Price</p>
                      </div>
                    </div>

                    <div className="grid grid-cols-2 gap-4 mb-4">
                      <div className="text-center p-3 bg-gray-50 rounded">
                        <p className="text-sm text-gray-600">Bedrooms</p>
                        <p className="font-semibold">{unit.bedCount}</p>
                      </div>
                      <div className="text-center p-3 bg-gray-50 rounded">
                        <p className="text-sm text-gray-600">Bathrooms</p>
                        <p className="font-semibold">{unit.bathCount}</p>
                      </div>
                      <div className="text-center p-3 bg-gray-50 rounded">
                        <p className="text-sm text-gray-600">Area</p>
                        <p className="font-semibold">{unit.area} sqft</p>
                      </div>
                      <div className="text-center p-3 bg-gray-50 rounded">
                        <p className="text-sm text-gray-600">Available</p>
                        <p className="font-semibold">{unit.daysAvailable || 0} days</p>
                      </div>
                    </div>

                    <div className="border-t pt-4">
                      <div className="flex justify-between text-sm mb-2">
                        <span>Price Range:</span>
                        <span>{formatPrice(unit.minPrice)} - {formatPrice(unit.maxPrice)}</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div 
                          className="bg-blue-600 h-2 rounded-full" 
                          style={{
                            width: unit.maxPrice > unit.minPrice 
                              ? `${((unit.currentPrice - unit.minPrice) / (unit.maxPrice - unit.minPrice)) * 100}%`
                              : '50%'
                          }}
                        ></div>
                      </div>
                    </div>

                    <button 
                      onClick={() => setSelectedUnit(unit)}
                      className="w-full mt-4 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors"
                    >
                      View Details
                    </button>
                  </div>
                </div>
              ))}
            </div>

            {availableUnits.length === 0 && !loading && (
              <div className="text-center py-12">
                <Home className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                <h3 className="text-lg font-semibold text-gray-900 mb-2">No Available Units</h3>
                <p className="text-gray-600">No apartment units are currently available.</p>
              </div>
            )}
          </div>
        )}

        {/* Analytics Tab */}
        {viewMode === 'analytics' && (
          <div className="space-y-6">
            <h2 className="text-xl font-semibold">Market Analytics</h2>
            
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div className="bg-white rounded-lg shadow-md p-6">
                <h3 className="text-lg font-semibold mb-4">Price Distribution by Plan</h3>
                <div className="space-y-4">
                  {planStats.map((plan, index) => (
                    <div key={plan.name} className="flex items-center justify-between">
                      <div className="flex items-center space-x-3">
                        <div 
                          className="w-4 h-4 rounded"
                          style={{ backgroundColor: COLORS[index % COLORS.length] }}
                        ></div>
                        <span className="font-medium">{plan.name}</span>
                      </div>
                      <div className="text-right">
                        <p className="font-semibold">{formatPrice(plan.avgPrice)}</p>
                        <p className="text-sm text-gray-500">{plan.count} units</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="bg-white rounded-lg shadow-md p-6">
                <h3 className="text-lg font-semibold mb-4">Market Insights</h3>
                <div className="space-y-4">
                  <div className="p-4 bg-red-50 rounded-lg border-l-4 border-red-500">
                    <h4 className="font-semibold text-red-800">Maroon Peak Priority</h4>
                    <p className="text-sm text-red-700">
                      Maroon Peak units under $3,800 are highlighted as priority opportunities based on your preferences.
                    </p>
                  </div>
                  {dailySummary && (
                    <div className="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                      <h4 className="font-semibold text-blue-800">Market Activity</h4>
                      <p className="text-sm text-blue-700">
                        Daily turnover rate of {(dailySummary.turnoverRate || dailySummary.turnover_rate || 0).toFixed(1)}% indicates {
                          (dailySummary.turnoverRate || dailySummary.turnover_rate || 0) > 10 ? 'high' : 
                          (dailySummary.turnoverRate || dailySummary.turnover_rate || 0) > 5 ? 'moderate' : 'low'
                        } market activity.
                      </p>
                    </div>
                  )}
                  {priceHistory.length > 0 && (
                    <div className="p-4 bg-green-50 rounded-lg border-l-4 border-green-500">
                      <h4 className="font-semibold text-green-800">Price Trends</h4>
                      <p className="text-sm text-green-700">
                        {priceHistory.length > 1 ? (
                          `Average prices ${priceHistory[priceHistory.length - 1].avgPrice > priceHistory[priceHistory.length - 2].avgPrice ? 'increased' : 'decreased'} in recent days.`
                        ) : (
                          'Price trend data is being collected.'
                        )}
                      </p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Unit Detail Modal */}
        {selectedUnit && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
            <div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
              <div className="p-6">
                <div className="flex justify-between items-start mb-6">
                  <div>
                    <h2 className="text-2xl font-bold">{selectedUnit.unitCode}</h2>
                    <p className="text-gray-600">{selectedUnit.planName} • {selectedUnit.community}</p>
                  </div>
                  <button 
                    onClick={() => setSelectedUnit(null)}
                    className="text-gray-500 hover:text-gray-700 text-2xl"
                  >
                    ✕
                  </button>
                </div>

                <div className="grid grid-cols-2 gap-6 mb-6">
                  <div>
                    <h3 className="font-semibold mb-2">Current Price</h3>
                    <p className="text-3xl font-bold text-green-600">{formatPrice(selectedUnit.currentPrice)}</p>
                  </div>
                  <div>
                    <h3 className="font-semibold mb-2">Price Range</h3>
                    <p className="text-lg">{formatPrice(selectedUnit.minPrice)} - {formatPrice(selectedUnit.maxPrice)}</p>
                  </div>
                </div>

                <div className="grid grid-cols-4 gap-4 mb-6">
                  <div className="text-center">
                    <p className="text-sm text-gray-600">Bedrooms</p>
                    <p className="text-xl font-semibold">{selectedUnit.bedCount}</p>
                  </div>
                  <div className="text-center">
                    <p className="text-sm text-gray-600">Bathrooms</p>
                    <p className="text-xl font-semibold">{selectedUnit.bathCount}</p>
                  </div>
                  <div className="text-center">
                    <p className="text-sm text-gray-600">Area</p>
                    <p className="text-xl font-semibold">{selectedUnit.area}</p>
                  </div>
                  <div className="text-center">
                    <p className="text-sm text-gray-600">Days Available</p>
                    <p className="text-xl font-semibold">{selectedUnit.daysAvailable || 0}</p>
                  </div>
                </div>

                {selectedUnit.priceHistory && selectedUnit.priceHistory.length > 0 && (
                  <div className="mb-6">
                    <h3 className="font-semibold mb-4">Price History</h3>
                    <ResponsiveContainer width="100%" height={200}>
                      <LineChart data={selectedUnit.priceHistory}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis 
                          dataKey="date" 
                          tickFormatter={(date) => new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                        />
                        <YAxis tickFormatter={(value) => `$${value}`} />
                        <Tooltip 
                          formatter={(value, name) => [formatPrice(value), 'Price']}
                          labelFormatter={(date) => formatDate(date)}
                        />
                        <Line type="monotone" dataKey="price" stroke="#8B0000" strokeWidth={2} />
                      </LineChart>
                    </ResponsiveContainer>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default ApartmentDashboard;