import { ReactNode } from "react";
import { router } from "@inertiajs/react";
import { useQuery } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ArrowLeft, Users, ClipboardList, Star as StarIcon, Newspaper, BookOpen, Palette, Settings, Undo2, FileText } from "lucide-react";
import CompanyDetailsTab from "@/components/admin/company-detail/CompanyDetailsTab";
import { CompanyMembersTab } from "@/components/admin/company-detail/CompanyMembersTab";
import { CompanyOnboardingTab } from "@/components/admin/company-detail/CompanyOnboardingTab";
import CompanyBrandingPanel from "@/components/admin/CompanyBrandingPanel";
import CompanyFeaturedCoursesTab from "@/components/admin/company-detail/CompanyFeaturedCoursesTab";
import CompanyBlogTab from "@/components/admin/company-detail/CompanyBlogTab";
import CompanyTestimonialsTab from "@/components/admin/company-detail/CompanyTestimonialsTab";
import CompanyRefundsTab from "@/components/admin/company-detail/CompanyRefundsTab";
import CompanyInvoicesTab from "@/components/admin/company-detail/CompanyInvoicesTab";
import AdminLayout from "@/layouts/AdminLayout";

interface Props {
  id?: string;
}

const CompanyDetailPage = ({ id: idProp }: Props) => {
  const id = idProp ?? window.location.pathname.split("/").pop() ?? "";

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

  if (!id) return null;

  return (
    <div>
      <div className="flex items-center gap-3 mb-2">
        <Button variant="ghost" size="sm" onClick={() => router.visit("/admin/companies")}>
          <ArrowLeft className="h-4 w-4 mr-1" /> Back
        </Button>
        <h1 className="text-2xl font-bold text-foreground">{company?.name || "Company"}</h1>
        {company && (
          <Badge variant={company.status === "approved" ? "default" : company.status === "suspended" ? "destructive" : "secondary"} className="capitalize">
            {company.status}
          </Badge>
        )}
      </div>
      {company && (
        <p className="text-sm text-muted-foreground mb-6 ml-12">
          {company.company_type === "training_company" ? "Training Company" : "Purchasing Company"}
          {company.contact_email && ` · ${company.contact_email}`}
        </p>
      )}

      <Tabs defaultValue="details" className="space-y-4">
        <TabsList>
          <TabsTrigger value="details" className="gap-1.5">
            <Settings className="h-4 w-4" /> Details
          </TabsTrigger>
          <TabsTrigger value="delegates" className="gap-1.5">
            <Users className="h-4 w-4" /> Delegates
          </TabsTrigger>
          <TabsTrigger value="onboarding" className="gap-1.5">
            <ClipboardList className="h-4 w-4" /> Onboarding Forms
          </TabsTrigger>
          <TabsTrigger value="refunds" className="gap-1.5">
            <Undo2 className="h-4 w-4" /> Refunds
          </TabsTrigger>
          <TabsTrigger value="invoices" className="gap-1.5">
            <FileText className="h-4 w-4" /> Invoices
          </TabsTrigger>
          {(company?.company_type === "training_company" || company?.company_type === "hybrid") && (
            <>
              <TabsTrigger value="branding" className="gap-1.5">
                <Palette className="h-4 w-4" /> Branding
              </TabsTrigger>
              <TabsTrigger value="featured-courses" className="gap-1.5">
                <BookOpen className="h-4 w-4" /> Featured Courses
              </TabsTrigger>
              <TabsTrigger value="blog" className="gap-1.5">
                <Newspaper className="h-4 w-4" /> Blog / News
              </TabsTrigger>
              <TabsTrigger value="testimonials" className="gap-1.5">
                <StarIcon className="h-4 w-4" /> Testimonials
              </TabsTrigger>
            </>
          )}
        </TabsList>

        <TabsContent value="details">
          <CompanyDetailsTab companyId={id} />
        </TabsContent>

        <TabsContent value="delegates">
          <CompanyMembersTab companyId={id} />
        </TabsContent>

        <TabsContent value="onboarding">
          <CompanyOnboardingTab companyId={id} />
        </TabsContent>

        <TabsContent value="refunds">
          <CompanyRefundsTab companyId={id} />
        </TabsContent>

        <TabsContent value="invoices">
          <CompanyInvoicesTab companyId={id} paymentTermsDays={company?.payment_terms_days} />
        </TabsContent>

        {(company?.company_type === "training_company" || company?.company_type === "hybrid") && (
          <>
            <TabsContent value="branding">
              <CompanyBrandingPanel companyId={id} companyName={company.name} />
            </TabsContent>
            <TabsContent value="featured-courses">
              <CompanyFeaturedCoursesTab companyId={id} />
            </TabsContent>
            <TabsContent value="blog">
              <CompanyBlogTab companyId={id} />
            </TabsContent>
            <TabsContent value="testimonials">
              <CompanyTestimonialsTab companyId={id} />
            </TabsContent>
          </>
        )}
      </Tabs>
    </div>
  );
};

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

export default CompanyDetailPage;