import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { useCompany } from "../context/CompanyContext";
import { DiagramGeneratePanel } from "../components/DiagramGeneratePanel";
import { IconGeneratePanel } from "../components/IconGeneratePanel";
import { WallpaperGeneratePanel } from "../components/WallpaperGeneratePanel";
import { SocialPostPanel } from "../components/SocialPostPanel";
import { DocumentGeneratePanel } from "../components/DocumentGeneratePanel";
import { BrandKitPanel } from "../components/BrandKitPanel";
import { PresentationPanel } from "../components/PresentationPanel";
import { ThemeSeedInput } from "../components/ThemeSeedInput";
import { ThemePaletteGrid, type PaletteRole } from "../components/ThemePaletteGrid";
import { ThemePreviewPanel } from "../components/ThemePreviewPanel";
import { ThemeExportTabs } from "../components/ThemeExportTabs";
import { ThemeApplyConfirmDialog } from "../components/ThemeApplyConfirmDialog";
import { useContentJob } from "../hooks/useContentJob";
import { useState, useEffect } from "react";

export function ContentStudio() {
  const { selectedCompanyId } = useCompany();
  const companyId = selectedCompanyId ?? "";
  const themeJob = useContentJob(companyId);
  const [showApplyDialog, setShowApplyDialog] = useState(false);
  const [seedColor, setSeedColor] = useState("var(--primary)");
  const [themeBundle, setThemeBundle] = useState<{
    palette: PaletteRole[];
    exports: { css: string; tailwind: string; vscode: string; json: string };
  } | null>(null);

  useEffect(() => {
    if (themeJob.status === "done" && themeJob.resultAssetId && companyId) {
      fetch(`/api/companies/${companyId}/assets/${themeJob.resultAssetId}`)
        .then((r) => r.json())
        .then((data) => setThemeBundle(data as typeof themeBundle))
        .catch(() => {});
    }
  }, [themeJob.status, themeJob.resultAssetId, companyId]);

  return (
    <div className="flex flex-col gap-6 p-6">
      <h1 className="text-xl font-semibold">Content Studio</h1>

      <Tabs defaultValue="diagrams" className="w-full">
        <TabsList>
          <TabsTrigger value="diagrams">Diagrams</TabsTrigger>
          <TabsTrigger value="icons">Icons</TabsTrigger>
          <TabsTrigger value="themes">Themes</TabsTrigger>
          <TabsTrigger value="wallpapers">Wallpapers</TabsTrigger>
          <TabsTrigger value="social">Social</TabsTrigger>
          <TabsTrigger value="documents">Documents</TabsTrigger>
          <TabsTrigger value="brand">Brand</TabsTrigger>
          <TabsTrigger value="presentations">Presentations</TabsTrigger>
        </TabsList>

        <TabsContent value="diagrams" className="mt-4">
          {companyId ? (
            <DiagramGeneratePanel companyId={companyId} />
          ) : (
            <p className="text-sm text-muted-foreground">Select a company to get started.</p>
          )}
        </TabsContent>

        <TabsContent value="icons" className="mt-4">
          {companyId ? (
            <IconGeneratePanel companyId={companyId} />
          ) : (
            <p className="text-sm text-muted-foreground">Select a company to get started.</p>
          )}
        </TabsContent>

        <TabsContent value="themes" className="mt-4">
          {companyId ? (
            <div className="flex flex-col gap-6">
              <ThemeSeedInput
                value={seedColor}
                onChange={setSeedColor}
              />
              <button
                className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
                disabled={themeJob.status === "running" || themeJob.status === "queued"}
                onClick={() => {
                  setThemeBundle(null);
                  themeJob.submit("theme-palette", { seedColor });
                }}
              >
                {themeJob.status === "running" || themeJob.status === "queued" ? "Generating..." : "Generate Palette"}
              </button>
              {themeBundle && (
                <>
                  <ThemePaletteGrid palette={themeBundle.palette} />
                  <ThemePreviewPanel palette={themeBundle.palette} variant="light" />
                  <ThemeExportTabs exports={themeBundle.exports} />
                  <button
                    className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
                    onClick={() => setShowApplyDialog(true)}
                  >
                    Apply to Nexus
                  </button>
                  <ThemeApplyConfirmDialog
                    open={showApplyDialog}
                    onConfirm={() => {
                      setShowApplyDialog(false);
                    }}
                    onCancel={() => setShowApplyDialog(false)}
                  />
                </>
              )}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground">Select a company to get started.</p>
          )}
        </TabsContent>

        <TabsContent value="wallpapers" className="mt-4">
          {companyId ? (
            <WallpaperGeneratePanel companyId={companyId} />
          ) : (
            <p className="text-sm text-muted-foreground">Select a company to get started.</p>
          )}
        </TabsContent>

        <TabsContent value="social" className="mt-4">
          {companyId ? (
            <SocialPostPanel companyId={companyId} />
          ) : (
            <p className="text-sm text-muted-foreground">Select a company to get started.</p>
          )}
        </TabsContent>

        <TabsContent value="documents" className="mt-4">
          {companyId ? (
            <DocumentGeneratePanel companyId={companyId} />
          ) : (
            <p className="text-sm text-muted-foreground">Select a company to get started.</p>
          )}
        </TabsContent>

        <TabsContent value="brand" className="mt-4">
          {companyId ? (
            <BrandKitPanel companyId={companyId} />
          ) : (
            <p className="text-sm text-muted-foreground">Select a company to get started.</p>
          )}
        </TabsContent>

        <TabsContent value="presentations" className="mt-4">
          {companyId ? (
            <PresentationPanel companyId={companyId} />
          ) : (
            <p className="text-sm text-muted-foreground">Select a company to get started.</p>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}
