'use client';

import { useState } from 'react';
import { Plus, Edit, Trash2 } from 'lucide-react';
import DataTable from '@/components/ui/DataTable';
import ActionButton from '@/components/ui/ActionButton';
import ConfirmDialog from '@/components/ui/ConfirmDialog';
import Modal from '@/components/ui/Modal';
import { useSegmentFareRules, useSegmentFareMutations, useSeatClasses, useRoutes } from './hooks';
import type { Route, SegmentFareRule, SeatClass } from './types';
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '@/lib/api-client';

interface RouteStop { sequence: number; station?: { name: string; code: string } }

function useRouteStops(routeId: string | null) {
  const { data } = useQuery({
    queryKey: ['route-stops', routeId],
    queryFn: () => apiClient.get<RouteStop[]>(`/routes/${routeId}/stops`),
    enabled: !!routeId,
  });
  return (Array.isArray(data) ? data : (data as any)?.items ?? []) as RouteStop[];
}

function useExchangeRates() {
  const { data } = useQuery({
    queryKey: ['exchange-rates'],
    queryFn: () => apiClient.get<any[]>('/currencies'),
  });
  const rates: any[] = Array.isArray(data) ? data : (data as any)?.items ?? [];
  // Build ETB→X lookup: rate value
  const rateMap: Record<string, number> = {};
  for (const r of rates) {
    if (r.fromCurrency === 'ETB') rateMap[r.toCurrency] = r.rate;
  }
  return rateMap;
}

function formatFixed(amountMinor: number, currency = 'ETB', rateMap: Record<string, number> = {}) {
  const etb = (amountMinor / 100).toFixed(2);
  if (currency === 'ETB') return `ETB ${etb}`;
  const rate = rateMap[currency];
  if (!rate) return `ETB ${etb}`;
  const converted = ((amountMinor / 100) * rate).toFixed(2);
  return `ETB ${etb} ≈ ${currency} ${converted}`;
}

interface Props { routes: Route[] }

type FormState = { isOpen: boolean; rule: SegmentFareRule | null; error: string | null };

export default function SegmentOverridesTab({ routes }: Props) {
  const [selectedRouteId, setSelectedRouteId] = useState<string | null>(null);
  const [form, setForm] = useState<FormState>({ isOpen: false, rule: null, error: null });
  const [deleteConfirm, setDeleteConfirm] = useState<{ isOpen: boolean; id: string | null; name: string; error?: string }>({ isOpen: false, id: null, name: '' });

  const { segmentFares, isLoading } = useSegmentFareRules(selectedRouteId);
  const { create, update, remove } = useSegmentFareMutations(selectedRouteId);
  const { allClasses } = useSeatClasses();
  const stops = useRouteStops(selectedRouteId);
  const rateMap = useExchangeRates();

  const stopLabel = (seq: number) => {
    const s = stops.find(st => st.sequence === seq);
    return s?.station ? `${s.station.name} (${s.station.code})` : `Stop ${seq}`;
  };

  const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setForm(prev => ({ ...prev, error: null }));
    const fd = new FormData(e.currentTarget);
    const baseFareMinor = Math.round(Number(fd.get('baseFareMinor')) * 100);
    try {
      if (form.rule) {
        await update.mutateAsync({ id: form.rule.id, baseFareMinor });
      } else {
        await create.mutateAsync({
          routeId: selectedRouteId,
          originStopSequence: Number(fd.get('originStopSequence')),
          destinationStopSequence: Number(fd.get('destinationStopSequence')),
          seatClassId: fd.get('seatClassId') as string,
          nationality: (fd.get('nationality') as string) || null,
          baseFareMinor,
          validFrom: new Date().toISOString(),
        });
      }
      setForm({ isOpen: false, rule: null, error: null });
    } catch (err: any) {
      setForm(prev => ({ ...prev, error: err?.response?.data?.message ?? err?.message ?? 'Failed to save' }));
    }
  };

  const handleDelete = async () => {
    try {
      await remove.mutateAsync(deleteConfirm.id!);
      setDeleteConfirm({ isOpen: false, id: null, name: '' });
    } catch (err: any) {
      setDeleteConfirm(prev => ({ ...prev, error: err?.response?.data?.message ?? err?.message ?? 'Delete failed' }));
    }
  };

  const columns = [
    {
      key: 'segment', label: 'Segment',
      render: (r: SegmentFareRule) => (
        <span className="font-medium">
          {stopLabel(r.originStopSequence)} → {stopLabel(r.destinationStopSequence)}
        </span>
      ),
    },
    {
      key: 'seatClass', label: 'Seat Class',
      render: (r: SegmentFareRule) => <span>{r.seatClass?.name ?? r.seatClassId}</span>,
    },
    {
      key: 'nationality', label: 'Nationality',
      render: (r: SegmentFareRule) => <span className="text-sm">{r.nationality ?? 'All'}</span>,
    },
    {
      key: 'baseFareMinor', label: 'Fixed Price',
      render: (r: SegmentFareRule) => (
        <span className="font-mono font-medium text-sm">{formatFixed(r.baseFareMinor, 'ETB', rateMap)}</span>
      ),
    },
    {
      key: 'converted', label: 'Converted',
      render: (r: SegmentFareRule) => (
        <div className="text-xs text-muted-foreground space-y-0.5">
          {Object.entries(rateMap).map(([cur, rate]) => (
            <div key={cur}>{cur} {((r.baseFareMinor / 100) * rate).toFixed(2)}</div>
          ))}
        </div>
      ),
    },
    {
      key: 'validFrom', label: 'Valid From',
      render: (r: SegmentFareRule) => <span className="text-sm">{new Date(r.validFrom).toLocaleDateString()}</span>,
    },
    {
      key: 'validUntil', label: 'Valid Until',
      render: (r: SegmentFareRule) => <span className="text-sm">{r.validUntil ? new Date(r.validUntil).toLocaleDateString() : '—'}</span>,
    },
  ];

  const isAddMode = form.isOpen && !form.rule;
  const isPending = create.isPending || update.isPending;

  return (
    <>
      <div className="mb-3 text-sm text-muted-foreground bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg px-4 py-2">
        Segment overrides set a <strong>fixed total price</strong> for a specific origin→destination stop pair, bypassing per-km calculation.
        Precedence: <strong>Segment Override</strong> → Route Override → Seat Class Tariff.
      </div>

      <div className="flex items-center gap-3 mb-4">
        <select
          className="input w-64"
          value={selectedRouteId ?? ''}
          onChange={e => setSelectedRouteId(e.target.value || null)}
        >
          <option value="">Select route</option>
          {routes.map(r => (
            <option key={r.id} value={r.id}>{r.name}{r.code ? ` (${r.code})` : ''}</option>
          ))}
        </select>

        <ActionButton icon={Plus} onClick={() => setForm({ isOpen: true, rule: null, error: null })} disabled={!selectedRouteId}>
          Add Segment Override
        </ActionButton>
      </div>

      {!selectedRouteId ? (
        <div className="text-center py-8 text-muted-foreground">Select a route above to view its segment overrides.</div>
      ) : (
        <DataTable
          data={segmentFares}
          columns={columns}
          actions={[
            { label: 'Edit', icon: Edit, variant: 'secondary' as const, onClick: (r: SegmentFareRule) => setForm({ isOpen: true, rule: r, error: null }) },
            { label: 'Delete', icon: Trash2, variant: 'danger' as const, onClick: (r: SegmentFareRule) => setDeleteConfirm({ isOpen: true, id: r.id, name: `${stopLabel(r.originStopSequence)} → ${stopLabel(r.destinationStopSequence)}` }) },
          ]}
          loading={isLoading}
          emptyMessage="No segment overrides for this route."
        />
      )}

      <Modal
        isOpen={form.isOpen}
        onClose={() => setForm({ isOpen: false, rule: null, error: null })}
        title={isAddMode ? 'Add Segment Override' : 'Edit Segment Override'}
        size="md"
      >
        <form key={form.rule?.id ?? 'add'} onSubmit={handleFormSubmit} className="space-y-4">
          {form.error && (
            <div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-3 text-sm text-red-800 dark:text-red-200">{form.error}</div>
          )}

          {isAddMode ? (
            <div className="grid grid-cols-1 gap-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="label">Origin Stop *</label>
                  <select name="originStopSequence" className="input w-full" required>
                    <option value="">Select origin</option>
                    {stops.map(s => (
                      <option key={s.sequence} value={s.sequence}>{stopLabel(s.sequence)}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="label">Destination Stop *</label>
                  <select name="destinationStopSequence" className="input w-full" required>
                    <option value="">Select destination</option>
                    {stops.map(s => (
                      <option key={s.sequence} value={s.sequence}>{stopLabel(s.sequence)}</option>
                    ))}
                  </select>
                </div>
              </div>
              <div>
                <label className="label">Seat Class *</label>
                <select name="seatClassId" className="input w-full" required>
                  <option value="">Select seat class</option>
                  {allClasses.filter((c: SeatClass) => c.isActive).map((c: SeatClass) => (
                    <option key={c.id} value={c.id}>{c.name}</option>
                  ))}
                </select>
              </div>
              <div>
                <label className="label">Nationality <span className="text-muted-foreground font-normal">(optional — leave blank for all)</span></label>
                <select name="nationality" className="input w-full">
                  <option value="">All nationalities</option>
                  <option value="Ethiopian">Ethiopian</option>
                  <option value="Djiboutian">Djiboutian</option>
                  <option value="Other">Other (International)</option>
                </select>
              </div>
            </div>
          ) : (
            <div className="p-3 rounded-lg bg-muted/50 text-sm text-muted-foreground">
              <span className="font-medium text-foreground">
                {form.rule && stopLabel(form.rule.originStopSequence)} → {form.rule && stopLabel(form.rule.destinationStopSequence)}
              </span>
              {' · '}{form.rule?.seatClass?.name ?? form.rule?.seatClassId}
              {form.rule?.nationality ? ` · ${form.rule.nationality}` : ' · All nationalities'}
            </div>
          )}

          <div>
            <label className="label">Fixed Price (ETB) *</label>
            <input
              type="number"
              name="baseFareMinor"
              className="input"
              defaultValue={form.rule ? (form.rule.baseFareMinor / 100).toFixed(2) : ''}
              min="0" step="0.01" required
              placeholder="e.g. 350.00"
            />
            {Object.keys(rateMap).length > 0 && (
              <p className="text-xs text-muted-foreground mt-1">
                Exchange rates applied at booking: {Object.entries(rateMap).map(([c, r]) => `1 ETB = ${r} ${c}`).join(', ')}
              </p>
            )}
          </div>

          <div className="flex justify-end gap-2 pt-2">
            <ActionButton type="button" variant="secondary" onClick={() => setForm({ isOpen: false, rule: null, error: null })}>Cancel</ActionButton>
            <ActionButton type="submit" loading={isPending}>
              {isAddMode ? 'Create Override' : 'Update Override'}
            </ActionButton>
          </div>
        </form>
      </Modal>

      <ConfirmDialog
        isOpen={deleteConfirm.isOpen}
        onClose={() => setDeleteConfirm({ isOpen: false, id: null, name: '' })}
        onConfirm={handleDelete}
        title="Delete Segment Override"
        message={`Delete the segment override for "${deleteConfirm.name}"? The route override or global tariff will apply instead.`}
        confirmText="Delete"
        isDanger
        isLoading={remove.isPending}
        error={deleteConfirm.error}
        warning="Removing this override means bookings on this segment will fall back to the route override or global tariff rate."
      />
    </>
  );
}
