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

'use client';

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { UserPlus, Download, Eye } from 'lucide-react';
import DataTable from '@/components/ui/DataTable';
import Badge from '@/components/ui/Badge';
import Pagination from '@/components/ui/Pagination';
import ActionButton from '@/components/ui/ActionButton';
import { passengersApi } from '@/lib/api';
import { formatDate } from '@/lib/utils';
import { PassengerFilters } from '@/types';

export default function PassengersPage() {
  const [filters, setFilters] = useState<PassengerFilters>({
    page: 1,
    pageSize: 20,
    search: '',
  });

  const { data, isLoading, error } = useQuery({
    queryKey: ['passengers', filters],
    queryFn: () => passengersApi.getAll(filters),
  });

  if (error) {
    console.error('Passengers API Error:', error);
  }

  const columns = [
    { 
      key: 'fullName', 
      label: 'Name',
      sortable: true,
      render: (passenger: any) => (
        <div>
          <div className="font-medium">{passenger.fullName}</div>
          <div className="text-sm text-muted-foreground">{passenger.email}</div>
        </div>
      ),
    },
    { 
      key: 'phone', 
      label: 'Phone',
      render: (passenger: any) => passenger.phone,
    },
    { 
      key: 'nationalId', 
      label: 'National ID',
      render: (passenger: any) => passenger.nationalId || 'N/A',
    },
    { 
      key: 'dateOfBirth', 
      label: 'Date of Birth',
      render: (passenger: any) => passenger.dateOfBirth ? formatDate(passenger.dateOfBirth) : 'N/A',
    },
    { 
      key: 'verified', 
      label: 'Status',
      render: (passenger: any) => (
        <Badge variant="status" status={passenger.nationalId ? 'CONFIRMED' : 'PENDING'}>
          {passenger.nationalId ? 'Verified' : 'Unverified'}
        </Badge>
      ),
    },
  ];

  const actions = [
    // TODO: Create passenger detail page
    // {
    //   label: 'View Details',
    //   onClick: (passenger: any) => window.location.href = `/passengers/${passenger.id}`,
    //   variant: 'secondary' as const,
    //   icon: Eye,
    // },
  ];

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Passengers</h1>
          <p className="text-muted-foreground">Manage passenger profiles and verification</p>
        </div>
        <div className="flex gap-2">
          <ActionButton variant="export" icon={Download}>Export</ActionButton>
        </div>
      </div>

      <div className="card">
        {error && (
          <div className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-sm text-red-800 dark:text-red-200">
            Error loading passengers: {error instanceof Error ? error.message : 'Unknown error'}
          </div>
        )}
        <div className="mb-4 flex flex-wrap gap-4">
          <div className="flex-1">
            <input
              type="text"
              placeholder="Search by name, email, or phone..."
              className="input"
              value={filters.search}
              onChange={(e) => setFilters({ ...filters, search: e.target.value, page: 1 })}
            />
          </div>
          <select
            className="input w-48"
            value={filters.verified?.toString() || ''}
            onChange={(e) => setFilters({ ...filters, verified: e.target.value ? e.target.value === 'true' : undefined, page: 1 })}
          >
            <option value="">All Passengers</option>
            <option value="true">Verified</option>
            <option value="false">Unverified</option>
          </select>
        </div>

        <DataTable
          data={data?.items || []}
          columns={columns}
          actions={actions}
          loading={isLoading}
          emptyMessage="No passengers found"
        />
        
        {data?.meta && (
          <Pagination
            currentPage={data.meta.page}
            totalPages={data.meta.totalPages}
            onPageChange={(page) => setFilters({ ...filters, page })}
          />
        )}
      </div>
    </div>
  );
}