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 FinancialSection() {
  return (
    <>
      {/* PRICING */}
      <div id="pricing" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💲 Pricing & Fares</h2>
        <p className={li}>View dynamically calculated fares per schedule and seat class. Fare = Base + Premium + Insurance. ADULT pays 100%; first CHILD free, subsequent CHILD 100%. Access level: Admin, Supervisor.</p>
      </div>
      <div id="pricing-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">💲 How-To: View Schedule Fares</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Select Schedule">
            <ol className={ol}><li>Click <strong>Pricing &amp; Fares</strong> in Financial</li><li>Choose a schedule from the dropdown</li><li>Table shows calculated fares per seat class and passenger type</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* TARIFF RATES */}
      <div id="tariff-rates" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📊 Tariff Rates</h2>
        <p className={li}>Manage base per-km tariff rates used to calculate fares across routes and seat classes. Access level: Admin.</p>
      </div>
      <div id="tariff-rates-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📊 How-To: Manage Tariff Rates</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create / Edit Rate">
            <ol className={ol}><li>Click <strong>Tariff Rates</strong> in Financial</li><li>Click <strong>Add Rate</strong> — set seat class, rate per km (ETB), passenger type, nationality, validity dates</li><li>Click <strong>Edit</strong> on existing rows to update; changes apply to new bookings only</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* FARE RULES */}
      <div id="fare-rules" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">📐 Fare Rules</h2>
        <p className={li}>Override or extend fares with schedule-specific or segment-specific rules, including nationality and passenger-type filters. Access level: Admin, Supervisor.</p>
        <div className="mt-3 bg-slate-50 dark:bg-slate-700/50 rounded p-3 text-xs text-slate-600 dark:text-slate-400 font-mono">
          Priority: Segment (nationality) → Segment (generic) → Schedule (nationality) → Schedule (generic) → Default class fare
        </div>
      </div>
      <div id="fare-rules-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">📐 How-To: Manage Fare Rules</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Schedule Fare Override">
            <ol className={ol}><li>Click <strong>Fare Rules</strong> in Financial → <strong>Schedule Fares</strong> tab</li><li>Click <strong>Add Fare Rule</strong>: select schedule, seat class, fare (ETB), passenger type, nationality, validity dates</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Segment Fare Rule">
            <ol className={ol}><li>Switch to <strong>Segment Fares</strong> tab</li><li>Select route, then origin and destination stations</li><li>Set seat class, fare, passenger type, nationality, validity dates</li><li>Destination must be after origin on the route</li></ol>
          </HowToStep>
          <HowToStep number={3} title="Edit / Delete">
            <ol className={ol}><li>Click <strong>Edit</strong> to update amount or dates</li><li>Click <strong>Delete</strong> — removed immediately for new bookings</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* PAYMENTS */}
      <div id="payments" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💳 Payments</h2>
        <p className={li}>Monitor transactions across all providers and process refunds. Providers: Telebirr · CBE Birr · eBirr · Card · Wallet · WAAFI. Access level: Supervisor, Admin.</p>
      </div>
      <div id="payments-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">💳 How-To: Manage Payments</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Search Transactions">
            <ol className={ol}><li>Click <strong>Payments</strong> in Financial</li><li>Search by booking reference or transaction ID</li><li>Filter by status (Succeeded · Failed · Processing · Refunded) or provider</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Process Refund">
            <ol className={ol}><li>Click <strong>Process Refund</strong> on a completed payment</li><li>Enter amount, select reason, add notes</li><li>Confirm — refund status: Pending → Processing → Completed</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* CURRENCIES */}
      <div id="currencies" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">💱 Currencies</h2>
        <p className={li}>Manage ETB→DJF and ETB→USD exchange rates used for display conversion. ETB is the transaction currency. Access level: 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">{['From','To','Rate','Example (3500 ETB)'].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">ETB</td><td>DJF</td><td>3.25</td><td>11,375 DJF</td></tr>
              <tr className="bg-slate-50 dark:bg-slate-700/30"><td className="px-3 py-1">ETB</td><td>USD</td><td>0.018</td><td>63 USD</td></tr>
            </tbody>
          </table>
        </div>
      </div>
      <div id="currencies-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">💱 How-To: Manage Exchange Rates</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Add / Update Rate">
            <ol className={ol}><li>Click <strong>Currencies</strong> in Financial</li><li>Click <strong>Add Currency Rate</strong>: from/to currency, rate value, effective date</li><li>Click <strong>Edit</strong> on existing rows to update; applies to future bookings/display</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* PROMOS */}
      <div id="promos" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🎁 Promo Codes</h2>
        <p className={li}>Create percentage or fixed-amount discount codes with expiry dates. Access level: Admin, Supervisor.</p>
      </div>
      <div id="promos-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🎁 How-To: Manage Promo Codes</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Create Code">
            <ol className={ol}><li>Click <strong>Add Promo Code</strong></li><li>Fill: code (uppercase), title, discount type (Percentage / Amount), value, valid until date</li><li>Toggle active and save</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Edit / Deactivate">
            <ol className={ol}><li>Click <strong>Edit</strong> to update value, dates, or active status</li><li>Click <strong>Delete</strong> — already-applied bookings keep their discount</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* PAYMENT METHODS */}
      <div id="payment-methods" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">🔌 Payment Methods</h2>
        <p className={li}>Configure API credentials, fees, and enable/disable payment providers. Access level: Admin.</p>
      </div>
      <div id="payment-methods-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">🔌 How-To: Configure Payment Methods</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="Configure Provider">
            <ol className={ol}><li>Click <strong>Payment Methods</strong> in Financial</li><li>Select a provider (Telebirr, CBE Birr, eBirr, Card, WAAFI)</li><li>Enter base URL, API key/secret, merchant ID, webhook endpoint</li><li>Set transaction fees, min/max amounts, enable/disable toggle</li></ol>
          </HowToStep>
          <HowToStep number={2} title="Test & Validate">
            <ol className={ol}><li>Run a test transaction to verify connectivity</li><li>Validate webhook endpoint accessibility and security secret</li></ol>
          </HowToStep>
        </div>
      </div>

      {/* WALLET ACCOUNTS */}
      <div id="wallet-accounts" className="border-t pt-8">
        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">👛 Wallet Accounts</h2>
        <p className={li}>View and manage passenger EDR wallet balances and transaction ledgers. Access level: Supervisor, Admin.</p>
      </div>
      <div id="wallet-accounts-how" className="border-t pt-8">
        <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">👛 How-To: Manage Wallet Accounts</h3>
        <div className="space-y-3">
          <HowToStep number={1} title="View Wallets">
            <ol className={ol}><li>Click <strong>Wallet Accounts</strong> in Financial</li><li>Search by passenger name or email</li><li>View current balance (ETB minor units) and last activity</li></ol>
          </HowToStep>
          <HowToStep number={2} title="View Ledger">
            <ol className={ol}><li>Click a wallet row to open the transaction ledger</li><li>See all credits, debits, top-ups, and refunds with timestamps</li></ol>
          </HowToStep>
        </div>
      </div>
    </>
  );
}
