import { useMemo, type ComponentType } from "react";
import { ArrowLeft, Save, Download, MessageCircle } from "lucide-react";
import { useNavigate, useLocation } from "@/lib/router";
import { useCompany } from "../context/CompanyContext";
import { cn } from "@/lib/utils";
import { findWorkshop, type WorkshopDefinition } from "../components/studio/workshops";
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 { ConvertPanel } from "../components/ConvertPanel";
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 { useEffect, useState } from "react";

interface StudioWorkshopDetailProps {
  /**
   * Workshop slug. Normally parsed from `/content-studio/:workshopSlug`.
   * Phase 10 feeds this in from ContentStudio (which path-matches location,
   * because App.tsx does not yet define the sub-route — see plan for
   * routing-request to the controller).
   */
  slug: string;
}

/**
 * Phase 10 — Studio workshop detail view.
 *
 * Spec (§6.4): two-column layout on desktop. Left column = parameters
 * panel (holds the existing generator component). Right column = preview
 * area with an action bar at the bottom (Save / Export / Send to Assistant).
 *
 * For Phase 10 the existing generator panels already render their own
 * side-by-side inputs + preview, so we hand the whole generator to the
 * left column and show the action bar underneath. Phase 14 (recipe-aware
 * flow) will split generators into explicit params and preview halves.
 */
export function StudioWorkshopDetail({ slug }: StudioWorkshopDetailProps) {
  const workshop = findWorkshop(slug);
  const navigate = useNavigate();
  const { selectedCompanyId } = useCompany();
  const location = useLocation();

  // Read ?prompt=... from the URL for StudioPromptBar's intent routing.
  // The existing generator panels don't currently accept a pre-filled
  // prompt prop, so for Phase 10 we just surface it to the user via a
  // read-only chip at the top of the params panel and expect them to
  // paste it in. Phase 14 wires prefill into every generator.
  const prefilledPrompt = useMemo(() => {
    const params = new URLSearchParams(location.search);
    return params.get("prompt") ?? "";
  }, [location.search]);

  const handleBack = () => {
    navigate("content-studio");
  };

  const handleSendToAssistant = () => {
    const base = "assistant";
    if (prefilledPrompt) {
      navigate(`${base}?prompt=${encodeURIComponent(prefilledPrompt)}`);
    } else {
      navigate(base);
    }
  };

  if (!workshop) {
    return <WorkshopNotFound slug={slug} onBack={handleBack} />;
  }

  return (
    <div className="mx-auto w-full max-w-[1400px] px-6 py-8">
      <WorkshopHeader workshop={workshop} onBack={handleBack} />

      {prefilledPrompt ? (
        <div
          data-testid="workshop-prefilled-prompt"
          className="mt-4 rounded-md border border-border bg-card px-4 py-3 text-[14px] text-muted-foreground"
        >
          <span className="font-semibold uppercase tracking-[0.1em] text-primary">From prompt: </span>
          {prefilledPrompt}
        </div>
      ) : null}

      <div
        data-testid="workshop-detail-grid"
        className="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]"
      >
        <section
          aria-label="Workshop parameters"
          className="flex flex-col gap-4 rounded-lg border border-border bg-card p-6"
        >
          <h2 className="text-[12px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
            Parameters
          </h2>
          <WorkshopBody workshop={workshop} companyId={selectedCompanyId ?? ""} />
        </section>

        <section
          aria-label="Workshop preview"
          className="flex flex-col gap-4 rounded-lg border border-border bg-card p-6"
        >
          <h2 className="text-[12px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
            Preview
          </h2>
          <div
            data-testid="workshop-preview-area"
            className="flex-1 rounded-md border border-dashed border-border p-6 text-[14px] text-muted-foreground"
          >
            Preview renders inline inside the generator above. Phase 14 will
            separate params from preview into this right column.
          </div>
          <WorkshopActionBar onSendToAssistant={handleSendToAssistant} />
        </section>
      </div>
    </div>
  );
}

function WorkshopHeader({
  workshop,
  onBack,
}: {
  workshop: WorkshopDefinition;
  onBack: () => void;
}) {
  const Icon = workshop.icon;
  return (
    <header className="flex items-center gap-4">
      <button
        type="button"
        onClick={onBack}
        aria-label="Back to Studio"
        className={cn(
          "flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground",
          "transition-colors duration-100 hover:text-primary hover:bg-card",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        )}
      >
        <ArrowLeft className="h-5 w-5" strokeWidth={1.5} />
      </button>
      <div className="flex items-center gap-2 text-[14px] font-semibold uppercase tracking-[0.1em]">
        <span className="text-muted-foreground">STUDIO</span>
        <span aria-hidden="true" className="text-muted-foreground">
          /
        </span>
        <span className="text-primary">{workshop.title}</span>
      </div>
      <Icon aria-hidden="true" className="ml-auto h-6 w-6 text-primary" strokeWidth={1.5} />
    </header>
  );
}

function WorkshopActionBar({ onSendToAssistant }: { onSendToAssistant: () => void }) {
  // Save / Export are placeholders in Phase 10 — they're part of the spec
  // but wiring them to real backends is out of scope. Clicking them is a
  // no-op for now; Phase 14 will connect them to the content-job store.
  return (
    <div
      data-testid="workshop-action-bar"
      className="mt-auto flex items-center justify-end gap-2 border-t border-border pt-4"
    >
      <ActionButton label="Save" icon={Save} />
      <ActionButton label="Export" icon={Download} />
      <ActionButton label="Send to Assistant" icon={MessageCircle} onClick={onSendToAssistant} primary />
    </div>
  );
}

function ActionButton({
  label,
  icon: Icon,
  onClick,
  primary,
}: {
  label: string;
  icon: ComponentType<{ className?: string; strokeWidth?: number | string }>;
  onClick?: () => void;
  primary?: boolean;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        "inline-flex items-center gap-2 rounded-md px-3 py-2 text-[13px] font-semibold uppercase tracking-[0.05em]",
        "transition-colors duration-100",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        primary
          ? "border border-border text-primary hover:bg-card"
          : "text-muted-foreground hover:text-primary hover:bg-card",
      )}
    >
      <Icon className="h-4 w-4" strokeWidth={1.5} />
      <span>{label}</span>
    </button>
  );
}

function WorkshopNotFound({ slug, onBack }: { slug: string; onBack: () => void }) {
  return (
    <div
      data-testid="workshop-not-found"
      className="mx-auto flex w-full max-w-[800px] flex-col items-start gap-4 px-6 py-16"
    >
      <div className="text-[14px] font-semibold uppercase tracking-[0.1em] text-primary">
        STUDIO / NOT FOUND
      </div>
      <h1 className="text-[32px] font-bold uppercase leading-tight text-foreground">
        Unknown workshop
      </h1>
      <p className="text-[14px] text-muted-foreground">
        There is no workshop with slug <code className="text-foreground">{slug}</code>.
      </p>
      <button
        type="button"
        onClick={onBack}
        className={cn(
          "inline-flex items-center gap-2 rounded-md border border-border px-3 py-2",
          "text-[13px] font-semibold uppercase tracking-[0.05em] text-primary hover:bg-card",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        )}
      >
        <ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
        <span>Back to Studio</span>
      </button>
    </div>
  );
}

/**
 * Render the existing generator component that corresponds to the given
 * workshop. Phase 10 does not rewrite any generator internals.
 */
function WorkshopBody({
  workshop,
  companyId,
}: {
  workshop: WorkshopDefinition;
  companyId: string;
}) {
  if (!companyId) {
    return (
      <p className="text-[14px] text-muted-foreground">
        Select a company to get started.
      </p>
    );
  }

  switch (workshop.componentKey) {
    case "diagram":
      return <DiagramGeneratePanel companyId={companyId} />;
    case "icon":
      return <IconGeneratePanel companyId={companyId} />;
    case "theme":
      return <ThemeWorkshopBody companyId={companyId} />;
    case "wallpaper":
      return <WallpaperGeneratePanel companyId={companyId} />;
    case "document":
      return <DocumentGeneratePanel companyId={companyId} />;
    case "brand":
      return <BrandKitPanel companyId={companyId} />;
    case "social":
      return <SocialPostPanel companyId={companyId} />;
    case "convert":
      return <ConvertPanel companyId={companyId} />;
    default:
      return <WorkshopPlaceholder slug={workshop.slug} />;
  }
}

function WorkshopPlaceholder({ slug }: { slug: string }) {
  return (
    <div
      data-testid={`workshop-placeholder-${slug}`}
      className="rounded-md border border-dashed border-border p-6 text-[14px] text-muted-foreground"
    >
      <div className="mb-1 text-[12px] font-semibold uppercase tracking-[0.1em] text-primary">
        Coming soon
      </div>
      No generator is wired up for <code className="text-foreground">{slug}</code> yet.
    </div>
  );
}

/**
 * ThemeWorkshopBody — lifted verbatim from the legacy ContentStudio tab
 * body. Phase 10 does not rewrite theme generation; it just relocates
 * the existing UI under the Studio workshop detail shell.
 */
function ThemeWorkshopBody({ companyId }: { companyId: string }) {
  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">
      <ThemeSeedInput value={seedColor} onChange={setSeedColor} />
      <button
        type="button"
        className={cn(
          "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",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        )}
        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
            type="button"
            className={cn(
              "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",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
            )}
            onClick={() => setShowApplyDialog(true)}
          >
            Apply to Nexus
          </button>
          <ThemeApplyConfirmDialog
            open={showApplyDialog}
            onConfirm={() => setShowApplyDialog(false)}
            onCancel={() => setShowApplyDialog(false)}
          />
        </>
      ) : null}
    </div>
  );
}
