import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useEffect, useState, useCallback } from "react";
import { useAuth } from "@/hooks/use-auth";
import { supabase } from "@/integrations/supabase/client";
import type { TablesUpdate } from "@/integrations/supabase/types";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { toast } from "sonner";
import { ArrowLeft, CalendarPlus, Clock } from "lucide-react";
import { BookingTimeline } from "@/components/booking-timeline";

type BookingStatus = "requested" | "accepted" | "declined" | "confirmed" | "completed" | "cancelled";

type Booking = {
  id: string;
  school_id: string;
  trainer_id: string;
  trade: string;
  scheduled_at: string;
  duration_minutes: number;
  location: string | null;
  notes: string | null;
  hourly_rate: number | null;
  status: BookingStatus;
  created_at?: string | null;
  accepted_at?: string | null;
  confirmed_at?: string | null;
  completed_at?: string | null;
  cancelled_at?: string | null;
};

export const Route = createFileRoute("/_authenticated/bookings")({
  head: () => ({ meta: [{ title: "Bookings · SkillKonnect" }] }),
  component: BookingsPage,
});

const statusVariant: Record<BookingStatus, "default" | "secondary" | "destructive" | "outline"> = {
  requested: "secondary",
  accepted: "outline",
  confirmed: "default",
  completed: "default",
  declined: "destructive",
  cancelled: "destructive",
};

function BookingsPage() {
  const { user, hasRole } = useAuth();
  const navigate = useNavigate();
  const [bookings, setBookings] = useState<Booking[]>([]);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    const { data, error } = await supabase
      .from("bookings")
      .select("*")
      .order("scheduled_at", { ascending: true });
    if (error) toast.error(error.message);
    else setBookings((data as Booking[]) ?? []);
    setLoading(false);
  }, []);

  useEffect(() => {
    if (user) void load();
  }, [user, load]);

  const isSchool = hasRole("school");
  const isTrainer = hasRole("trainer");

  async function updateStatus(id: string, patch: TablesUpdate<"bookings">) {
    const { error } = await supabase.from("bookings").update(patch).eq("id", id);
    if (error) toast.error(error.message);
    else {
      toast.success("Booking updated");
      void load();
    }
  }

  const accept = (id: string) =>
    updateStatus(id, { status: "accepted", accepted_at: new Date().toISOString() });
  const decline = (id: string) => updateStatus(id, { status: "declined" });
  const confirm = (id: string) =>
    updateStatus(id, { status: "confirmed", confirmed_at: new Date().toISOString() });
  const complete = (id: string) =>
    updateStatus(id, { status: "completed", completed_at: new Date().toISOString() });
  const cancel = (id: string) =>
    updateStatus(id, { status: "cancelled", cancelled_at: new Date().toISOString() });

  const filter = (statuses: BookingStatus[]) => bookings.filter((b) => statuses.includes(b.status));

  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-30 backdrop-blur bg-background/80 border-b border-border/60">
        <div className="container-prose flex h-16 items-center justify-between">
          <Button variant="ghost" size="sm" asChild className="gap-1.5">
            <Link to="/dashboard">
              <ArrowLeft className="h-4 w-4" /> Dashboard
            </Link>
          </Button>
          {isSchool && (
            <Button size="sm" onClick={() => navigate({ to: "/bookings/new" })} className="gap-1.5">
              <CalendarPlus className="h-4 w-4" /> New booking
            </Button>
          )}
        </div>
      </header>

      <main className="container-prose py-8 space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Bookings</h1>
          <p className="text-muted-foreground mt-1">
            {isSchool && "Request, confirm, and track trainer sessions."}
            {isTrainer && "Review and accept incoming session requests."}
            {!isSchool && !isTrainer && "All bookings across the platform."}
          </p>
        </div>

        <Tabs defaultValue="active">
          <TabsList>
            <TabsTrigger value="active">Active</TabsTrigger>
            <TabsTrigger value="pending">Pending</TabsTrigger>
            <TabsTrigger value="history">History</TabsTrigger>
          </TabsList>
          <TabsContent value="active" className="mt-4 space-y-3">
            {renderList(filter(["accepted", "confirmed"]))}
          </TabsContent>
          <TabsContent value="pending" className="mt-4 space-y-3">
            {renderList(filter(["requested"]))}
          </TabsContent>
          <TabsContent value="history" className="mt-4 space-y-3">
            {renderList(filter(["completed", "declined", "cancelled"]))}
          </TabsContent>
        </Tabs>

        {loading && <p className="text-sm text-muted-foreground">Loading…</p>}
      </main>
    </div>
  );

  function renderList(items: Booking[]) {
    if (!loading && items.length === 0) {
      return <p className="text-sm text-muted-foreground">No bookings here yet.</p>;
    }
    return items.map((b) => {
      const mineAsTrainer = b.trainer_id === user?.id;
      const mineAsSchool = b.school_id === user?.id;
      return (
        <Card key={b.id} className="border-border/60">
          <CardHeader className="pb-3">
            <div className="flex items-start justify-between gap-2">
              <div>
                <CardTitle className="text-base capitalize">{b.trade}</CardTitle>
                <CardDescription className="flex items-center gap-1.5 mt-1">
                  <Clock className="h-3.5 w-3.5" />
                  {new Date(b.scheduled_at).toLocaleString()} · {b.duration_minutes} min
                </CardDescription>
              </div>
              <Badge variant={statusVariant[b.status]} className="capitalize">{b.status}</Badge>
            </div>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            {b.location && <p><span className="text-muted-foreground">School venue:</span> {b.location}</p>}
            {b.hourly_rate != null && (
              <p><span className="text-muted-foreground">Rate:</span> ₦{b.hourly_rate}/hr</p>
            )}
            {b.notes && <p className="text-muted-foreground">{b.notes}</p>}

            <div className="pt-2">
              <BookingTimeline
                booking={b}
                role={mineAsSchool ? "school" : mineAsTrainer ? "trainer" : "other"}
                actions={{
                  onAccept: mineAsTrainer ? () => accept(b.id) : undefined,
                  onDecline: mineAsTrainer ? () => decline(b.id) : undefined,
                  onConfirm: mineAsSchool ? () => confirm(b.id) : undefined,
                  onComplete: mineAsTrainer ? () => complete(b.id) : undefined,
                  onCancel:
                    (mineAsSchool || mineAsTrainer) &&
                    ["requested", "accepted", "confirmed"].includes(b.status)
                      ? () => cancel(b.id)
                      : undefined,
                }}
              />
            </div>
          </CardContent>
        </Card>
      );
    });
  }
}