import PlayzerIcon from '@/assets/playzer-favicon-512-transparent.png';
import { Button } from '@/components/ui/button';
import { DatePicker } from '@/components/ui/date-picker';
import { Input } from '@/components/ui/input';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { UserAvatar } from '@/components/user-avatar';
import { apiClient } from '@/lib/api-client';
import { useAuth } from '@/lib/auth';
import { useCurrentComplexStore } from '@/lib/stores/current-complex-store';
import { useTheme } from '@/lib/theme';
import { cn } from '@/lib/utils';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useNavigate } from '@tanstack/react-router';
import {
  CalendarDays,
  Check,
  ChevronLeft,
  ChevronRight,
  CircleDot,
  Dumbbell,
  Grid2X2,
  Laptop,
  ListChecks,
  LogOut,
  Moon,
  MoreHorizontal,
  Plus,
  Search,
  Settings,
  Sun,
  User,
  Users,
  Wrench,
} from 'lucide-react';
import type React from 'react';
import { useMemo, useState } from 'react';
import { useBooking } from '../booking-provider';
import type { BookingCourtSchedule, BookingTimelineSegment } from '../booking.types';
import { fromIsoDateLocal, toIsoDateLocal } from '../lib/booking-time';

export function BookingMobile() {
  const { schedules, isLoading, isError, errorMessage } = useBooking();
  const [selectedCourtId, setSelectedCourtId] = useState<string | null>(null);
  const [search, setSearch] = useState('');

  const selectedSchedule = useMemo(() => {
    if (!selectedCourtId) return null;
    return schedules.find((schedule) => schedule.court.id === selectedCourtId) ?? null;
  }, [schedules, selectedCourtId]);
  const filteredSchedules = useMemo(() => {
    const query = search.trim().toLowerCase();
    if (!query) return schedules;

    return schedules.filter((schedule) => {
      return (
        schedule.court.name.toLowerCase().includes(query) ||
        schedule.court.sport.name.toLowerCase().includes(query)
      );
    });
  }, [schedules, search]);

  if (selectedSchedule) {
    return <MobileCourtDay schedule={selectedSchedule} onBack={() => setSelectedCourtId(null)} />;
  }

  return (
    <div className="min-h-dvh pb-24">
      <MobileTopBar />
      <div className="space-y-6 px-3 pt-5">
        <MobilePanelHeader />
        <MobileFilters />
        <MobileSummary />

        <section className="space-y-4">
          <h2 className="text-xl font-semibold tracking-normal">Canchas</h2>
          <div className="relative">
            <Search className="pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-muted-foreground" />
            <Input
              className="h-12 rounded-lg border-border/70 bg-card/75 pl-11 text-sm shadow-sm"
              placeholder="Buscar cancha..."
              value={search}
              onChange={(event) => setSearch(event.target.value)}
            />
          </div>

          {isLoading && (
            <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-muted-foreground">
              Cargando reservas...
            </div>
          )}

          {isError && !isLoading && (
            <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-destructive">
              {errorMessage}
            </div>
          )}

          {!isLoading && !isError && filteredSchedules.length === 0 && (
            <div className="rounded-lg border bg-card/75 px-4 py-8 text-sm text-muted-foreground">
              No hay canchas para los filtros seleccionados.
            </div>
          )}

          {!isLoading &&
            !isError &&
            filteredSchedules.map((schedule) => (
              <MobileCourtCard
                key={schedule.court.id}
                schedule={schedule}
                onOpen={() => setSelectedCourtId(schedule.court.id)}
              />
            ))}
        </section>
      </div>
      <MobileBottomNav active="panel" />
    </div>
  );
}

function MobileTopBar() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { user, isAuthenticated, displayName, avatarUrl, signOut } = useAuth();
  const { currentComplexSlug, setCurrentComplex } = useCurrentComplexStore();
  const { theme, setTheme } = useTheme();
  const { openCreateBooking } = useBooking();
  const [open, setOpen] = useState(false);

  const myComplexesQuery = useQuery({
    queryKey: ['my-complexes'],
    enabled: isAuthenticated,
    queryFn: () => apiClient.complexes.listMine(),
  });

  const complexSlug = currentComplexSlug || myComplexesQuery.data?.[0]?.complexSlug;
  const currentComplexName = useMemo(() => {
    const complexes = myComplexesQuery.data ?? [];
    if (complexes.length === 0) return 'Mi complejo';

    const selected = complexes.find((complex) => complex.complexSlug === complexSlug);
    return selected?.complexName ?? complexes[0]?.complexName ?? 'Mi complejo';
  }, [complexSlug, myComplexesQuery.data]);

  const handleSelectComplex = async (complexId: string, nextSlug: string) => {
    await apiClient.complexes.select({ complexId });
    setCurrentComplex(nextSlug);
    await queryClient.invalidateQueries({ queryKey: ['current-complex'] });
    await queryClient.invalidateQueries({ queryKey: ['admin-bookings'] });
  };

  const handleSignOut = async () => {
    setOpen(false);
    await signOut();
    await navigate({ to: '/login' });
  };

  return (
    <header className="sticky top-0 z-30 border-b border-border/70 bg-background/85 px-3 py-4 backdrop-blur-xl">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2.5">
          <img src={PlayzerIcon} alt="Playzer" className="size-9" />
          <span className="text-xl font-bold text-primary">Playzer</span>
        </div>
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetTrigger asChild>
            <button
              type="button"
              className="rounded-full ring-2 ring-transparent transition hover:ring-primary/30 focus:outline-none focus-visible:ring-primary/60"
              aria-label="Abrir menú de usuario"
            >
              <UserAvatar
                src={avatarUrl}
                alt={displayName}
                fallbackText={displayName}
                className="size-10 border border-primary/30"
              />
            </button>
          </SheetTrigger>
          <SheetContent
            side="right"
            className="w-[88vw] border-border/70 bg-background/95 p-5 backdrop-blur-xl sm:max-w-sm"
          >
            <div className="mt-6 flex flex-col gap-6">
              <div className="rounded-lg border border-border/70 bg-card/70 p-4 shadow-xl shadow-black/10">
                <div className="flex items-center gap-3">
                  <UserAvatar
                    src={avatarUrl}
                    alt={displayName}
                    fallbackText={displayName}
                    className="size-11"
                  />
                  <div className="min-w-0">
                    <p className="truncate text-sm font-medium">{displayName}</p>
                    <p className="truncate text-xs text-muted-foreground">{user?.email}</p>
                    <p className="truncate text-xs text-muted-foreground">{currentComplexName}</p>
                  </div>
                </div>
              </div>

              <nav className="flex flex-col gap-1">
                <Button
                  variant="ghost"
                  className="justify-start rounded-lg"
                  onClick={() => {
                    setOpen(false);
                    void navigate({ to: '/' });
                  }}
                >
                  Inicio
                </Button>
                <Button
                  variant="ghost"
                  className="justify-start rounded-lg"
                  onClick={() => {
                    setOpen(false);
                    void navigate({ to: '/about' });
                  }}
                >
                  About
                </Button>
              </nav>

              <Button
                className="rounded-lg shadow-lg shadow-primary/20"
                onClick={() => {
                  setOpen(false);
                  openCreateBooking();
                }}
              >
                <CalendarDays className="mr-2 size-4" />
                Reservar ahora
              </Button>

              <div className="border-t border-border/70 pt-4">
                <div className="mb-2 px-2">
                  <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
                    Cuenta
                  </p>
                </div>

                <nav className="flex flex-col gap-1">
                  <div className="py-1">
                    <p className="px-3 py-1 text-xs text-muted-foreground">Apariencia</p>
                    {[
                      { value: 'light', label: 'Light', icon: Sun },
                      { value: 'dark', label: 'Dark', icon: Moon },
                      { value: 'system', label: 'System', icon: Laptop },
                    ].map((item) => {
                      const Icon = item.icon;

                      return (
                        <Button
                          key={item.value}
                          variant="ghost"
                          className="w-full justify-start rounded-lg"
                          onClick={() => setTheme(item.value as 'light' | 'dark' | 'system')}
                        >
                          <span className="mr-2 flex size-4 items-center justify-center">
                            {theme === item.value ? (
                              <Check className="size-4" />
                            ) : (
                              <Icon className="size-4" />
                            )}
                          </span>
                          {item.label}
                        </Button>
                      );
                    })}
                  </div>

                  {myComplexesQuery.data && myComplexesQuery.data.length > 1 && (
                    <div className="py-1">
                      <p className="px-3 py-1 text-xs text-muted-foreground">Cambiar complejo</p>
                      {myComplexesQuery.data.map((complex) => (
                        <Button
                          key={complex.id}
                          variant="ghost"
                          className="w-full justify-start rounded-lg"
                          onClick={() => {
                            setOpen(false);
                            void handleSelectComplex(complex.id, complex.complexSlug);
                          }}
                        >
                          <span className="mr-2 flex size-4 items-center justify-center">
                            {complex.complexSlug === complexSlug && <Check className="size-4" />}
                          </span>
                          {complex.complexName}
                        </Button>
                      ))}
                    </div>
                  )}

                  <Button
                    variant="ghost"
                    className="justify-start rounded-lg"
                    onClick={() => {
                      setOpen(false);
                      void navigate({ to: '/profile' });
                    }}
                  >
                    <User className="mr-2 size-4" />
                    Mi Perfil
                  </Button>

                  {currentComplexSlug && (
                    <Button
                      variant="ghost"
                      className="justify-start rounded-lg"
                      onClick={() => {
                        setOpen(false);
                        void navigate({
                          to: '/complex/$slug/edit',
                          params: { slug: currentComplexSlug },
                        });
                      }}
                    >
                      <Settings className="mr-2 size-4" />
                      Configuración
                    </Button>
                  )}

                  <Button
                    variant="ghost"
                    className="justify-start rounded-lg text-destructive hover:bg-destructive/10 hover:text-destructive"
                    onClick={() => {
                      void handleSignOut();
                    }}
                  >
                    <LogOut className="mr-2 size-4" />
                    Cerrar sesión
                  </Button>
                </nav>
              </div>
            </div>
          </SheetContent>
        </Sheet>
      </div>
    </header>
  );
}

function MobilePanelHeader() {
  const { complex, openCreateBooking } = useBooking();

  return (
    <section className="flex items-start justify-between gap-4">
      <div className="min-w-0">
        <h1 className="text-2xl font-semibold tracking-normal">Panel de Reservas</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          Gestiona las canchas de {complex.complexName}
        </p>
      </div>
      <Button
        type="button"
        className="h-11 shrink-0 rounded-lg px-3 shadow-lg shadow-primary/20"
        onClick={() => openCreateBooking()}
      >
        <CalendarDays className="size-4" />
        Nueva Reserva
      </Button>
    </section>
  );
}

function MobileFilters() {
  const { selectedDate, setSelectedDate } = useBooking();

  return (
    <div>
      <DatePicker
        value={fromIsoDateLocal(selectedDate)}
        onChange={(date) =>
          setSelectedDate(date ? toIsoDateLocal(date) : toIsoDateLocal(new Date()))
        }
        className="h-12 w-full justify-center rounded-lg border-border/70 bg-card/75 px-4 text-sm font-medium"
        placeholder="Fecha"
      />
    </div>
  );
}

function MobileSummary() {
  const { summary } = useBooking();

  return (
    <section className="rounded-lg border border-border/70 bg-card/70 p-4 shadow-sm">
      <h2 className="text-lg font-medium">Resumen del día</h2>
      <div className="mt-3 grid grid-cols-3 gap-2">
        <SummaryPill
          value={summary.freeSlots}
          label="Libres"
          className="bg-primary/15 text-primary"
        />
        <SummaryPill
          value={summary.reservedSlots}
          label="Reservados"
          className="bg-reserved/15 text-reserved"
        />
        <SummaryPill
          value={summary.maintenanceSlots}
          label="Mantenim."
          className="bg-maintenance/15 text-maintenance"
        />
      </div>
    </section>
  );
}

function SummaryPill({
  value,
  label,
  className,
}: {
  value: number;
  label: string;
  className: string;
}) {
  return (
    <div className={cn('rounded-lg px-2 py-2.5', className)}>
      <p className="text-2xl font-semibold leading-none">{value}</p>
      <p className="mt-2 truncate text-xs">{label}</p>
    </div>
  );
}

function MobileCourtCard({
  schedule,
  onOpen,
}: {
  schedule: BookingCourtSchedule;
  onOpen: () => void;
}) {
  const nextSegments = schedule.segments.slice(0, 5);

  return (
    <article className="rounded-lg border border-border/70 bg-card/75 p-4 shadow-sm">
      <div className="flex items-start gap-3">
        <SportIcon sportName={schedule.court.sport.name} />
        <div className="min-w-0 flex-1">
          <div className="flex items-start justify-between gap-3">
            <div>
              <h3 className="text-lg font-semibold">{schedule.court.name}</h3>
              <p className="text-sm text-muted-foreground">{schedule.court.sport.name}</p>
            </div>
            <MetricDots schedule={schedule} />
          </div>
        </div>
      </div>

      <p className="mt-5 text-sm text-muted-foreground">Próximos horarios</p>
      <div className="mt-2 grid grid-cols-5 gap-2">
        {nextSegments.map((segment) => (
          <MiniSlot key={segment.id} schedule={schedule} segment={segment} />
        ))}
      </div>

      <Button
        type="button"
        variant="outline"
        className="mt-5 h-12 w-full justify-between rounded-lg border-border/70 bg-secondary/55 px-4 text-base"
        onClick={onOpen}
      >
        <span className="flex-1 text-center">Ver día completo</span>
        <ChevronRight className="size-5 text-muted-foreground" />
      </Button>
    </article>
  );
}

function MobileCourtDay({
  schedule,
  onBack,
}: { schedule: BookingCourtSchedule; onBack: () => void }) {
  const { selectedDate, moveSelectedDate, setSelectedDate, openCreateBooking } = useBooking();

  return (
    <div className="min-h-dvh pb-24">
      <header className="sticky top-0 z-30 border-b border-border/70 bg-background/90 px-3 py-4 backdrop-blur-xl">
        <div className="flex items-center justify-between gap-3">
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="rounded-full"
            onClick={onBack}
          >
            <ChevronLeft className="size-6" />
          </Button>
          <div className="min-w-0 flex-1">
            <h1 className="truncate text-xl font-semibold">{schedule.court.name}</h1>
            <p className="text-sm text-muted-foreground">{schedule.court.sport.name}</p>
          </div>
          <Button type="button" variant="ghost" size="icon" className="rounded-full">
            <MoreHorizontal className="size-5" />
          </Button>
        </div>

        <div className="mt-5 grid grid-cols-[52px_1fr_52px] gap-3">
          <Button
            type="button"
            variant="outline"
            className="h-12 rounded-lg"
            onClick={() => moveSelectedDate(-1)}
          >
            <ChevronLeft className="size-5" />
          </Button>
          <DatePicker
            value={fromIsoDateLocal(selectedDate)}
            onChange={(date) =>
              setSelectedDate(date ? toIsoDateLocal(date) : toIsoDateLocal(new Date()))
            }
            className="h-12 rounded-lg border-border/70 bg-card/75 text-sm"
          />
          <Button
            type="button"
            variant="outline"
            className="h-12 rounded-lg"
            onClick={() => moveSelectedDate(1)}
          >
            <ChevronRight className="size-5" />
          </Button>
        </div>
      </header>

      <main className="space-y-4 px-3 pt-4">
        <section className="rounded-lg border border-border/70 bg-card/70 p-4">
          <StatusLegend />
        </section>

        <section className="overflow-hidden rounded-lg border border-border/70 bg-card/75">
          {schedule.segments.map((segment) => (
            <MobileSegmentRow key={segment.id} schedule={schedule} segment={segment} />
          ))}
        </section>
      </main>

      <div className="fixed inset-x-0 bottom-0 z-40 border-t border-border/70 bg-background/90 p-3 backdrop-blur-xl">
        <Button
          type="button"
          className="h-14 w-full rounded-lg text-base shadow-lg shadow-primary/25"
          onClick={() =>
            openCreateBooking({ courtId: schedule.court.id, sportId: schedule.court.sportId })
          }
        >
          <Plus className="size-5" />
          Nueva Reserva
        </Button>
      </div>
    </div>
  );
}

function MobileSegmentRow({
  schedule,
  segment,
}: {
  schedule: BookingCourtSchedule;
  segment: BookingTimelineSegment;
}) {
  const { openCreateBooking, openBookingTools } = useBooking();
  const isFree = segment.status === 'free';

  return (
    <button
      type="button"
      className="grid min-h-[104px] w-full grid-cols-[1fr_auto] items-center gap-4 border-b border-border/70 px-5 py-4 text-left last:border-b-0"
      onClick={() => {
        if (isFree) {
          openCreateBooking({
            courtId: schedule.court.id,
            sportId: schedule.court.sportId,
            startTime: segment.startTime,
          });
          return;
        }
        openBookingTools(segment);
      }}
    >
      <div className="min-w-0">
        <p className="text-xl font-medium">
          {segment.startTime} - {segment.endTime}
        </p>
        <SegmentStatusLine segment={segment} />
      </div>

      {isFree ? (
        <span className="rounded-lg border border-primary/70 px-4 py-3 font-medium text-primary">
          Reservar
        </span>
      ) : (
        <div className="max-w-[132px] text-right">
          <p className="truncate text-sm font-medium">
            {segment.booking?.customerName ?? 'Mantenimiento'}
          </p>
          <p className="mt-2 inline-flex items-center gap-1 text-sm text-muted-foreground">
            {segment.status === 'maintenance' ? (
              <Wrench className="size-4" />
            ) : (
              <Users className="size-4" />
            )}
            {segment.booking?.customerPhone ?? 'Personal'}
          </p>
        </div>
      )}
    </button>
  );
}

function SegmentStatusLine({ segment }: { segment: BookingTimelineSegment }) {
  const status = segment.status;
  const label = status === 'free' ? 'Libre' : status === 'reserved' ? 'Reservado' : 'Mantenimiento';

  return (
    <p
      className={cn(
        'mt-2 inline-flex items-center gap-2 text-sm',
        status === 'free' && 'text-primary',
        status === 'reserved' && 'text-reserved',
        status === 'maintenance' && 'text-maintenance'
      )}
    >
      <span
        className={cn(
          'size-3 rounded-full',
          status === 'free' && 'bg-primary',
          status === 'reserved' && 'bg-reserved',
          status === 'maintenance' && 'bg-maintenance'
        )}
      />
      {label}
    </p>
  );
}

function StatusLegend() {
  return (
    <div className="flex items-center justify-between gap-3 text-sm">
      <LegendItem label="Libre" className="bg-primary" />
      <LegendItem label="Reservado" className="bg-reserved" />
      <LegendItem label="Mantenimiento" className="bg-maintenance" />
    </div>
  );
}

function LegendItem({ label, className }: { label: string; className: string }) {
  return (
    <span className="inline-flex items-center gap-2">
      <span className={cn('size-3 rounded-full', className)} />
      {label}
    </span>
  );
}

function MiniSlot({
  schedule,
  segment,
}: {
  schedule: BookingCourtSchedule;
  segment: BookingTimelineSegment;
}) {
  const { openCreateBooking, openBookingTools } = useBooking();
  const label =
    segment.status === 'free' ? 'Libre' : segment.status === 'reserved' ? 'Reservado' : 'Manten.';
  const isActionable = segment.status === 'free' || Boolean(segment.booking);

  return (
    <button
      type="button"
      className={cn(
        'min-w-0 rounded-lg border px-1.5 py-2 text-center transition active:scale-[0.98] disabled:opacity-60',
        segment.status === 'free' && 'border-primary/50 bg-primary/15 text-primary',
        segment.status === 'reserved' && 'border-reserved/50 bg-reserved/15 text-reserved',
        segment.status === 'maintenance' &&
          'border-maintenance/50 bg-maintenance/15 text-maintenance'
      )}
      disabled={!isActionable}
      onClick={() => {
        if (segment.status === 'free') {
          openCreateBooking({
            courtId: schedule.court.id,
            sportId: schedule.court.sportId,
            startTime: segment.startTime,
          });
          return;
        }

        if (segment.booking) {
          openBookingTools(segment);
        }
      }}
    >
      <p className="truncate text-sm font-medium">{segment.startTime}</p>
      <p className="mt-1 truncate text-[11px]">{label}</p>
    </button>
  );
}

function SportIcon({ sportName }: { sportName: string }) {
  const isPadel = sportName.toLowerCase().includes('padel');

  return (
    <div
      className={cn(
        'flex size-14 shrink-0 items-center justify-center rounded-lg border text-white',
        isPadel ? 'border-violet-400/40 bg-violet-500/30' : 'border-primary/40 bg-primary/25'
      )}
    >
      {isPadel ? <CircleDot className="size-7" /> : <Dumbbell className="size-7" />}
    </div>
  );
}

function MetricDots({ schedule }: { schedule: BookingCourtSchedule }) {
  return (
    <div className="flex shrink-0 items-center gap-2 text-sm font-medium">
      <span className="inline-flex items-center gap-1 text-primary">
        <span className="size-3 rounded-full bg-primary" />
        {schedule.metrics.free}
      </span>
      <span className="inline-flex items-center gap-1 text-reserved">
        <span className="size-3 rounded-full bg-reserved" />
        {schedule.metrics.reserved}
      </span>
      <span className="inline-flex items-center gap-1 text-maintenance">
        <span className="size-3 rounded-full bg-maintenance" />
        {schedule.metrics.maintenance}
      </span>
    </div>
  );
}

function MobileBottomNav({ active }: { active: 'panel' | 'status' | 'bookings' | 'more' }) {
  return (
    <nav className="fixed inset-x-0 bottom-0 z-40 grid grid-cols-4 border-t border-border/70 bg-background/90 px-2 pb-3 pt-2 backdrop-blur-xl">
      <BottomNavItem
        active={active === 'panel'}
        icon={<Grid2X2 className="size-5" />}
        label="Panel"
      />
      <BottomNavItem
        active={active === 'status'}
        icon={<ListChecks className="size-5" />}
        label="Estado"
      />
      <BottomNavItem
        active={active === 'bookings'}
        icon={<CalendarDays className="size-5" />}
        label="Reservas"
      />
      <BottomNavItem
        active={active === 'more'}
        icon={<MoreHorizontal className="size-5" />}
        label="Más"
      />
    </nav>
  );
}

function BottomNavItem({
  active,
  icon,
  label,
}: { active: boolean; icon: React.ReactNode; label: string }) {
  return (
    <button
      type="button"
      className={cn(
        'flex flex-col items-center gap-1 rounded-lg px-2 py-1.5 text-xs text-muted-foreground',
        active && 'text-primary'
      )}
    >
      {icon}
      <span>{label}</span>
    </button>
  );
}