import { ReactNode, useState } from "react";
import { router } from "@inertiajs/react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";
import { Plus, Pencil, Trash2, Video, RefreshCw } from "lucide-react";
import AdminLayout from "@/layouts/AdminLayout";
import VideoTileCoursePicker from "@/components/admin/VideoTileCoursePicker";

const csrfToken = () => (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';

const formatDate = (s: string | null) => {
  if (!s) return "—";
  const d = new Date(s);
  if (Number.isNaN(d.getTime())) return s;
  return d.toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" })
    + " " + d.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
};

const StatusBadge = ({ status }: { status: string }) => {
  const variant =
    status === "completed" ? "default" :
    status === "in_progress" ? "secondary" :
    status === "expired" ? "destructive" : "outline";
  return <Badge variant={variant as any}>{status.replace("_", " ")}</Badge>;
};

const ELearning = () => {
  const queryClient = useQueryClient();
  const [pickerOpen, setPickerOpen] = useState(false);

  const { data: courses, isLoading } = useQuery({
    queryKey: ["admin-elearning-courses"],
    queryFn: async () => {
      const res = await fetch("/api/admin/courses?category=E-Learning");
      if (!res.ok) return [];
      return res.json();
    },
  });

  const { data: enrolments, isLoading: enrolmentsLoading } = useQuery({
    queryKey: ["admin-elearning-enrolments"],
    queryFn: async () => {
      const res = await fetch("/api/admin/elearning/enrolments");
      if (!res.ok) return [];
      return res.json();
    },
  });

  const deleteMutation = useMutation({
    mutationFn: async (id: string) => {
      const res = await fetch(`/api/admin/courses/${id}`, {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() },
      });
      if (!res.ok) throw new Error('Failed to delete course');
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["admin-elearning-courses"] });
      toast.success("E-Learning course deleted");
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const syncMutation = useMutation({
    mutationFn: async (userId: string) => {
      const res = await fetch(`/api/admin/elearning/sync-user`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() },
        body: JSON.stringify({ user_id: userId }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body?.error || `Sync failed (HTTP ${res.status})`);
      }
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["admin-elearning-enrolments"] });
      toast.success("Synced from VideoTile");
    },
    onError: (e: Error) => toast.error(e.message),
  });

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-foreground">E-Learning</h1>
          <p className="text-sm text-muted-foreground mt-1">
            VideoTile-hosted courses and live delegate progress
          </p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={() => setPickerOpen(true)}>
            <Video className="mr-2 h-4 w-4" /> Add VideoTile Course
          </Button>
          <Button variant="hero" onClick={() => router.visit("/admin/courses/new?category=E-Learning")}>
            <Plus className="mr-2 h-4 w-4" /> Add E-Learning Course
          </Button>
        </div>
      </div>
      <VideoTileCoursePicker open={pickerOpen} onOpenChange={setPickerOpen} />

      <Tabs defaultValue="courses">
        <TabsList className="mb-4">
          <TabsTrigger value="courses">Courses ({courses?.length ?? 0})</TabsTrigger>
          <TabsTrigger value="enrolments">Enrolments ({enrolments?.length ?? 0})</TabsTrigger>
        </TabsList>

        <TabsContent value="courses">
          {isLoading ? (
            <p className="text-muted-foreground">Loading e-learning courses...</p>
          ) : (
            <div className="bg-card border border-border rounded-xl overflow-hidden">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Title</TableHead>
                    <TableHead>Source</TableHead>
                    <TableHead>Duration</TableHead>
                    <TableHead>Price</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead className="w-[100px]">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {courses?.map((c: any) => (
                    <TableRow key={c.id}>
                      <TableCell className="font-medium">{c.title}</TableCell>
                      <TableCell>
                        {c.videotile_course_id ? (
                          <Badge variant="secondary" className="gap-1">
                            <Video className="w-3 h-3" /> VideoTile #{c.videotile_course_id}
                          </Badge>
                        ) : (
                          <span className="text-xs text-muted-foreground">Local</span>
                        )}
                      </TableCell>
                      <TableCell>
                        {c.videotile_course_id
                          ? (c.duration_minutes ? `${c.duration_minutes} min` : "—")
                          : `${c.days} day${c.days === 1 ? "" : "s"}`}
                      </TableCell>
                      <TableCell>£{(c.price_cents / 100).toFixed(2)}</TableCell>
                      <TableCell>
                        <Badge variant={c.is_active ? "default" : "secondary"}>
                          {c.is_active ? "Active" : "Inactive"}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <div className="flex gap-1">
                          <Button variant="ghost" size="sm" onClick={() => router.visit(`/admin/courses/${c.id}/edit`)}>
                            <Pencil className="h-3 w-3" />
                          </Button>
                          <Button variant="ghost" size="sm" onClick={() => deleteMutation.mutate(c.id)}>
                            <Trash2 className="h-3 w-3 text-destructive" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                  {courses?.length === 0 && (
                    <TableRow>
                      <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
                        No e-learning courses found.
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </div>
          )}
        </TabsContent>

        <TabsContent value="enrolments">
          {enrolmentsLoading ? (
            <p className="text-muted-foreground">Loading enrolments...</p>
          ) : (
            <div className="bg-card border border-border rounded-xl overflow-hidden">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Delegate</TableHead>
                    <TableHead>Course</TableHead>
                    <TableHead>Progress</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Last synced</TableHead>
                    <TableHead>Launches</TableHead>
                    <TableHead className="w-[80px]">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {enrolments?.map((e: any) => (
                    <TableRow key={e.id}>
                      <TableCell>
                        <div className="font-medium text-sm">{e.user_name || e.user_email}</div>
                        <div className="text-xs text-muted-foreground">{e.user_email}</div>
                      </TableCell>
                      <TableCell className="text-sm">{e.course_title}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2 w-32">
                          <Progress value={e.progress_percent} className="h-1.5 flex-1" />
                          <span className="text-xs text-muted-foreground w-8 text-right">{e.progress_percent}%</span>
                        </div>
                      </TableCell>
                      <TableCell><StatusBadge status={e.status} /></TableCell>
                      <TableCell className="text-xs text-muted-foreground">{formatDate(e.last_synced_at)}</TableCell>
                      <TableCell className="text-xs">{e.launch_count ?? 0}</TableCell>
                      <TableCell>
                        <Button
                          variant="ghost"
                          size="sm"
                          disabled={syncMutation.isPending}
                          onClick={() => syncMutation.mutate(e.user_id)}
                          title="Sync now from VideoTile"
                        >
                          <RefreshCw className={`h-3 w-3 ${syncMutation.isPending ? "animate-spin" : ""}`} />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                  {enrolments?.length === 0 && (
                    <TableRow>
                      <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
                        No enrolments yet.
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
};

ELearning.layout = (page: ReactNode) => <AdminLayout>{page}</AdminLayout>;

export default ELearning;