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 SecuritySection() {
  return (
    <>
      <div id="audit" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📋 Audit Logs</h2>
        <p className={li}>Immutable log of all user actions — creates, updates, deletes, payments, cancellations, and auth events. Access level: Supervisor, Admin.</p>
      </div>
      <div id="audit-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📋 How-To: Use Audit Logs</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Search & Filter">
            <ol className={ol}><li>Click <strong>Audit Logs</strong> in Security &amp; Compliance</li><li>Filter by user, action type (Create / Update / Delete), entity type, or date range</li></ol>
          </HowToStep>
          <HowToStep number={2} title="View Change Detail">
            <ol className={ol}><li>Click a log entry to open the detail modal</li><li>Side-by-side old vs new values with highlighted changed fields</li><li>Includes IP address and user-agent</li></ol>
          </HowToStep>
          <HowToStep number={3} title="Export">
            <ol className={ol}><li>Click <strong>Export</strong> — choose CSV, JSON, or PDF</li><li>Apply current filters before exporting for targeted compliance reports</li><li>Logs retained 12 months active, 7 years archived</li></ol>
          </HowToStep>
        </div>
      </div>

      <div id="fraud" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🛡️ Fraud Detection</h2>
        <p className={li}>Monitor fraud alerts triggered by rules (rapid bookings, high-value transactions, failed payments, duplicate IDs). Access level: Supervisor, Admin.</p>
        <div className="mt-3 flex flex-wrap gap-2 text-xs">
          {[['LOW','bg-yellow-100 text-yellow-800'],['MEDIUM','bg-orange-100 text-orange-800'],['HIGH','bg-red-100 text-red-800']].map(([s, cls]) => (
            <span key={s} className={`${cls} dark:bg-opacity-20 px-2 py-1 rounded font-semibold`}>{s}</span>
          ))}
        </div>
      </div>
      <div id="fraud-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🛡️ How-To: Manage Fraud Alerts</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Review Alerts">
            <ol className={ol}><li>Click <strong>Fraud Detection</strong> in Security &amp; Compliance</li><li>Filter by severity or status (Open / Acknowledged / Resolved)</li><li>Click an alert to see full context, triggering rules, and risk score</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Take Action">
            <ol className={ol}><li><strong>Allow</strong> — booking proceeds; logged for audit</li><li><strong>Block User</strong> — set duration and reason; user cannot book during block period</li><li><strong>Escalate to Admin</strong> — adds to priority review queue</li></ol>
          </HowToStep>
          <HowToStep number={3} title="Manage Rules">
            <ol className={ol}><li>Open <strong>Rules</strong> tab to view all active detection rules</li><li>Click a rule to adjust threshold values or toggle active/inactive</li></ol>
          </HowToStep>
        </div>
      </div>
    </>
  );
}
