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 SystemSection() {
  return (
    <>
      {/* AGENTS */}
      <div id="agents" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🧑‍💼 Agents</h2>
        <p className={li}>Counter booking, shift management, commission tracking, and daily reconciliation. Access level: Supervisor, Admin.</p>
      </div>
      <div id="agents-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🧑‍💼 How-To: Agent Operations</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create Counter Booking">
            <ol className={ol}><li>Click <strong>Agents</strong> in System → <strong>New Booking</strong></li><li>Select schedule, seats, passengers, and seat class</li><li>Choose payment method (Cash / Card / Check); enter amount received</li><li>Click <strong>Create Booking</strong> — prints or emails ticket</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Manage Shifts">
            <ol className={ol}><li><strong>Open Shift</strong> — enter opening cash balance</li><li><strong>Close Shift</strong> — enter closing balance; system calculates variance</li><li>View shift summary: total bookings, revenue, commission earned</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* USERS */}
      <div id="users" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">👤 Users</h2>
        <p className={li}>Manage back-office user accounts and role assignments. Roles: AGENT · SUPERVISOR · ADMIN · STAFF. Access level: Admin.</p>
      </div>
      <div id="users-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">👤 How-To: Manage Users</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create User">
            <ol className={ol}><li>Click <strong>Users</strong> in System → <strong>Add User</strong></li><li>Fill: email, full name, phone, role, department</li><li>Save — temporary password emailed to user automatically</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Edit / Reset Password">
            <ol className={ol}><li>Click a user row to open profile modal</li><li>Update name, role, or department; toggle active status</li><li>Click <strong>Reset Password</strong> to generate and email a new temporary password</li></ol>
          </HowToStep>
          <HowToStep number={3} title="Deactivate / Delete">
            <ol className={ol}><li><strong>Deactivate</strong> — keeps records, disables login (preferred)</li><li><strong>Delete</strong> — permanently removes user</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* SETTINGS */}
      <div id="settings" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">⚙️ Settings</h2>
        <p className={li}>Configure application-wide settings: general, email (SMTP), payment provider credentials, API integrations, and rate limits. Access level: Admin.</p>
      </div>
      <div id="settings-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">⚙️ How-To: Manage Settings</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Update Configuration">
            <ol className={ol}><li>Click <strong>Settings</strong> in System</li><li>Select category tab: General · Email · Payments · API</li><li>Modify values, test connections where applicable, then <strong>Save</strong></li><li>Changes take effect immediately and are audit-logged</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Rate Limiting (System Config)">
            <ol className={ol}><li>Auth endpoints default: 5 req/min</li><li>Strict endpoints (bookings, payments, wallet) default: 20 req/min</li><li>Default endpoints: 100 req/min · Health/webhooks: exempt</li><li>Seat hold duration default: 5 min · Hold cutoff before departure: 2 hrs</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* HEALTH */}
      <div id="health" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🏥 Health</h2>
        <p className={li}>Real-time API health dashboard — liveness, readiness (DB latency), and app info. Auto-refreshes every 30–60 s. Access level: Admin, Supervisor.</p>
      </div>
      <div id="health-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🏥 How-To: Monitor Health</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Read the Dashboard">
            <ol className={ol}><li>Click <strong>Health</strong> in System</li><li>Green banner = all systems operational; Red = degraded</li><li>Liveness probe: API process alive (30 s) · Readiness: DB ping + latency (30 s) · App Info: version, uptime (60 s)</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Troubleshoot">
            <ol className={ol}><li>Red readiness: check DB server and connection string</li><li>High latency: review slow queries and server resources</li><li>Click <strong>Refresh</strong> for an immediate manual check</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* APP RELEASES */}
      <div id="app-releases" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📱 App Releases</h2>
        <p className={li}>Manage mobile app release notes and version announcements shown to passengers. Access level: Admin.</p>
      </div>
      <div id="app-releases-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📱 How-To: Manage App Releases</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create Release">
            <ol className={ol}><li>Click <strong>App Releases</strong> in System → <strong>New Release</strong></li><li>Fill: version number, platform (iOS / Android / Both), release notes, release date</li><li>Toggle <strong>Force Update</strong> if the release is mandatory</li><li>Save to publish the announcement</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Edit / Delete">
            <ol className={ol}><li>Click <strong>Edit</strong> to update notes or toggle force-update flag</li><li>Click <strong>Delete</strong> to remove an outdated release entry</li></ol>
          </HowToStep>
        </div>
      </div>
    </>
  );
}
