edr-platform/apps/edr-passenger-web/backoffice/src/app/docs/sections/MasterDataSection.tsx

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 MasterDataSection() {
  return (
    <>
      {/* STATIONS */}
      <div id="stations" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📍 Stations</h2>
        <p className={li}>Configure railway stations with code, city, country, coordinates, and operational status. Access level: Supervisor, Admin.</p>
      </div>
      <div id="stations-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📍 How-To: Manage Stations</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create Station">
            <ol className={ol}><li>Click <strong>Add Station</strong></li><li>Fill: 3-letter code (e.g. ADD), name, city, country code, lat/lng, timezone</li><li>Toggle operational status and save</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Edit / Delete">
            <ol className={ol}><li>Click <strong>Edit</strong> on any row to update fields</li><li>Click <strong>Delete</strong> — system warns if routes or schedules depend on this station</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* TRAINS */}
      <div id="trains" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🚂 Trains</h2>
        <p className={li}>Manage the train fleet — number, name, operator, status, and attached coaches. Access level: Supervisor, Admin.</p>
      </div>
      <div id="trains-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🚂 How-To: Manage Trains</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create Train">
            <ol className={ol}><li>Click <strong>Add Train</strong></li><li>Fill: unique number, name, operator, description, status</li><li>Save, then assign coaches</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Edit / Delete">
            <ol className={ol}><li>Click <strong>Edit</strong> to update details or change status</li><li>Delete only if no active schedules reference this train</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* COACHES */}
      <div id="coaches" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🚃 Coaches</h2>
        <p className={li}>Manage coach inventory, seat layout, type, and maintenance status. Access level: Supervisor, Admin.</p>
      </div>
      <div id="coaches-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🚃 How-To: Manage Coaches</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create Coach">
            <ol className={ol}><li>Click <strong>Add Coach</strong></li><li>Fill: number, coach type, arrangement (e.g. 2+2), capacity, status</li><li>Auto-generate seats from arrangement or configure manually</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Edit / Delete">
            <ol className={ol}><li>Update arrangement (limited if seats are occupied)</li><li>Delete only if no scheduled trips use this coach</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* SEATS */}
      <div id="seats" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💺 Seats</h2>
        <p className={li}>View seat maps, update properties, block/unblock seats, and bulk import/export via CSV. Access level: Supervisor, Admin.</p>
      </div>
      <div id="seats-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">💺 How-To: Manage Seats</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="View Seat Map">
            <ol className={ol}><li>Select a coach from the dropdown</li><li>Color-coded grid: Green=Available · Yellow=Held · Blue=Booked · Red=Blocked</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Block / Unblock">
            <ol className={ol}><li>Click a seat → <strong>Block</strong> with reason (Maintenance, Reserved, Damaged)</li><li>Optionally set an expiry date; click <strong>Unblock</strong> to release</li></ol>
          </HowToStep>
          <HowToStep number={3} title="Bulk Operations">
            <ol className={ol}><li>Select multiple seats via checkboxes for bulk status changes</li><li>Use <strong>CSV Import</strong> to create/update seats in bulk; <strong>CSV Export</strong> for backup</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* CLASSES */}
      <div id="classes" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🏷️ Seat Classes</h2>
        <p className={li}>Define seat class types with base fare, premium fee, and insurance fee. Access level: Supervisor, Admin.</p>
        <div className="mt-3 overflow-x-auto">
          <table className="text-xs w-full border-collapse">
            <thead><tr className="bg-slate-100 dark:bg-slate-700">{['Class','Base Fare','Premium','Insurance','Total/Adult'].map(h=><th key={h} className="text-left px-3 py-2 text-slate-700 dark:text-slate-300">{h}</th>)}</tr></thead>
            <tbody className="text-slate-600 dark:text-slate-400">
              <tr><td className="px-3 py-1">Economy Regular</td><td>350 ETB</td><td>0 ETB</td><td>5 ETB</td><td>355 ETB</td></tr>
              <tr className="bg-slate-50 dark:bg-slate-700/30"><td className="px-3 py-1">Economy Bed</td><td>490 ETB</td><td>50 ETB</td><td>10 ETB</td><td>550 ETB</td></tr>
              <tr><td className="px-3 py-1">VIP Bed</td><td>630 ETB</td><td>150 ETB</td><td>15 ETB</td><td>795 ETB</td></tr>
            </tbody>
          </table>
        </div>
      </div>
      <div id="classes-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🏷️ How-To: Manage Seat Classes</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create Class">
            <ol className={ol}><li>Click <strong>Add Class</strong></li><li>Fill: name, coach type, base fare (ETB), premium fee, insurance fee</li><li>Toggle active and save — changes apply to new bookings only</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* ROUTES */}
      <div id="routes" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🗺️ Routes</h2>
        <p className={li}>Define routes as ordered station sequences with cumulative distances. Access level: Supervisor, Admin.</p>
      </div>
      <div id="routes-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🗺️ How-To: Manage Routes</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create Route">
            <ol className={ol}><li>Click <strong>Add Route</strong></li><li>Fill: code (e.g. ADD-DJI), name, effective dates, active status</li><li>Add stops: select station, enter distance from previous stop</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Edit Stops">
            <ol className={ol}><li>Reorder stops via drag-and-drop; update distances</li><li>Remove stops only if no bookings exist on that segment</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* SCHEDULES */}
      <div id="schedules" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📅 Schedules</h2>
        <p className={li}>Create individual or bulk-generated trip schedules with coach assignments. Access level: Supervisor, Admin.</p>
      </div>
      <div id="schedules-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📅 How-To: Manage Schedules</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create Single Schedule">
            <ol className={ol}><li>Click <strong>Create Schedule</strong></li><li>Select train, route, departure/arrival date-time</li><li>Assign coaches (order matters for position numbers)</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Bulk Generate">
            <ol className={ol}><li>Click <strong>Bulk Generate</strong></li><li>Set train, route, start date/time, duration (hrs), repeat interval (days), and period (days)</li><li>Preview count then click <strong>Generate Schedules</strong></li></ol>
          </HowToStep>
          <HowToStep number={3} title="Edit / Delete">
            <ol className={ol}><li>Edit departure/arrival times, status, or coach assignments</li><li>Delete cascades to seat holds and live status records</li><li>Bulk-select rows for multi-delete</li></ol>
          </HowToStep>
        </div>
      </div>
    </>
  );
}