import React from 'react';
import { motion } from 'framer-motion';
import {
  Search,
  Plus,
  TrendingUp,
  Clock,
  MapPin,
  Navigation,
  Truck,
  Video,
  FileText,
  XCircle,
} from 'lucide-react';

interface TripManagementProps {
  tripsData: any[];
  onDeleteTrip: (id: string) => void;
  onOpenBooking: () => void;
}

export const TripManagement: React.FC<TripManagementProps> = ({
  tripsData,
  onDeleteTrip,
  onOpenBooking,
}) => {
  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>LIVE TRIP MANAGEMENT</h3>
          <div className="live-pill">
            <span className="pulse" /> 8 ACTIVE TRANSPORTS
          </div>
        </div>
        <div className="action-area-header">
          <div className="search-mini">
            <Search size={14} />
            <input type="text" placeholder="Search Patient, MRN..." />
          </div>
          <button
            onClick={onOpenBooking}
            className="register-staff-btn-premium"
          >
            <Plus size={18} />{' '}
            <span className="hide-mobile">NEW DISPATCH</span>
          </button>
        </div>
      </div>

      <div className="stats-strip stats-grid-responsive">
        <div className="stat-card-premium">
          <span className="stat-label">Active Trips</span>
          <div className="stat-value">{tripsData.length}</div>
          <div className="stat-trend up">
            <TrendingUp size={12} /> 25% vs last hour
          </div>
        </div>
        <div className="stat-card-premium">
          <span className="stat-label">Avg Arrival E.T.A</span>
          <div className="stat-value">9.4m</div>
          <div className="stat-trend down">
            <Clock size={12} /> 10% vs last hour
          </div>
        </div>
        <div className="stat-card-premium">
          <span className="stat-label">I.F.T Pending Nodes</span>
          <div className="stat-value">03</div>
          <div
            className="stat-trend"
            style={{ color: 'var(--text-secondary)' }}
          >
            Status: Operational
          </div>
        </div>
      </div>

      <div className="trip-mgmt-table-container">
        <table className="staff-table-premium">
          <thead>
            <tr>
              <th>Accession &amp; Patient</th>
              <th>Trip Parameters</th>
              <th>Fleet Asset</th>
              <th>Live Progress Timeline</th>
              <th>Operational Actions</th>
            </tr>
          </thead>
          <tbody>
            {tripsData.map((t) => (
              <tr key={t.id}>
                <td>
                  <div className="trip-patient-ident">
                    <div className="trip-patient-main">{t.patient}</div>
                    <div className="trip-id-mono">
                      {t.id} · MRNID: {t.mrn}
                    </div>
                  </div>
                </td>
                <td>
                  <div
                    className="route-cell"
                    style={{
                      fontSize: '0.8rem',
                      color: 'var(--text-secondary)',
                      fontWeight: 700,
                    }}
                  >
                    <div className="r-point">
                      <MapPin size={12} /> {t.origin}
                    </div>
                    <div
                      className="route-line"
                      style={{
                        height: '20px',
                        borderLeft: '2px dashed var(--card-border)',
                        margin: '4px 5px',
                      }}
                    />
                    <div className="r-point">
                      <Navigation size={12} /> {t.destination}
                    </div>
                  </div>
                </td>
                <td>
                  <div className="vehicle-crew-stack">
                    <div
                      className="vc-unit"
                      style={{
                        fontWeight: 900,
                        color: 'var(--text-primary)',
                      }}
                    >
                      <Truck size={14} /> {t.vehicle}
                    </div>
                    <div
                      className="vc-crew"
                      style={{
                        fontSize: '0.75rem',
                        color: 'var(--text-secondary)',
                        marginTop: '4px',
                      }}
                    >
                      {t.crew}
                    </div>
                  </div>
                </td>
                <td>
                  <div className="progress-cell" style={{ width: '240px' }}>
                    <div
                      className="eta-container"
                      style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        marginBottom: '8px',
                      }}
                    >
                      <span
                        className={`v-status ${
                          t.status.replace(' ', '') === 'ARRIVED'
                            ? 'RUNNING'
                            : 'IDLE'
                        }`}
                        style={{ fontSize: '0.65rem' }}
                      >
                        {t.status}
                      </span>
                      <span
                        style={{
                          fontSize: '0.7rem',
                          fontWeight: 900,
                          color: 'var(--accent-cyan)',
                        }}
                      >
                        {t.eta} REMAINING
                      </span>
                    </div>
                    <div className="trip-status-timeline">
                      <div
                        className={`ts-step ${t.step >= 1 ? 'completed' : ''}`}
                      />
                      <div
                        className={`ts-line ${t.step >= 2 ? 'active' : ''}`}
                      />
                      <div
                        className={`ts-step ${
                          t.step >= 2
                            ? 'completed'
                            : t.step === 1
                            ? 'active'
                            : ''
                        }`}
                      />
                      <div
                        className={`ts-line ${t.step >= 3 ? 'active' : ''}`}
                      />
                      <div
                        className={`ts-step ${
                          t.step >= 3
                            ? 'completed'
                            : t.step === 2
                            ? 'active'
                            : ''
                        }`}
                      />
                    </div>
                  </div>
                </td>
                <td>
                  <div
                    className="trip-action-group"
                    style={{ display: 'flex', gap: '8px' }}
                  >
                    <button className="tag-btn">
                      <Video size={14} />
                    </button>
                    <button className="tag-btn">
                      <FileText size={14} />
                    </button>
                    <button
                      className="tag-btn"
                      onClick={() => onDeleteTrip(t.id)}
                      style={{ color: 'var(--alert-red)' }}
                    >
                      <XCircle size={14} />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </motion.div>
  );
};
