import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import api from '../axios';

const Dashboard = () => {
  const [stats, setStats] = useState({
    cars: 0,
    services: 0,
    payments: 0
  });

  const fetchStats = async () => {
    try {
      const [carRes, serviceRes, paymentRes] = await Promise.all([
        api.get('/cars/all'),
        api.get('/services/all'),
        api.get('/payments/all')
      ]);

      setStats({
        cars: carRes.data.length,
        services: serviceRes.data.length,
        payments: paymentRes.data.reduce((acc, curr) => acc + Number(curr.amount), 0)
      });
    } catch (error) {
      console.error("Error loading dashboard stats");
    }
  };
  const statCards = [
    { title: 'Total Vehicles', value: stats.cars, color: '#2563eb' },
    { title: 'Active Services', value: stats.services, color: '#10b981' },
    { title: 'Total Revenue', value: `${stats.payments.toLocaleString()} RWF`, color: '#f59e0b' }
  ];
  useEffect(() => {
    fetchStats();
  }, []);

  return (
    <div style={{ padding: '30px', backgroundColor: '#f8fafc', minHeight: '100vh' }}>
      <h2 style={{ marginBottom: '25px', fontSize: '24px', fontWeight: '700', color: '#1e293b' }}>
        Dashboard Overview
      </h2>
      
      
      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', 
        gap: '20px', 
        marginBottom: '40px' 
      }}>
        {statCards.map((card, index) => (
          <div key={index} style={cardStyle}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <p style={{ margin: 0, fontSize: '14px', color: '#64748b', fontWeight: '600' }}>{card.title}</p>
                <h3 style={{ margin: '10px 0', fontSize: '28px', fontWeight: '700', color: '#1e293b' }}>{card.value}</h3>
              </div>
              <div style={{ 
                fontSize: '24px', 
                backgroundColor: `${card.color}15`, 
                padding: '10px', 
                borderRadius: '10px',
                color: card.color 
              }}>
                {card.icon}
              </div>
            </div>
            <Link to="/reports" style={{ fontSize: '12px', color: '#2563eb', textDecoration: 'none', fontWeight: '500' }}>
              {card.sub} →
            </Link>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '30px' }}>
      
        <div style={panelStyle}>
          <h3 style={panelTitleStyle}>Quick Management</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
            <Link to="/cars" style={actionLinkStyle}>🚗 Manage Vehicles</Link>
            <Link to="/services" style={actionLinkStyle}>🛠️ Service Catalog</Link>
            <Link to="/records" style={actionLinkStyle}>📋 Service Records</Link>
            <Link to="/payments" style={actionLinkStyle}>💳 Process Payments</Link>
          </div>
        </div>

        <div style={panelStyle}>
          <h3 style={panelTitleStyle}>System Activity</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
            <ActivityItem text="New Vehicle Registered" time="09:15 AM" color="#2563eb" />
            <ActivityItem text="Payment Received (R001)" time="11:45 AM" color="#10b981" />
            <ActivityItem text="Report Generated" time="01:10 PM" color="#f59e0b" />
          </div>
        </div>
      </div>
    </div>
  );
};


const ActivityItem = ({ text, time, color }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '13px' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
      <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: color }}></div>
      <span style={{ color: '#334155', fontWeight: '500' }}>{text}</span>
    </div>
    <span style={{ color: '#94a3b8' }}>{time}</span>
  </div>
);

const cardStyle = {
  backgroundColor: '#fff',
  padding: '20px',
  borderRadius: '12px',
  boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
  border: '1px solid #e2e8f0',
};

const panelStyle = {
  backgroundColor: '#fff',
  padding: '25px',
  borderRadius: '12px',
  boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
  border: '1px solid #e2e8f0',
};

const panelTitleStyle = {
  marginTop: 0,
  marginBottom: '20px',
  fontSize: '16px',
  fontWeight: '700',
  color: '#334155'
};

const actionLinkStyle = {
  display: 'block',
  padding: '15px',
  backgroundColor: '#f8fafc',
  borderRadius: '8px',
  textDecoration: 'none',
  color: '#475569',
  fontWeight: '600',
  fontSize: '14px',
  border: '1px solid #e2e8f0',
  textAlign: 'center'
};

export default Dashboard;