import { useAuth } from "@/hooks/useAuth";
import { useQuery } from "@tanstack/react-query";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import OrderInvoiceButton from "@/components/admin/OrderInvoiceButton";
import {
  GraduationCap, ShoppingCart, Users, BarChart3, TrendingUp, BookOpen,
} from "lucide-react";
import { format, subMonths, startOfMonth, endOfMonth } from "date-fns";
import { useMemo } from "react";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";

const fmtGBP = (cents: number) =>
  `£${(cents / 100).toLocaleString("en-GB", { minimumFractionDigits: 2 })}`;

const ProviderPortalPage = () => {
  const { companyId } = useAuth();

  // Company info
  const { data: company } = useQuery({
    queryKey: ["provider-company", companyId],
    enabled: !!companyId,
    queryFn: async () => {
      const res = await fetch(`/api/training-companies/${encodeURIComponent(companyId!)}`);
      if (!res.ok) throw new Error("Failed to load company");
      const data = await res.json();
      return (data?.data ?? data) as any;
    },
  });

  // Courses assigned to this company via trainer_companies
  const { data: courses } = useQuery({
    queryKey: ["provider-courses", companyId],
    enabled: !!companyId,
    queryFn: async () => {
      const res = await fetch(`/api/training-companies/${encodeURIComponent(companyId!)}/provider-courses`);
      if (!res.ok) return [];
      const data = await res.json();
      return ((data?.data ?? data) as any[]) || [];
    },
  });

  // Orders for courses delivered by this company's trainers
  const { data: orders } = useQuery({
    queryKey: ["provider-orders", companyId],
    enabled: !!companyId,
    queryFn: async () => {
      const res = await fetch(`/api/training-companies/${encodeURIComponent(companyId!)}/provider-orders`);
      if (!res.ok) return [];
      const data = await res.json();
      return ((data?.data ?? data) as any[]) || [];
    },
  });

  // Trainers linked to company
  const { data: trainers } = useQuery({
    queryKey: ["provider-trainers", companyId],
    enabled: !!companyId,
    queryFn: async () => {
      const res = await fetch(`/api/training-companies/${encodeURIComponent(companyId!)}/provider-trainers`);
      if (!res.ok) return [];
      const data = await res.json();
      return ((data?.data ?? data) as any[]) || [];
    },
  });

  // Revenue chart data (last 6 months)
  const chartData = useMemo(() => {
    if (!orders) return [];
    const months: { month: string; revenue: number; bookings: number }[] = [];
    for (let i = 5; i >= 0; i--) {
      const d = subMonths(new Date(), i);
      const start = startOfMonth(d);
      const end = endOfMonth(d);
      const monthOrders = orders.filter((o: any) => {
        const created = new Date(o.created_at);
        return created >= start && created <= end && ["paid", "confirmed"].includes(o.status);
      });
      months.push({
        month: format(d, "MMM yy"),
        revenue: monthOrders.reduce((s: number, o: any) => s + o.price_cents, 0) / 100,
        bookings: monthOrders.length,
      });
    }
    return months;
  }, [orders]);

  const confirmedOrders = orders?.filter((o: any) => ["paid", "confirmed"].includes(o.status)) || [];
  const totalRevenue = confirmedOrders.reduce((s: number, o: any) => s + o.price_cents, 0);
  const totalDelegates = confirmedOrders.reduce((s: number, o: any) => s + o.num_delegates, 0);

  if (!companyId) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <div className="container mx-auto px-4 py-24 text-center">
          <p className="text-muted-foreground">No training company linked. Contact your administrator.</p>
        </div>
        <Footer />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <div className="container mx-auto px-4 py-24">
        <div className="mb-6 flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-foreground">{company?.name || "Provider Portal"}</h1>
            <p className="text-sm text-muted-foreground">Manage your courses, bookings, and revenue</p>
          </div>
          <a
            href="/admin/sops"
            className="inline-flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-muted"
          >
            <BookOpen className="h-4 w-4" /> User Guide
          </a>
        </div>

        {/* KPI cards */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <Card>
            <CardContent className="py-4 flex items-center gap-3">
              <GraduationCap className="h-5 w-5 text-primary" />
              <div>
                <p className="text-xl font-bold text-foreground">{courses?.length || 0}</p>
                <p className="text-xs text-muted-foreground">Courses</p>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="py-4 flex items-center gap-3">
              <ShoppingCart className="h-5 w-5 text-primary" />
              <div>
                <p className="text-xl font-bold text-foreground">{confirmedOrders.length}</p>
                <p className="text-xs text-muted-foreground">Bookings</p>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="py-4 flex items-center gap-3">
              <Users className="h-5 w-5 text-primary" />
              <div>
                <p className="text-xl font-bold text-foreground">{totalDelegates}</p>
                <p className="text-xs text-muted-foreground">Delegates Trained</p>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="py-4 flex items-center gap-3">
              <TrendingUp className="h-5 w-5 text-primary" />
              <div>
                <p className="text-xl font-bold text-foreground">{fmtGBP(totalRevenue)}</p>
                <p className="text-xs text-muted-foreground">Total Revenue</p>
              </div>
            </CardContent>
          </Card>
        </div>

        <Tabs defaultValue="courses">
          <TabsList>
            <TabsTrigger value="courses" className="gap-1.5"><GraduationCap className="h-4 w-4" /> Courses</TabsTrigger>
            <TabsTrigger value="bookings" className="gap-1.5"><ShoppingCart className="h-4 w-4" /> Bookings</TabsTrigger>
            <TabsTrigger value="trainers" className="gap-1.5"><Users className="h-4 w-4" /> Trainers</TabsTrigger>
            <TabsTrigger value="revenue" className="gap-1.5"><BarChart3 className="h-4 w-4" /> Revenue</TabsTrigger>
          </TabsList>

          {/* Courses Tab */}
          <TabsContent value="courses">
            <Card>
              <CardHeader>
                <CardTitle>Your Courses</CardTitle>
              </CardHeader>
              <CardContent className="p-0">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Title</TableHead>
                      <TableHead>Category</TableHead>
                      <TableHead>Duration</TableHead>
                      <TableHead>Price</TableHead>
                      <TableHead>Status</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {courses?.map((c: any) => (
                      <TableRow key={c.id}>
                        <TableCell className="font-medium">{c.title}</TableCell>
                        <TableCell className="text-sm text-muted-foreground">{c.category}</TableCell>
                        <TableCell>{c.days} day{c.days > 1 ? "s" : ""}</TableCell>
                        <TableCell>{fmtGBP(c.price_cents)}</TableCell>
                        <TableCell>
                          <Badge variant={c.is_active ? "default" : "secondary"}>
                            {c.is_active ? "Active" : "Inactive"}
                          </Badge>
                        </TableCell>
                      </TableRow>
                    ))}
                    {!courses?.length && (
                      <TableRow>
                        <TableCell colSpan={5} className="text-center text-muted-foreground py-8">
                          No courses assigned. Contact your administrator.
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Bookings Tab */}
          <TabsContent value="bookings">
            <Card>
              <CardHeader>
                <CardTitle>Bookings</CardTitle>
              </CardHeader>
              <CardContent className="p-0">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Date</TableHead>
                      <TableHead>Course</TableHead>
                      <TableHead>Customer</TableHead>
                      <TableHead>Delegates</TableHead>
                      <TableHead>Amount</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead className="w-[60px]">Invoice</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {orders?.map((o: any) => (
                      <TableRow key={o.id}>
                        <TableCell className="text-sm">{format(new Date(o.created_at), "dd MMM yyyy")}</TableCell>
                        <TableCell className="font-medium text-sm">{o.courses?.title || "—"}</TableCell>
                        <TableCell>
                          <div className="text-sm">{o.customer_name}</div>
                          <div className="text-xs text-muted-foreground">{o.customer_email}</div>
                        </TableCell>
                        <TableCell>{o.num_delegates}</TableCell>
                        <TableCell>{fmtGBP(o.price_cents)}</TableCell>
                        <TableCell>
                          <Badge variant={o.status === "confirmed" || o.status === "paid" ? "default" : o.status === "cancelled" ? "destructive" : "secondary"} className="capitalize">
                            {o.status}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <OrderInvoiceButton
                            order={o}
                            courseTitle={o.courses?.title}
                            companyName={company?.name}
                          />
                        </TableCell>
                      </TableRow>
                    ))}
                    {!orders?.length && (
                      <TableRow>
                        <TableCell colSpan={7} className="text-center text-muted-foreground py-8">No bookings yet.</TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Trainers Tab */}
          <TabsContent value="trainers">
            <Card>
              <CardHeader>
                <CardTitle>Your Trainers</CardTitle>
              </CardHeader>
              <CardContent className="p-0">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Name</TableHead>
                      <TableHead>Email</TableHead>
                      <TableHead>Phone</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {trainers?.map((t: any) => (
                      <TableRow key={t.id}>
                        <TableCell className="font-medium">{t.first_name} {t.last_name}</TableCell>
                        <TableCell className="text-sm text-muted-foreground">{t.email || "—"}</TableCell>
                        <TableCell className="text-sm text-muted-foreground">{t.phone || "—"}</TableCell>
                      </TableRow>
                    ))}
                    {!trainers?.length && (
                      <TableRow>
                        <TableCell colSpan={3} className="text-center text-muted-foreground py-8">No trainers assigned.</TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

          {/* Revenue Tab */}
          <TabsContent value="revenue">
            <Card>
              <CardHeader>
                <CardTitle>Revenue (Last 6 Months)</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="h-[300px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={chartData}>
                      <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
                      <XAxis dataKey="month" className="text-muted-foreground" fontSize={12} />
                      <YAxis className="text-muted-foreground" fontSize={12} tickFormatter={(v) => `£${v}`} />
                      <Tooltip
                        formatter={(value: number, name: string) =>
                          name === "revenue" ? [`£${value.toFixed(2)}`, "Revenue"] : [value, "Bookings"]
                        }
                      />
                      <Bar dataKey="revenue" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
      <Footer />
    </div>
  );
};

export default ProviderPortalPage;