import { HowToStep } from './_shared';

const li = 'text-sm text-slate-700 dark:text-slate-300';
const ol = 'list-decimal pl-5 space-y-1 ' + li;

export default function OperationsSection() {
  return (
    <>
      {/* BOOKINGS */}
      <div id="bookings" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📋 Bookings</h2>
        <p className={li}>View, search, cancel, and delete passenger bookings. Access level: Agent, Supervisor, Admin.</p>
      </div>
      <div id="bookings-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📋 How-To: Manage Bookings</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Search & Filter">
            <ol className={ol}><li>Click <strong>Bookings</strong> in Operations</li><li>Use search box for reference, email, or phone</li><li>Filter by status: Pending · Confirmed · Cancelled · Completed</li></ol>
          </HowToStep>
          <HowToStep number={2} title="View Details">
            <ol className={ol}><li>Click <strong>View Details</strong> to open booking modal</li><li>See passenger info, journey, payment, and booking source</li></ol>
          </HowToStep>
          <HowToStep number={3} title="Cancel or Delete">
            <ol className={ol}><li>Click <strong>Cancel Booking</strong> — auto-processes refund (80% confirmed, 0% pending)</li><li>Click <strong>Delete</strong> to permanently remove and release seats</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* PASSENGERS */}
      <div id="passengers" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">👥 Passengers</h2>
        <p className={li}>View passenger profiles, verification status, loyalty tier, and wallet balance. Access level: Agent, Supervisor, Admin.</p>
      </div>
      <div id="passengers-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">👥 How-To: Manage Passengers</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Search Passengers">
            <ol className={ol}><li>Click <strong>Passengers</strong> in Operations</li><li>Search by name, email, phone, or ID</li><li>Filter by nationality, Verifayda status, or loyalty tier</li></ol>
          </HowToStep>
          <HowToStep number={2} title="View Profile">
            <ol className={ol}><li>Click a passenger row to open profile modal</li><li>Review account info, verification status, loyalty points, wallet balance, and booking history</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* TICKETS */}
      <div id="tickets" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🎫 Tickets</h2>
        <p className={li}>View issued tickets, QR/barcode status, and gate validation logs. Access level: Supervisor, Admin.</p>
      </div>
      <div id="tickets-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🎫 How-To: Manage Tickets</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Find a Ticket">
            <ol className={ol}><li>Click <strong>Tickets</strong> in Operations</li><li>Search by booking reference or passenger name</li><li>Filter by status: Confirmed · Validated · Cancelled</li></ol>
          </HowToStep>
          <HowToStep number={2} title="View & Resend">
            <ol className={ol}><li>Click <strong>View</strong> to see QR/barcode, seat, and fare breakdown</li><li>Download PDF or resend to passenger email</li></ol>
          </HowToStep>
          <HowToStep number={3} title="Validation Status">
            <ol className={ol}><li>Unvalidated: not yet scanned at gate</li><li>Validated: scanned and approved for boarding</li><li>View gate validation logs with timestamp and validator ID</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* BOARDING */}
      <div id="boarding" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🚆 Boarding</h2>
        <p className={li}>Manage gate operations and real-time passenger boarding for active trips. Access level: Agent, Supervisor, Admin.</p>
      </div>
      <div id="boarding-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🚆 How-To: Manage Boarding</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Open Boarding Dashboard">
            <ol className={ol}><li>Click <strong>Boarding</strong> in Operations</li><li>Select the active trip/schedule</li><li>View real-time passenger count and progress</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Process Passengers">
            <ol className={ol}><li>Scan or validate tickets at gate</li><li>Resolve seat conflicts or duplicate assignments</li><li>Mark no-shows and process late arrivals</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* EXCESS BAGGAGE */}
      <div id="excess-baggage" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📦 Luggage (Excess Luggage)</h2>
        <p className={li}>Handle excess baggage charges at boarding — passenger self-pay or agent cash collection. Access level: Agent, Supervisor, Admin.</p>
        <div className="mt-3 flex flex-wrap gap-2 text-xs">
          {['PENDING','PAID','CASH_COLLECTED','EXPIRED','WAIVED'].map(s => (
            <span key={s} className="bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 px-2 py-1 rounded font-mono">{s}</span>
          ))}
        </div>
      </div>
      <div id="excess-baggage-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📦 How-To: Handle Excess Luggage</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Find Charges">
            <ol className={ol}><li>Click <strong>Luggage</strong> in Operations</li><li>Search by booking reference; filter by status or date</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Take Action">
            <ol className={ol}><li><strong>Resend Link</strong> — sends fresh 5-min payment link to passenger</li><li><strong>Waive</strong> — enter reason (supervisor authority); logged for audit</li><li><strong>Delete</strong> — only for EXPIRED or WAIVED charges</li></ol>
          </HowToStep>
        </div>
      </div>
    </>
  );
}
