// Fleet Management — vehicle grid + driver roster + trip assignment (drag)
const { useState: useStateFl } = React;

function FleetPage({ t, lang }) {
  const D = window.MJC_DATA;
  const [tab, setTab] = useStateFl('registry');

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{t('fleet_title')}</h1>
          <div className="page-subtitle">{t('fleet_sub')}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost"><Icon.Download size={15} /> {t('export')}</button>
          <button className="btn btn-gold"><Icon.Plus size={15} /> {lang === 'zh' ? '新增车辆' : 'Add Vehicle'}</button>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 4, marginBottom: 18, borderBottom: '1px solid var(--border)' }}>
        {[
          { id: 'registry', label_en: 'Vehicle Registry', label_zh: '车辆档案' },
          { id: 'drivers', label_en: 'Driver Roster', label_zh: '司机排班' },
          { id: 'assignment', label_en: 'Trip Assignment', label_zh: '行程派单' },
          { id: 'maintenance', label_en: 'Maintenance Log', label_zh: '维修记录' }
        ].map(tb => (
          <button key={tb.id}
                  onClick={() => setTab(tb.id)}
                  style={{
                    padding: '10px 16px',
                    fontSize: 13,
                    fontWeight: 600,
                    color: tab === tb.id ? 'var(--navy)' : 'var(--muted)',
                    borderBottom: tab === tb.id ? '2px solid var(--gold)' : '2px solid transparent',
                    marginBottom: -1,
                    transition: 'all .15s'
                  }}>
            {lang === 'zh' ? tb.label_zh : tb.label_en}
          </button>
        ))}
      </div>

      {tab === 'registry' && <VehicleRegistry t={t} lang={lang} />}
      {tab === 'drivers' && <DriverRoster t={t} lang={lang} />}
      {tab === 'assignment' && <TripAssignment t={t} lang={lang} />}
      {tab === 'maintenance' && <MaintenanceLog t={t} lang={lang} />}
    </div>
  );
}

function VehicleRegistry({ t, lang }) {
  const D = window.MJC_DATA;
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 'var(--gap)' }}>
        {D.VEHICLES.map((v, i) => (
          <div key={i} className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{
              height: 110,
              background: `repeating-linear-gradient(135deg, var(--bg) 0 10px, var(--bg-alt) 10px 20px)`,
              display: 'grid',
              placeItems: 'center',
              position: 'relative'
            }}>
              <Icon.Bus size={48} stroke={1.2} />
              <div style={{ position: 'absolute', top: 10, right: 10 }}>
                <StatusBadge status={v.status} t={t} />
              </div>
              <div style={{ position: 'absolute', bottom: 10, left: 10, fontSize: 10, color: 'var(--muted)', fontFamily: 'var(--font-mono)' }}>
                {lang === 'zh' ? '车辆图片占位' : 'vehicle photo'}
              </div>
            </div>
            <div style={{ padding: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
                <div style={{ fontWeight: 700, fontSize: 16, fontFamily: 'var(--font-mono)', letterSpacing: '.02em' }}>{v.plate}</div>
                <span className="badge no-dot" style={{ background: 'var(--bg)', color: 'var(--ink-soft)', fontSize: 10.5 }}>{v.type}</span>
              </div>
              <div className="muted" style={{ fontSize: 12, marginBottom: 12 }}>
                {t('capacity')}: <strong style={{ color: 'var(--ink)' }}>{v.cap} pax</strong>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderTop: '1px solid var(--border)' }}>
                <div className="avatar avatar-sm avatar-navy">{(lang === 'zh' ? v.driver_zh : v.driver_en).slice(0, 1)}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{lang === 'zh' ? v.driver_zh : v.driver_en}</div>
                  <div className="muted" style={{ fontSize: 11 }}>{v.trip || (lang === 'zh' ? '空闲' : 'Idle')}</div>
                </div>
                <button className="icon-btn"><Icon.More size={14} /></button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DriverRoster({ t, lang }) {
  const D = window.MJC_DATA;
  return (
    <div className="table-wrap">
      <div className="table-toolbar">
        <span className="title">{lang === 'zh' ? '司机名单' : 'Drivers'} <span className="muted" style={{ fontWeight: 400, marginLeft: 6, fontSize: 12 }}>({D.VEHICLES.length})</span></span>
        <button className="btn btn-ghost btn-sm"><Icon.Filter size={13} /> {t('filter')}</button>
      </div>
      <table className="table">
        <thead>
          <tr>
            <th>{lang === 'zh' ? '司机' : 'Driver'}</th>
            <th>{lang === 'zh' ? '联系方式' : 'Contact'}</th>
            <th>{lang === 'zh' ? '驾照' : 'License'}</th>
            <th>{lang === 'zh' ? '车辆' : 'Vehicle'}</th>
            <th>{lang === 'zh' ? '今日任务' : 'Today\'s Assignment'}</th>
            <th>{t('status')}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {D.VEHICLES.filter(v => v.driver_en !== '—').map((v, i) => (
            <tr key={i}>
              <td>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div className="avatar avatar-navy">{(lang === 'zh' ? v.driver_zh : v.driver_en).slice(0, 1)}</div>
                  <div>
                    <div className="strong">{lang === 'zh' ? v.driver_zh : v.driver_en}</div>
                    <div className="muted" style={{ fontSize: 11 }}>DRV-{(i + 101).toString()}</div>
                  </div>
                </div>
              </td>
              <td className="mono" style={{ fontSize: 12 }}>+60 12-{(3000 + i * 73).toString()} {(1000 + i * 137).toString()}</td>
              <td>
                <span className="badge no-dot" style={{ background: 'var(--bg-alt)', color: 'var(--ink-soft)', fontSize: 10.5 }}>
                  {v.type === 'Bus' ? 'E (Bus)' : 'D (Van)'}
                </span>
              </td>
              <td className="mono" style={{ fontSize: 12 }}>{v.plate}</td>
              <td>{v.trip || <span className="muted">{lang === 'zh' ? '空闲' : 'Idle'}</span>}</td>
              <td><StatusBadge status={v.status} t={t} /></td>
              <td>
                <div className="row-actions">
                  <button className="icon-btn"><Icon.Calendar size={14} /></button>
                  <button className="icon-btn"><Icon.More size={14} /></button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function TripAssignment({ t, lang }) {
  const D = window.MJC_DATA;

  // Trip cards (sample upcoming)
  const initialTrips = D.DEPARTURES.map(d => ({
    id: d.id,
    tour: lang === 'zh' ? d.tour_zh : d.tour_en,
    tour_en: d.tour_en,
    tour_zh: d.tour_zh,
    date: d.date,
    pax: d.pax,
    guide: null,
    driver: null,
    vehicle: null
  }));
  // Pre-fill 2
  initialTrips[0].guide = 'G01';
  initialTrips[0].driver = 'V1';
  initialTrips[0].vehicle = 'BTM 5821';
  initialTrips[1].guide = 'G02';
  initialTrips[1].driver = 'V2';
  initialTrips[1].vehicle = 'BJP 9043';

  const [trips, setTrips] = useStateFl(initialTrips);
  const [drag, setDrag] = useStateFl(null);
  const [dropTarget, setDropTarget] = useStateFl(null);

  const onDragStart = (type, id, payload) => setDrag({ type, id, payload });
  const onDragEnd = () => { setDrag(null); setDropTarget(null); };
  const onDragOver = (e, tripId) => { e.preventDefault(); setDropTarget(tripId); };
  const onDrop = (e, tripId) => {
    e.preventDefault();
    if (!drag) return;
    setTrips(ts => ts.map(t => {
      if (t.id !== tripId) return t;
      if (drag.type === 'guide') return { ...t, guide: drag.id };
      if (drag.type === 'driver') return { ...t, driver: drag.id, vehicle: drag.payload };
      return t;
    }));
    setDrag(null);
    setDropTarget(null);
  };
  const clearAssignment = (tripId, key) => {
    setTrips(ts => ts.map(t => t.id === tripId ? { ...t, [key]: null, ...(key === 'driver' ? { vehicle: null } : {}) } : t));
  };

  return (
    <div>
      <div style={{ padding: '10px 14px', background: 'rgba(13,106,122,.05)', borderRadius: 10, border: '1px solid var(--teal-glow)', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: 'var(--ink-soft)' }}>
        <Icon.Sparkle size={14} stroke={2} />
        <span>{t('drag_to_assign')}</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr 260px', gap: 'var(--gap)' }}>
        {/* Guides pool */}
        <div className="card" style={{ padding: 14, alignSelf: 'flex-start', maxHeight: 700, overflowY: 'auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <div style={{ fontWeight: 600, fontSize: 13 }}>{lang === 'zh' ? '导游' : 'Guides'}</div>
            <span className="badge no-dot" style={{ background: 'var(--bg-alt)', color: 'var(--muted)', fontSize: 10.5 }}>{D.GUIDES.length}</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {D.GUIDES.map(g => (
              <div key={g.id}
                   draggable
                   onDragStart={() => onDragStart('guide', g.id)}
                   onDragEnd={onDragEnd}
                   style={{
                     padding: 10,
                     borderRadius: 10,
                     border: '1px solid var(--border)',
                     background: '#fff',
                     cursor: 'grab',
                     transition: 'all .12s',
                     opacity: drag?.type === 'guide' && drag.id === g.id ? .4 : 1
                   }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div className="avatar avatar-sm avatar-teal">{(lang === 'zh' ? g.name_zh : g.name_en).slice(0, 1)}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{lang === 'zh' ? g.name_zh : g.name_en}</div>
                    <div className="muted" style={{ fontSize: 10.5, display: 'flex', alignItems: 'center', gap: 4 }}>
                      <Icon.Star size={10} /> {g.rating}
                    </div>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 3, marginTop: 6, flexWrap: 'wrap' }}>
                  {g.langs.map((l, i) => (
                    <span key={i} className="badge no-dot" style={{ fontSize: 10, background: 'var(--bg-alt)', color: 'var(--ink-soft)', padding: '1px 6px' }}>{l}</span>
                  ))}
                </div>
                <div className="muted" style={{ fontSize: 10.5, marginTop: 4 }}>{g.spec}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Trip cards */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {trips.map(trip => {
            const guide = D.GUIDES.find(g => g.id === trip.guide);
            const vehicle = D.VEHICLES.find((v, i) => `V${i+1}` === trip.driver);
            return (
              <div key={trip.id}
                   className="card"
                   style={{
                     padding: 16,
                     outline: dropTarget === trip.id ? '2px dashed var(--gold)' : 'none',
                     outlineOffset: -2,
                     transition: 'outline-color .12s'
                   }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 12 }}>
                  <div style={{ width: 56, height: 56, borderRadius: 12, background: 'linear-gradient(135deg, var(--navy), var(--navy-deep))', color: '#fff', display: 'grid', placeItems: 'center', textAlign: 'center', flexShrink: 0 }}>
                    <div style={{ fontSize: 18, fontWeight: 700, lineHeight: 1 }}>{trip.date.slice(8)}</div>
                    <div style={{ fontSize: 9, opacity: .7, marginTop: 2 }}>MAY</div>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{trip.tour}</div>
                    <div className="muted mono" style={{ fontSize: 11.5, marginTop: 2 }}>{trip.id} · {trip.pax} pax</div>
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  {/* Guide slot */}
                  <div onDragOver={(e) => onDragOver(e, trip.id)} onDrop={(e) => onDrop(e, trip.id)}
                       style={{
                         padding: 10,
                         borderRadius: 10,
                         border: guide ? '1px solid var(--border)' : '1.5px dashed var(--border-strong)',
                         background: guide ? 'var(--bg)' : 'transparent',
                         minHeight: 56,
                         display: 'flex',
                         alignItems: 'center',
                         gap: 8
                       }}>
                    {guide ? (
                      <>
                        <div className="avatar avatar-sm avatar-teal">{(lang === 'zh' ? guide.name_zh : guide.name_en).slice(0, 1)}</div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div className="muted" style={{ fontSize: 10, textTransform: 'uppercase', fontWeight: 600 }}>{t('guide')}</div>
                          <div style={{ fontSize: 12.5, fontWeight: 600 }}>{lang === 'zh' ? guide.name_zh : guide.name_en}</div>
                        </div>
                        <button className="icon-btn" onClick={() => clearAssignment(trip.id, 'guide')}><Icon.X size={12} /></button>
                      </>
                    ) : (
                      <div style={{ color: 'var(--muted)', fontSize: 12, display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
                        <Icon.Compass size={16} /> <span>{lang === 'zh' ? '拖入导游' : 'Drop guide here'}</span>
                      </div>
                    )}
                  </div>
                  {/* Driver/Vehicle slot */}
                  <div onDragOver={(e) => onDragOver(e, trip.id)} onDrop={(e) => onDrop(e, trip.id)}
                       style={{
                         padding: 10,
                         borderRadius: 10,
                         border: vehicle ? '1px solid var(--border)' : '1.5px dashed var(--border-strong)',
                         background: vehicle ? 'var(--bg)' : 'transparent',
                         minHeight: 56,
                         display: 'flex',
                         alignItems: 'center',
                         gap: 8
                       }}>
                    {vehicle ? (
                      <>
                        <div style={{ width: 28, height: 28, borderRadius: 8, background: '#fff', display: 'grid', placeItems: 'center', color: 'var(--navy)' }}>
                          <Icon.Bus size={14} />
                        </div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div className="muted" style={{ fontSize: 10, textTransform: 'uppercase', fontWeight: 600 }}>{lang === 'zh' ? '车辆 / 司机' : 'Vehicle / Driver'}</div>
                          <div style={{ fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                            <span className="mono">{vehicle.plate}</span> · {(lang === 'zh' ? vehicle.driver_zh : vehicle.driver_en).split(' ')[0]}
                          </div>
                        </div>
                        <button className="icon-btn" onClick={() => clearAssignment(trip.id, 'driver')}><Icon.X size={12} /></button>
                      </>
                    ) : (
                      <div style={{ color: 'var(--muted)', fontSize: 12, display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
                        <Icon.Bus size={16} /> <span>{lang === 'zh' ? '拖入车辆' : 'Drop vehicle here'}</span>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Drivers / Vehicles pool */}
        <div className="card" style={{ padding: 14, alignSelf: 'flex-start', maxHeight: 700, overflowY: 'auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <div style={{ fontWeight: 600, fontSize: 13 }}>{lang === 'zh' ? '车辆 / 司机' : 'Vehicles / Drivers'}</div>
            <span className="badge no-dot" style={{ background: 'var(--bg-alt)', color: 'var(--muted)', fontSize: 10.5 }}>
              {D.VEHICLES.filter(v => v.status === 'available').length} {lang === 'zh' ? '可用' : 'free'}
            </span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {D.VEHICLES.filter(v => v.status !== 'maintenance').map((v, i) => (
              <div key={i}
                   draggable
                   onDragStart={() => onDragStart('driver', `V${i+1}`, v.plate)}
                   onDragEnd={onDragEnd}
                   style={{
                     padding: 10,
                     borderRadius: 10,
                     border: '1px solid var(--border)',
                     background: '#fff',
                     cursor: 'grab',
                     opacity: v.status === 'ontrip' ? .55 : 1
                   }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--bg-alt)', display: 'grid', placeItems: 'center', color: 'var(--navy)' }}>
                    <Icon.Bus size={14} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="mono" style={{ fontSize: 12.5, fontWeight: 700 }}>{v.plate}</div>
                    <div className="muted" style={{ fontSize: 10.5 }}>{v.type} · {v.cap} pax</div>
                  </div>
                  <StatusBadge status={v.status} t={t} />
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-soft)' }}>
                  {lang === 'zh' ? v.driver_zh : v.driver_en}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function MaintenanceLog({ t, lang }) {
  const logs = [
    { id: 'MNT-0042', plate: 'BPV 1095', type: 'Scheduled service', date: '2026-05-21', cost: 'RM 850', status: 'In Progress' },
    { id: 'MNT-0041', plate: 'BJP 9043', type: 'Brake pad replacement', date: '2026-05-14', cost: 'RM 1,200', status: 'Completed' },
    { id: 'MNT-0040', plate: 'BMB 7766', type: 'Tire rotation + alignment', date: '2026-05-08', cost: 'RM 380', status: 'Completed' },
    { id: 'MNT-0039', plate: 'BHC 3328', type: 'Engine oil change', date: '2026-05-02', cost: 'RM 220', status: 'Completed' },
    { id: 'MNT-0038', plate: 'BTM 5821', type: 'A/C system repair', date: '2026-04-26', cost: 'RM 1,650', status: 'Completed' }
  ];
  return (
    <div className="table-wrap">
      <div className="table-toolbar">
        <span className="title">{lang === 'zh' ? '维修记录' : 'Maintenance Log'}</span>
        <button className="btn btn-ghost btn-sm"><Icon.Plus size={13} /> {lang === 'zh' ? '新增工单' : 'New Ticket'}</button>
      </div>
      <table className="table">
        <thead>
          <tr>
            <th>{lang === 'zh' ? '工单号' : 'Ticket'}</th>
            <th>{lang === 'zh' ? '车牌' : 'Plate'}</th>
            <th>{lang === 'zh' ? '维修类型' : 'Service Type'}</th>
            <th>{t('date')}</th>
            <th>{lang === 'zh' ? '费用' : 'Cost'}</th>
            <th>{t('status')}</th>
          </tr>
        </thead>
        <tbody>
          {logs.map((l, i) => (
            <tr key={i}>
              <td className="strong mono" style={{ fontSize: 12 }}>{l.id}</td>
              <td className="mono">{l.plate}</td>
              <td className="strong">{l.type}</td>
              <td>{l.date}</td>
              <td className="strong">{l.cost}</td>
              <td>
                <span className={`badge ${l.status === 'Completed' ? 'badge-active' : 'badge-pending'}`}>
                  {l.status === 'Completed' ? (lang === 'zh' ? '已完成' : 'Completed') : (lang === 'zh' ? '维修中' : 'In Progress')}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

window.FleetPage = FleetPage;