import { useMemo, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { isAxiosError } from 'axios';
import toast from 'react-hot-toast';
import { Calendar, RefreshCw, TrainTrack } from 'lucide-react';
import {
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@edr/ui-common';

import Breadcrumbs from '@/components/ui/Breadcrumbs';
import { QUERY_KEYS } from '@/constants/QUERY_KEYS';
import { useRoutes } from '@/hooks/useRoutes';
import { trainSchedulingService } from '@/services/trainScheduling.service';

const inputClassName =
  'w-full rounded-xl border border-border bg-background px-3 py-2.5 text-sm text-foreground outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 dark:focus:ring-emerald-950';

const formatDate = (value?: string | null) => {
  if (!value) return '-';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '-';
  return new Intl.DateTimeFormat('en', {
    year: 'numeric',
    month: 'short',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  }).format(date);
};

const parseError = (error: unknown, fallback: string) => {
  if (isAxiosError(error)) {
    const message = error.response?.data?.message;
    if (Array.isArray(message)) return message.join(', ');
    if (typeof message === 'string') return message;
    const violations = error.response?.data?.violations;
    if (Array.isArray(violations)) return violations.join(', ');
  }
  return fallback;
};

const TrainsPage = () => {
  const qc = useQueryClient();
  const [routeId, setRouteId] = useState('');
  const [scheduleDate, setScheduleDate] = useState('');
  const [selectedLocomotiveId, setSelectedLocomotiveId] = useState('');
  const [detailId, setDetailId] = useState<string | null>(null);
  const [scheduleSearch, setScheduleSearch] = useState('');
  const [scheduleStatusFilter, setScheduleStatusFilter] = useState('ALL');

  const routesQuery = useRoutes();
  const locomotivesQuery = useQuery({
    queryKey: QUERY_KEYS.TRAIN_SCHEDULING.locomotives(),
    queryFn: () => trainSchedulingService.getAvailableLocomotives(),
  });
  const schedulesQuery = useQuery({
    queryKey: QUERY_KEYS.TRAIN_SCHEDULING.schedules(),
    queryFn: () => trainSchedulingService.listSchedules(),
  });
  const detailQuery = useQuery({
    queryKey: QUERY_KEYS.TRAIN_SCHEDULING.scheduleById(detailId ?? ''),
    queryFn: () => trainSchedulingService.getScheduleById(detailId!),
    enabled: Boolean(detailId),
  });

  const activeRoutes = useMemo(
    () => (routesQuery.data ?? []).filter((route) => route.isActive),
    [routesQuery.data],
  );
  const selectedRoute = activeRoutes.find((route) => route.id === routeId) ?? null;
  const selectedLocomotive = (locomotivesQuery.data ?? []).find(
    (locomotive) => locomotive.id === selectedLocomotiveId,
  );

  const filteredSchedules = useMemo(() => {
    const query = scheduleSearch.trim().toLowerCase();

    return (schedulesQuery.data ?? []).filter((schedule) => {
      const matchesStatus =
        scheduleStatusFilter === 'ALL' || schedule.status === scheduleStatusFilter;

      if (!matchesStatus) {
        return false;
      }

      if (!query) {
        return true;
      }

      const haystack = [
        schedule.id,
        schedule.routeName ?? '',
        schedule.origin ?? '',
        schedule.destination ?? '',
        schedule.locomotive?.code ?? '',
        schedule.status,
      ]
        .join(' ')
        .toLowerCase();

      return haystack.includes(query);
    });
  }, [scheduleSearch, scheduleStatusFilter, schedulesQuery.data]);

  const createMutation = useMutation({
    mutationFn: () => {
      if (!routeId || !scheduleDate || !selectedLocomotiveId) {
        throw new Error('Please select route, departure date, and locomotive');
      }

      return trainSchedulingService.createSchedule({
        routeId,
        scheduleDate: new Date(`${scheduleDate}T08:00:00.000Z`).toISOString(),
        locomotiveId: selectedLocomotiveId,
      });
    },
    onSuccess: (data) => {
      toast.success('Train schedule created');
      setRouteId('');
      setScheduleDate('');
      setSelectedLocomotiveId('');
      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.ROOT });
      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.schedules() });
      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.locomotives() });
      setDetailId(data.id);
    },
    onError: (error) => {
      toast.error(parseError(error, 'Failed to create train schedule'));
    },
  });

  const cancelMutation = useMutation({
    mutationFn: (id: string) => trainSchedulingService.cancelSchedule(id),
    onSuccess: (data) => {
      toast.success('Train schedule cancelled');
      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.schedules() });
      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.locomotives() });
      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.ROOT });
      void qc.invalidateQueries({ queryKey: QUERY_KEYS.TRAIN_SCHEDULING.scheduleById(data.id) });
      setDetailId(data.id);
    },
    onError: (error) => {
      toast.error(parseError(error, 'Failed to cancel train schedule'));
    },
  });

  const detail = detailQuery.data;
  const isBusy = createMutation.isPending;

  return (
    <div className="space-y-6 p-6">
      <Breadcrumbs items={[{ label: 'Operations' }, { label: 'Train schedules' }]} />

      <section className="overflow-hidden rounded-3xl border border-border bg-card shadow-sm">
        <div className="flex flex-col gap-5 border-b border-border px-6 py-6 lg:flex-row lg:items-center lg:justify-between">
          <div className="flex items-start gap-4">
            <div className="flex size-14 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
              <TrainTrack className="size-7" />
            </div>
            <div>
              <h1 className="text-2xl font-bold tracking-tight">Train Schedules</h1>
              <p className="mt-1 text-sm text-muted-foreground">
                Create the train schedule first, reserve the locomotive, and assign bookings and wagons later.
              </p>
            </div>
          </div>
          <Button
            variant="outline"
            className="gap-2"
            onClick={() => {
              void routesQuery.refetch();
              void schedulesQuery.refetch();
              void locomotivesQuery.refetch();
            }}
          >
            <RefreshCw className="size-4" />
            Refresh
          </Button>
        </div>

        <div className="grid gap-6 p-6 xl:grid-cols-[1.1fr,1.4fr]">
          <section className="rounded-2xl border border-border bg-background/60 p-5">
            <div className="mb-4 flex items-center gap-2">
              <Calendar className="size-4 text-muted-foreground" />
              <h2 className="text-lg font-semibold">Schedule builder</h2>
            </div>

            <div className="grid gap-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Route</label>
                <Select value={routeId} onValueChange={setRouteId}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select active route" />
                  </SelectTrigger>
                  <SelectContent>
                    {activeRoutes.map((route) => (
                      <SelectItem key={route.id} value={route.id}>
                        {route.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium">Departure date</label>
                <input
                  className={inputClassName}
                  type="date"
                  value={scheduleDate}
                  onChange={(event) => setScheduleDate(event.target.value)}
                />
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium">Locomotive</label>
                <Select value={selectedLocomotiveId} onValueChange={setSelectedLocomotiveId}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select available locomotive" />
                  </SelectTrigger>
                  <SelectContent>
                    {(locomotivesQuery.data ?? []).map((locomotive) => (
                      <SelectItem key={locomotive.id} value={locomotive.id}>
                        {locomotive.code} - {locomotive.maxPullWeightTons}T / {locomotive.maxTrainLengthMeters}m
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="mt-5 grid gap-3 sm:grid-cols-2">
              <div className="rounded-xl border border-border bg-card p-4">
                <p className="text-xs uppercase tracking-wide text-muted-foreground">Origin</p>
                <p className="mt-2 text-sm font-medium">
                  {selectedRoute?.originYard?.label ?? selectedRoute?.originYard?.code ?? '-'}
                </p>
              </div>
              <div className="rounded-xl border border-border bg-card p-4">
                <p className="text-xs uppercase tracking-wide text-muted-foreground">Destination</p>
                <p className="mt-2 text-sm font-medium">
                  {selectedRoute?.destinationYard?.label ?? selectedRoute?.destinationYard?.code ?? '-'}
                </p>
              </div>
              <div className="rounded-xl border border-border bg-card p-4">
                <p className="text-xs uppercase tracking-wide text-muted-foreground">Locomotive capacity</p>
                <p className="mt-2 text-sm font-medium">
                  {selectedLocomotive
                    ? `${selectedLocomotive.maxPullWeightTons}T / ${selectedLocomotive.maxTrainLengthMeters}m`
                    : '-'}
                </p>
              </div>
              <div className="rounded-xl border border-border bg-card p-4">
                <p className="text-xs uppercase tracking-wide text-muted-foreground">Next step</p>
                <p className="mt-2 text-sm font-medium">Assign bookings, then allocate wagons</p>
              </div>
            </div>

            <div className="mt-5">
              <Button className="w-full" disabled={isBusy} onClick={() => createMutation.mutate()}>
                Create schedule
              </Button>
            </div>
          </section>

          <section className="rounded-2xl border border-border bg-background/60 p-5">
            <div className="mb-4 flex items-center justify-between">
              <div>
                <h2 className="text-lg font-semibold">Created schedules</h2>
                <p className="text-sm text-muted-foreground">
                  Open a schedule to inspect the reserved locomotive and prepare for later booking and wagon work.
                </p>
              </div>
              <span className="rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
                {filteredSchedules.length} schedules
              </span>
            </div>

            <div className="mb-4 grid gap-3 md:grid-cols-[1fr,220px]">
              <input
                className={inputClassName}
                placeholder="Search by schedule, route, locomotive, or status"
                value={scheduleSearch}
                onChange={(event) => setScheduleSearch(event.target.value)}
              />
              <Select value={scheduleStatusFilter} onValueChange={setScheduleStatusFilter}>
                <SelectTrigger>
                  <SelectValue placeholder="All statuses" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="ALL">All statuses</SelectItem>
                  <SelectItem value="DRAFT">DRAFT</SelectItem>
                  <SelectItem value="SCHEDULED">SCHEDULED</SelectItem>
                  <SelectItem value="DISPATCHED">DISPATCHED</SelectItem>
                  <SelectItem value="ARRIVED">ARRIVED</SelectItem>
                  <SelectItem value="CANCELLED">CANCELLED</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="overflow-x-auto rounded-2xl border border-border">
              <table className="min-w-full divide-y divide-border text-sm">
                <thead className="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
                  <tr>
                    <th className="px-3 py-3">Schedule</th>
                    <th className="px-3 py-3">Departure</th>
                    <th className="px-3 py-3">Route</th>
                    <th className="px-3 py-3">Locomotive</th>
                    <th className="px-3 py-3">Bookings</th>
                    <th className="px-3 py-3">Wagons</th>
                    <th className="px-3 py-3">Weight</th>
                    <th className="px-3 py-3">Length</th>
                    <th className="px-3 py-3">Status</th>
                    <th className="px-3 py-3">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border bg-card">
                  {filteredSchedules.map((schedule) => (
                    <tr key={schedule.id} className="hover:bg-muted/20">
                      <td className="px-3 py-3 font-mono text-xs">{schedule.id}</td>
                      <td className="px-3 py-3">{formatDate(schedule.scheduleDate)}</td>
                      <td className="px-3 py-3">
                        {schedule.routeName ?? `${schedule.origin ?? '-'} to ${schedule.destination ?? '-'}`}
                      </td>
                      <td className="px-3 py-3">{schedule.locomotive?.code ?? '-'}</td>
                      <td className="px-3 py-3">{schedule.bookingsCount}</td>
                      <td className="px-3 py-3">{schedule.wagonCount}</td>
                      <td className="px-3 py-3">{schedule.totalWeightTons} T</td>
                      <td className="px-3 py-3">{schedule.totalLengthMeters} m</td>
                      <td className="px-3 py-3">{schedule.status}</td>
                      <td className="px-3 py-3">
                        <div className="flex gap-2">
                          <Button variant="outline" size="sm" onClick={() => setDetailId(schedule.id)}>
                            View
                          </Button>
                          {schedule.status !== 'CANCELLED' ? (
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => cancelMutation.mutate(schedule.id)}
                            >
                              Cancel
                            </Button>
                          ) : null}
                        </div>
                      </td>
                    </tr>
                  ))}
                  {!schedulesQuery.isLoading && filteredSchedules.length === 0 ? (
                    <tr>
                      <td className="px-3 py-8 text-center text-sm text-muted-foreground" colSpan={10}>
                        No train schedules matched the current filters.
                      </td>
                    </tr>
                  ) : null}
                </tbody>
              </table>
            </div>
          </section>
        </div>
      </section>

      <Dialog open={Boolean(detailId)} onOpenChange={(open) => (!open ? setDetailId(null) : null)}>
        <DialogContent className="max-h-[90vh] max-w-5xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Train schedule detail</DialogTitle>
            <DialogDescription>
              Inspect the selected schedule. Booking assignment and wagon allocation happen after schedule creation.
            </DialogDescription>
          </DialogHeader>

          {detail ? (
            <div className="space-y-6">
              <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
                <div className="rounded-xl border border-border p-4">
                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Schedule</p>
                  <p className="mt-2 break-all font-mono text-xs">{detail.id}</p>
                </div>
                <div className="rounded-xl border border-border p-4">
                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Departure</p>
                  <p className="mt-2 text-sm font-medium">{formatDate(detail.scheduledDepartureDate)}</p>
                </div>
                <div className="rounded-xl border border-border p-4">
                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Route</p>
                  <p className="mt-2 text-sm font-medium">{detail.route?.name ?? '-'}</p>
                </div>
                <div className="rounded-xl border border-border p-4">
                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Origin / destination</p>
                  <p className="mt-2 text-sm font-medium">
                    {detail.originStation?.label ?? detail.originStation?.code ?? '-'} to{' '}
                    {detail.destinationStation?.label ?? detail.destinationStation?.code ?? '-'}
                  </p>
                </div>
                <div className="rounded-xl border border-border p-4">
                  <p className="text-xs uppercase tracking-wide text-muted-foreground">Status</p>
                  <p className="mt-2 text-sm font-medium">{detail.status}</p>
                </div>
              </div>

              <div className="rounded-2xl border border-border p-4">
                <h3 className="text-lg font-semibold">Locomotive</h3>
                <p className="mt-2 text-sm text-muted-foreground">
                  {detail.trainSet?.locomotive
                    ? `${detail.trainSet.locomotive.code} (${detail.trainSet.locomotive.maxPullWeightTons}T pull capacity / ${detail.trainSet.locomotive.maxTrainLengthMeters ?? 0}m)`
                    : 'No locomotive attached'}
                </p>
              </div>

              <div className="rounded-2xl border border-border p-4">
                <h3 className="text-lg font-semibold">Wagons and allocations</h3>
                {(detail.trainSet?.wagons?.length ?? 0) === 0 ? (
                  <p className="mt-3 text-sm text-muted-foreground">No wagons allocated yet.</p>
                ) : (
                  <div className="mt-4 space-y-4">
                    {(detail.trainSet?.wagons ?? []).map((wagon) => (
                      <div key={wagon.id} className="rounded-xl border border-border p-4">
                        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                          <div>
                            <p className="font-semibold">
                              Wagon {wagon.sequenceNo} - {wagon.wagonType?.code ?? 'NW5'}
                            </p>
                            <p className="text-sm text-muted-foreground">
                              {wagon.assignedWeightTons}T assigned / {wagon.capacityTons}T capacity / {wagon.lengthMeters}m
                            </p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              <div className="rounded-2xl border border-border p-4">
                <h3 className="text-lg font-semibold">Bookings in schedule</h3>
                {detail.bookings.length === 0 ? (
                  <p className="mt-3 text-sm text-muted-foreground">No bookings assigned yet.</p>
                ) : (
                  <div className="mt-4 overflow-x-auto rounded-xl border border-border">
                    <table className="min-w-full divide-y divide-border text-sm">
                      <thead className="bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground">
                        <tr>
                          <th className="px-3 py-2">Reference</th>
                          <th className="px-3 py-2">Customer</th>
                          <th className="px-3 py-2">Weight</th>
                          <th className="px-3 py-2">Status</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-border bg-card">
                        {detail.bookings.map((booking) => (
                          <tr key={booking.id}>
                            <td className="px-3 py-2">{booking.reference ?? booking.id}</td>
                            <td className="px-3 py-2">{booking.customer ?? '-'}</td>
                            <td className="px-3 py-2">{booking.weightTons} T</td>
                            <td className="px-3 py-2">{booking.status ?? '-'}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            </div>
          ) : (
            <p className="text-sm text-muted-foreground">Loading schedule detail...</p>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default TrainsPage;
