edr-platform/apps/edr-passenger-web/backoffice/src/app/pricing/page.tsx

'use client';

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Save } from 'lucide-react';
import Table from '@/components/ui/Table';
import { routesApi } from '@/lib/api/routes';
import { formatCurrency } from '@/lib/utils';

export default function PricingPage() {
  const [selectedRoute, setSelectedRoute] = useState<string>('1');

  const { data: fareRules } = useQuery({
    queryKey: ['fare-rules', selectedRoute],
    queryFn: () => routesApi.getFareRules(selectedRoute),
    initialData: [
      { id: '1', routeId: '1', passengerCategory: 'ADULT', serviceClass: 'ECONOMY_REGULAR', baseFare: 35000, currency: 'ETB' },
      { id: '2', routeId: '1', passengerCategory: 'CHILD', serviceClass: 'ECONOMY_REGULAR', baseFare: 0, currency: 'ETB' },
      { id: '3', routeId: '1', passengerCategory: 'ADULT', serviceClass: 'ECONOMY_BED', baseFare: 52500, currency: 'ETB' },
      { id: '4', routeId: '1', passengerCategory: 'ADULT', serviceClass: 'VIP_BED', baseFare: 70000, currency: 'ETB' },
    ],
  });

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Pricing & Fare Rules</h1>
          <p className="text-gray-600">Manage fare rules and pricing for different routes and classes</p>
        </div>
        <button className="btn btn-primary flex items-center gap-2">
          <Save className="h-4 w-4" />
          Save Changes
        </button>
      </div>

      <div className="card">
        <div className="mb-6">
          <label className="label">Select Route</label>
          <select
            className="input w-full max-w-md"
            value={selectedRoute}
            onChange={(e) => setSelectedRoute(e.target.value)}
          >
            <option value="1">Addis Ababa - Djibouti</option>
          </select>
        </div>

        <div className="mb-4">
          <h3 className="text-lg font-semibold text-gray-900">Fare Rules</h3>
          <p className="text-sm text-gray-600">Configure base fares for different passenger categories and service classes</p>
        </div>

        <Table
          data={fareRules}
          columns={[
            { key: 'passengerCategory', label: 'Passenger Category' },
            { key: 'serviceClass', label: 'Service Class' },
            { key: 'baseFare', label: 'Base Fare', render: (item) => (
              <input
                type="number"
                defaultValue={item.baseFare}
                className="input w-32"
              />
            )},
            { key: 'currency', label: 'Currency' },
          ]}
        />
      </div>

      <div className="card">
        <h3 className="mb-4 text-lg font-semibold text-gray-900">Pricing Rules</h3>
        <div className="space-y-4">
          <div className="rounded-lg bg-blue-50 p-4">
            <h4 className="font-medium text-blue-900">Age-Based Pricing</h4>
            <ul className="mt-2 space-y-1 text-sm text-blue-700">
              <li>• ADULT (≥5 years): Pay 100% of base fare</li>
              <li>• CHILD (&lt;5 years): First child travels FREE, subsequent children pay 100%</li>
            </ul>
          </div>
          <div className="rounded-lg bg-green-50 p-4">
            <h4 className="font-medium text-green-900">Multi-Currency Support</h4>
            <ul className="mt-2 space-y-1 text-sm text-green-700">
              <li>• Transaction Currency: ETB (Ethiopian Birr)</li>
              <li>• Display Currencies: ETB, DJF, USD</li>
              <li>• Exchange rates: ETB→DJF=3.25, ETB→USD=0.018</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}