import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Truck, 
  MapPin, 
  Activity, 
  Droplet, 
  AlertTriangle, 
  Filter, 
  Eye, 
  EyeOff, 
  Navigation,
  CheckCircle2,
  Clock,
  ShieldCheck,
  Search,
  Users
} from 'lucide-react';

export const FleetView: React.FC = () => {
  const [filterType, setFilterType] = useState('ALL');
  const [isPrivateOnly, setIsPrivateOnly] = useState(false);

  const fleet = [
    { id: 'AMB-01', type: 'ALS', status: 'RUNNING', patient: 'TR-1082', fuel: '75%', crew: 'EMT Arjun, Driver Som', eta: '4m', coords: [12.9716, 77.5946], network: 'PUBLIC' },
    { id: 'AMB-02', type: 'BLS', status: 'IDLE', patient: null, fuel: '92%', crew: 'EMT Suman, Driver Ravi', eta: '-', coords: [12.935, 77.6245], network: 'PRIVATE' },
    { id: 'AMB-03', type: 'Transport', status: 'BREAKDOWN', patient: null, fuel: '15%', crew: 'None', eta: '-', coords: [12.95, 77.6], alert: 'Engine Overheat', network: 'PUBLIC' },
  ];

  return (
    <motion.div 
      initial={{ opacity: 0, scale: 0.98 }}
      animate={{ opacity: 1, scale: 1 }}
      className="module-content"
    >
      <div className="module-header-modern">
        <div className="title-wrap">
          <h3>FLEET VISIBILITY DASHBOARD</h3>
          <div className="live-pill">
            <span className="pulse" /> {fleet.filter(f => f.status === 'RUNNING').length} ACTIVE UNITS
          </div>
        </div>
        <div className="action-area-header">
          <div className="filter-group-premium">
            <button className={`filter-chip ${!isPrivateOnly ? 'active' : ''}`} onClick={() => setIsPrivateOnly(false)}>NETWORK FLEET</button>
            <button className={`filter-chip ${isPrivateOnly ? 'active' : ''}`} onClick={() => setIsPrivateOnly(true)}>PRIVATE FLEET</button>
          </div>
          <div className="search-mini">
            <Search size={14} />
            <input type="text" placeholder="Search Vehicle ID..." />
          </div>
        </div>
      </div>

      <div className="fleet-visibility-grid-premium">
        <div className="map-command-surface">
          <div className="map-overlay-vignette" />
          <div className="map-scan-lines" />
          
          <div className="map-placeholder-premium">
            <div className="map-coordinate-grid" />
            
            {fleet.map(unit => (
              <motion.div 
                key={unit.id} 
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                whileHover={{ scale: 1.2, zIndex: 100 }}
                className={`node-marker-premium status-${unit.status.toLowerCase()}`}
                style={{ 
                  left: `${(unit.coords[1] - 77.5) * 600}px`, 
                  top: `${(13.0 - unit.coords[0]) * 600}px` 
                }}
              >
                <div className="marker-core">
                  <Truck size={14} />
                </div>
                <div className="marker-ping" />
                <div className="marker-label-premium">
                  <span className="id">{unit.id}</span>
                  <span className="type">{unit.type}</span>
                </div>
              </motion.div>
            ))}

            <div className="map-hud-controls">
              <div className="hud-group">
                <button className="hud-btn"><Navigation size={18} /></button>
                <div className="hud-divider" />
                <button className="hud-btn"><MapPin size={18} /></button>
              </div>
              <div className="hud-group zoom">
                <button className="hud-btn">+</button>
                <button className="hud-btn">-</button>
              </div>
            </div>
          </div>
        </div>

        <div className="fleet-mission-sidebar">
          <div className="sidebar-head">
            <div className="head-text">
              <h4>ACTIVE ASSETS</h4>
              <p>REGION: BENGALURU-NORTH-X2</p>
            </div>
            <div className="status-summary-mini">
              <span className="dot active" />
              <span className="val">{fleet.length}</span>
            </div>
          </div>

          <div className="fleet-unit-stack">
            {fleet.map(unit => (
              <motion.div 
                key={unit.id} 
                whileHover={{ x: 6 }}
                className={`unit-mission-card ${unit.alert ? 'critical' : ''}`}
              >
                <div className="unit-card-header">
                  <div className="type-badge">{unit.type} UNIT</div>
                  <div className={`status-pill ${unit.status.toLowerCase()}`}>{unit.status}</div>
                </div>

                <div className="unit-card-body">
                  <h3 className="unit-id-large">{unit.id}</h3>
                  <div className="unit-stats-row">
                    <div className="u-stat">
                      <Droplet size={12} />
                      <span>{unit.fuel}</span>
                    </div>
                    <div className="u-stat">
                      <Clock size={12} />
                      <span className="highlight-cyan">{unit.eta || '--'} ETA</span>
                    </div>
                  </div>
                  
                  {unit.patient && (
                    <div className="mission-active-indicator">
                      <div className="m-label">ACTIVE MISSION</div>
                      <div className="m-id">{unit.patient}</div>
                    </div>
                  )}
                </div>

                <div className="unit-card-footer">
                  <div className="crew-mini">
                    <Users size={12} />
                    <span>{unit.crew}</span>
                  </div>
                  <button className="unit-action-btn"><Eye size={14} /></button>
                </div>

                {unit.alert && (
                  <div className="unit-card-alert">
                    <AlertTriangle size={14} />
                    <span>{unit.alert.toUpperCase()}</span>
                  </div>
                )}
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </motion.div>
  );
};
