import { useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { toast } from "@/hooks/use-toast";
import { Plus, Trash2, GripVertical, Search } from "lucide-react";

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

interface Props {
  companyId: string;
}

const CompanyFeaturedCoursesTab = ({ companyId }: Props) => {
  const queryClient = useQueryClient();
  const [search, setSearch] = useState("");

  const { data: featured = [] } = useQuery({
    queryKey: ["tenant-featured-courses", companyId],
    queryFn: async (): Promise<any[]> => {
      const res = await fetch(`/api/admin/companies/${companyId}/featured-courses`);
      if (!res.ok) return [];
      return res.json();
    },
  });

  const { data: allCourses = [] } = useQuery({
    queryKey: ["all-courses-for-curation", search],
    queryFn: async (): Promise<any[]> => {
      const params = new URLSearchParams({ active: "true", limit: "50" });
      if (search) params.set("search", search);
      const res = await fetch(`/api/admin/courses?${params.toString()}`);
      if (!res.ok) return [];
      return res.json();
    },
  });

  const featuredIds = new Set(featured.map((f: any) => f.course_id));

  const addMutation = useMutation({
    mutationFn: async (courseId: string) => {
      const res = await fetch(`/api/admin/companies/${companyId}/featured-courses`, {
        method: "POST",
        headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": csrfToken() },
        body: JSON.stringify({
          company_id: companyId,
          course_id: courseId,
          display_order: featured.length,
          is_featured: false,
        }),
      });
      if (!res.ok) throw new Error("Failed to add course");
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["tenant-featured-courses", companyId] });
      toast({ title: "Course added to catalogue" });
    },
  });

  const removeMutation = useMutation({
    mutationFn: async (id: string) => {
      const res = await fetch(`/api/admin/companies/${companyId}/featured-courses/${id}`, {
        method: "DELETE",
        headers: { "X-CSRF-TOKEN": csrfToken() },
      });
      if (!res.ok) throw new Error("Failed to remove course");
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["tenant-featured-courses", companyId] });
      toast({ title: "Course removed" });
    },
  });

  const toggleFeatured = useMutation({
    mutationFn: async ({ id, is_featured }: { id: string; is_featured: boolean }) => {
      const res = await fetch(`/api/admin/companies/${companyId}/featured-courses/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": csrfToken() },
        body: JSON.stringify({ is_featured }),
      });
      if (!res.ok) throw new Error("Failed to toggle featured");
    },
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["tenant-featured-courses", companyId] }),
  });

  return (
    <div className="space-y-6">
      {/* Current curated courses */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Curated Course Catalogue</CardTitle>
        </CardHeader>
        <CardContent>
          {featured.length === 0 ? (
            <p className="text-sm text-muted-foreground">No courses curated yet. Search below to add courses.</p>
          ) : (
            <div className="space-y-2">
              {featured.map((f: any) => (
                <div key={f.id} className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
                  <div className="flex items-center gap-3">
                    <GripVertical className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-sm font-medium">{f.courses?.title}</p>
                      <p className="text-xs text-muted-foreground">{f.courses?.category} · {f.courses?.days} day(s)</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="flex items-center gap-2">
                      <span className="text-xs text-muted-foreground">Homepage</span>
                      <Switch
                        checked={f.is_featured}
                        onCheckedChange={(checked) => toggleFeatured.mutate({ id: f.id, is_featured: checked })}
                      />
                    </div>
                    <Button variant="ghost" size="sm" onClick={() => removeMutation.mutate(f.id)}>
                      <Trash2 className="h-4 w-4 text-destructive" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Search and add */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Add Courses</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="relative mb-4">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search courses..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9"
            />
          </div>
          <div className="space-y-2 max-h-[400px] overflow-y-auto">
            {allCourses
              .filter((c: any) => !featuredIds.has(c.id))
              .map((c: any) => (
                <div key={c.id} className="flex items-center justify-between p-3 bg-muted/30 rounded-lg">
                  <div>
                    <p className="text-sm font-medium">{c.title}</p>
                    <p className="text-xs text-muted-foreground">
                      {c.category} · £{(c.price_cents / 100).toFixed(2)}
                    </p>
                  </div>
                  <Button size="sm" variant="outline" onClick={() => addMutation.mutate(c.id)}>
                    <Plus className="h-4 w-4 mr-1" /> Add
                  </Button>
                </div>
              ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default CompanyFeaturedCoursesTab;