AI Image Generation

"use client";

import { useCallback, useRef, useState, type HTMLAttributes, type KeyboardEvent, type PointerEvent, type ReactNode, type Ref } from "react";
import { AnimatePresence, motion } from "motion/react";
import { Dialog, Modal, ModalOverlay } from "react-aria-components";
import {
  RiAddLine,
  RiArrowDownSLine,
  RiCloseLine,
  RiGalleryLine,
  RiMenuLine,
  RiMore2Line,
  RiShareForwardLine,
  RiSparkling2Line,
} from "@remixicon/react";
import { Button } from "@/components/base/buttons/button";
import { IconButton } from "@/components/base/buttons/icon-button";
import { AiChatComposerPreview } from "@/components/blocks/composer/composer";
import { AgentSidebar } from "@/components/templates/ai-chat/agent-sidebar";
import { cx } from "@/utils/cx";
import { type ArtworkPalette } from "./artwork";
import { GenerationFrame } from "./generation-frame";
import { ImageGallery, type GalleryItem, type ImageGalleryProps } from "./image-gallery";

export interface AiImageGenerationProps extends HTMLAttributes<HTMLDivElement> {
  defaultPrompt?: string;
  userName?: string;
  onGenerate?: (prompt: string) => void;
  galleryItems: readonly GalleryItem[];
  palettes: readonly ArtworkPalette[];
  styleLabels?: readonly string[];
  /** Licensed generated-image URL supplied by the registry consumer. */
  generatedArtworkSrc?: string;
  /** Render slot for exact licensed media or a framework image component. */
  renderGeneratedArtwork?: () => ReactNode;
  /** Per-gallery-item licensed artwork URLs keyed by gallery item id. */
  galleryArtworkSrcById?: ImageGalleryProps["artworkSrcById"];
  /** Render slot for exact licensed gallery media. */
  renderGalleryArtwork?: ImageGalleryProps["renderArtwork"];
  ref?: Ref<HTMLDivElement>;
}

const DEFAULT_PANEL_WIDTH = 410;
const MIN_PANEL_WIDTH = 330;
const MAX_PANEL_WIDTH = 620;

export function AiImageGeneration({
  defaultPrompt = "",
  userName = "Mertcan Esmergul",
  onGenerate,
  galleryItems,
  palettes,
  styleLabels,
  generatedArtworkSrc,
  renderGeneratedArtwork,
  galleryArtworkSrcById,
  renderGalleryArtwork,
  className,
  ref,
  ...props
}: AiImageGenerationProps) {
  const [collapsed, setCollapsed] = useState(false);
  const [mobileNavigation, setMobileNavigation] = useState(false);
  const [mobileGallery, setMobileGallery] = useState(false);
  const [panelWidth, setPanelWidth] = useState(DEFAULT_PANEL_WIDTH);
  const [generationKey, setGenerationKey] = useState(0);
  const [prompt, setPrompt] = useState(defaultPrompt);
  const [toast, setToast] = useState<string | null>(null);
  const navigationTriggerRef = useRef<HTMLButtonElement>(null);
  const galleryTriggerRef = useRef<HTMLButtonElement>(null);
  const dragStart = useRef<{ x: number; width: number } | null>(null);

  const showToast = useCallback((message: string) => {
    setToast(message);
    window.setTimeout(() => setToast(null), 2100);
  }, []);

  const generate = useCallback((value?: string) => {
    const nextPrompt = value?.trim() || defaultPrompt;
    setPrompt(nextPrompt);
    setGenerationKey((key) => key + 1);
    onGenerate?.(nextPrompt);
  }, [defaultPrompt, onGenerate]);

  const closeNavigation = useCallback(() => {
    setMobileNavigation(false);
    window.setTimeout(() => navigationTriggerRef.current?.focus());
  }, []);

  const closeGallery = useCallback(() => {
    setMobileGallery(false);
    window.setTimeout(() => galleryTriggerRef.current?.focus());
  }, []);

  const beginResize = useCallback((event: PointerEvent<HTMLDivElement>) => {
    dragStart.current = { x: event.clientX, width: panelWidth };
    event.currentTarget.setPointerCapture(event.pointerId);
  }, [panelWidth]);

  const resize = useCallback((event: PointerEvent<HTMLDivElement>) => {
    if (!dragStart.current) return;
    setPanelWidth(Math.min(MAX_PANEL_WIDTH, Math.max(MIN_PANEL_WIDTH, dragStart.current.width + dragStart.current.x - event.clientX)));
  }, []);

  const resizeWithKeyboard = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
    const increments: Record<string, number> = { ArrowLeft: 10, ArrowRight: -10 };
    if (event.key === "Home") {
      event.preventDefault();
      setPanelWidth(MIN_PANEL_WIDTH);
      return;
    }
    if (event.key === "End") {
      event.preventDefault();
      setPanelWidth(MAX_PANEL_WIDTH);
      return;
    }
    const increment = increments[event.key];
    if (!increment) return;
    event.preventDefault();
    setPanelWidth((width) => Math.min(MAX_PANEL_WIDTH, Math.max(MIN_PANEL_WIDTH, width + increment)));
  }, []);

  return (
    <div ref={ref} data-user-name={userName} className={cx("relative flex h-[720px] min-h-[620px] w-full gap-3 overflow-hidden bg-background-full p-3 font-sans text-text-primary", className)} {...props}>
      <AgentSidebar userName={userName} userInitials={userName.trim().charAt(0).toUpperCase() || "M"} collapsed={collapsed} onCollapsedChange={setCollapsed} className="hidden lg:flex" />

      <main className="relative flex min-w-0 flex-1 flex-col overflow-hidden">
        <header className="flex h-12 shrink-0 items-center justify-between border-b border-border-button-default px-3">
          <div className="flex min-w-0 items-center gap-2">
            <Button ref={navigationTriggerRef} variant="secondary" iconOnly leadingIcon={RiMenuLine} aria-label="Open navigation" onClick={() => setMobileNavigation(true)} className="rounded-full lg:hidden" />
            <nav aria-label="Chat location" className="flex min-w-0 items-center gap-2 text-body-medium"><button type="button" className="flex items-center gap-1 rounded-lg p-1.5 hover:bg-background-primary-hover">vibl coding project<RiArrowDownSLine className="size-4 text-foreground-icon-secondary" /></button><span className="text-text-tertiary">/</span><span className="truncate text-text-primary">image generation</span></nav>
          </div>
          <div className="flex gap-1"><IconButton icon={RiShareForwardLine} size="small" aria-label="Share chat" className="border-0 bg-transparent shadow-none" /><IconButton icon={RiMore2Line} size="small" aria-label="More options" className="border-0 bg-transparent shadow-none" /></div>
        </header>

        <section className="min-h-0 flex-1 overflow-y-auto px-5 py-8 [scrollbar-width:none]">
          <div className="mx-auto flex w-full max-w-[560px] flex-col gap-5">
            <p className="ml-auto max-w-[460px] rounded-2xl rounded-br-md bg-background-tertiary-default px-4 py-3 text-body text-text-primary">{prompt}</p>
            <GenerationFrame generationKey={generationKey} onToast={showToast} artworkSrc={generatedArtworkSrc} renderArtwork={renderGeneratedArtwork} generatedImageLabel={prompt} />
          </div>
        </section>

        <div className="shrink-0 px-4 pb-3">
          <AiChatComposerPreview className="mx-auto" composerProps={{ defaultModel: "Fable 5", onSubmit: (value) => generate(value) }} statusBarProps={{ branch: "Main", project: "project-sea", mode: "Agent", contextUsage: 57 }} />
        </div>
      </main>

      <div
        role="separator"
        aria-label="Resize panels"
        aria-orientation="vertical"
        aria-valuemin={MIN_PANEL_WIDTH}
        aria-valuemax={MAX_PANEL_WIDTH}
        aria-valuenow={panelWidth}
        tabIndex={0}
        onKeyDown={resizeWithKeyboard}
        onPointerDown={beginResize}
        onPointerMove={resize}
        onPointerUp={(event) => {
          dragStart.current = null;
          if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
        }}
        className="group/drag relative hidden w-px shrink-0 cursor-col-resize touch-none items-center justify-center outline-none before:absolute before:inset-y-0 before:-left-2 before:w-5 before:content-[''] focus-visible:ring-2 focus-visible:ring-border-focus-ring xl:flex"
      >
        <span aria-hidden className="h-6 w-px bg-border-button-default transition-colors group-hover/drag:bg-foreground-icon-secondary" />
      </div>
      <ImageGallery items={galleryItems} palettes={palettes} styleLabels={styleLabels} panelWidth={panelWidth} artworkSrcById={galleryArtworkSrcById} renderArtwork={renderGalleryArtwork} onNewGeneration={() => generate()} onToast={showToast} />

      <AnimatePresence>
        {toast ? (
          <motion.div role="status" initial={{ opacity: 0, y: 12, scale: .96 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: 8 }} className="absolute bottom-5 left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-xl border border-border-button-default bg-background-primary-default px-3 py-2 text-body-2-medium text-text-primary shadow-dropdown"><RiSparkling2Line className="size-4 text-accent-600" />{toast}<button type="button" aria-label="Dismiss notification" onClick={() => setToast(null)}><RiCloseLine className="size-4 text-foreground-icon-secondary" /></button></motion.div>
        ) : null}
      </AnimatePresence>

      <div className="absolute right-3 bottom-3 z-20 flex gap-2 xl:hidden">
        <Button ref={galleryTriggerRef} variant="secondary" iconOnly leadingIcon={RiGalleryLine} aria-label="Open image gallery" onClick={() => setMobileGallery(true)} className="rounded-full shadow-lg" />
        <button type="button" className="rounded-full bg-accent-600 p-3 text-white shadow-lg" aria-label="New generation" onClick={() => generate()}><RiAddLine className="size-5" /></button>
      </div>

      <ModalOverlay isOpen={mobileNavigation} isDismissable onOpenChange={(open) => { if (!open) closeNavigation(); }} className="fixed inset-0 z-50 bg-black/40 transition-opacity duration-200 data-[entering]:opacity-0 data-[exiting]:opacity-0 motion-reduce:transition-none lg:hidden">
        <Modal className="h-full w-[min(272px,calc(100%-24px))] p-3 pr-0 outline-none transition-transform duration-300 ease-out data-[entering]:-translate-x-full data-[exiting]:-translate-x-full motion-reduce:transition-none">
          <Dialog aria-label="Navigation" className="relative h-full outline-none">
            <AgentSidebar userName={userName} userInitials={userName.trim().charAt(0).toUpperCase() || "M"} className="w-[260px] max-w-full" />
            <Button variant="secondary" iconOnly leadingIcon={RiCloseLine} aria-label="Close navigation" onClick={closeNavigation} className="absolute top-2 right-2 rounded-full" />
          </Dialog>
        </Modal>
      </ModalOverlay>

      <ModalOverlay isOpen={mobileGallery} isDismissable onOpenChange={(open) => { if (!open) closeGallery(); }} className="fixed inset-0 z-50 flex items-end bg-black/40 transition-opacity duration-200 data-[entering]:opacity-0 data-[exiting]:opacity-0 motion-reduce:transition-none xl:hidden">
        <Modal className="h-[min(86dvh,720px)] w-full rounded-t-3xl bg-background-full p-3 pb-[calc(12px+env(safe-area-inset-bottom))] shadow-sidebar outline-none transition-transform duration-300 ease-out data-[entering]:translate-y-full data-[exiting]:translate-y-full motion-reduce:transition-none">
          <Dialog aria-label="Image gallery" className="flex h-full min-h-0 flex-col outline-none">
            <div className="flex h-10 shrink-0 items-center justify-between px-1"><span className="text-headline-medium text-text-primary">Image generations</span><Button variant="secondary" iconOnly leadingIcon={RiCloseLine} aria-label="Close image gallery" onClick={closeGallery} className="rounded-full" /></div>
            <ImageGallery items={galleryItems} palettes={palettes} styleLabels={styleLabels} mobile artworkSrcById={galleryArtworkSrcById} renderArtwork={renderGalleryArtwork} onNewGeneration={() => generate()} onToast={showToast} className="min-h-0 flex-1" />
          </Dialog>
        </Modal>
      </ModalOverlay>
    </div>
  );
}

export default AiImageGeneration;

"use client";

import { useCallback, useRef, useState, type HTMLAttributes, type KeyboardEvent, type PointerEvent, type ReactNode, type Ref } from "react";
import { AnimatePresence, motion } from "motion/react";
import { Dialog, Modal, ModalOverlay } from "react-aria-components";
import {
  RiAddLine,
  RiArrowDownSLine,
  RiCloseLine,
  RiGalleryLine,
  RiMenuLine,
  RiMore2Line,
  RiShareForwardLine,
  RiSparkling2Line,
} from "@remixicon/react";
import { Button } from "@/components/base/buttons/button";
import { IconButton } from "@/components/base/buttons/icon-button";
import { AiChatComposerPreview } from "@/components/blocks/composer/composer";
import { AgentSidebar } from "@/components/templates/ai-chat/agent-sidebar";
import { cx } from "@/utils/cx";
import { type ArtworkPalette } from "./artwork";
import { GenerationFrame } from "./generation-frame";
import { ImageGallery, type GalleryItem, type ImageGalleryProps } from "./image-gallery";

export interface AiImageGenerationProps extends HTMLAttributes<HTMLDivElement> {
  defaultPrompt?: string;
  userName?: string;
  onGenerate?: (prompt: string) => void;
  galleryItems: readonly GalleryItem[];
  palettes: readonly ArtworkPalette[];
  styleLabels?: readonly string[];
  /** Licensed generated-image URL supplied by the registry consumer. */
  generatedArtworkSrc?: string;
  /** Render slot for exact licensed media or a framework image component. */
  renderGeneratedArtwork?: () => ReactNode;
  /** Per-gallery-item licensed artwork URLs keyed by gallery item id. */
  galleryArtworkSrcById?: ImageGalleryProps["artworkSrcById"];
  /** Render slot for exact licensed gallery media. */
  renderGalleryArtwork?: ImageGalleryProps["renderArtwork"];
  ref?: Ref<HTMLDivElement>;
}

const DEFAULT_PANEL_WIDTH = 410;
const MIN_PANEL_WIDTH = 330;
const MAX_PANEL_WIDTH = 620;

export function AiImageGeneration({
  defaultPrompt = "",
  userName = "Mertcan Esmergul",
  onGenerate,
  galleryItems,
  palettes,
  styleLabels,
  generatedArtworkSrc,
  renderGeneratedArtwork,
  galleryArtworkSrcById,
  renderGalleryArtwork,
  className,
  ref,
  ...props
}: AiImageGenerationProps) {
  const [collapsed, setCollapsed] = useState(false);
  const [mobileNavigation, setMobileNavigation] = useState(false);
  const [mobileGallery, setMobileGallery] = useState(false);
  const [panelWidth, setPanelWidth] = useState(DEFAULT_PANEL_WIDTH);
  const [generationKey, setGenerationKey] = useState(0);
  const [prompt, setPrompt] = useState(defaultPrompt);
  const [toast, setToast] = useState<string | null>(null);
  const navigationTriggerRef = useRef<HTMLButtonElement>(null);
  const galleryTriggerRef = useRef<HTMLButtonElement>(null);
  const dragStart = useRef<{ x: number; width: number } | null>(null);

  const showToast = useCallback((message: string) => {
    setToast(message);
    window.setTimeout(() => setToast(null), 2100);
  }, []);

  const generate = useCallback((value?: string) => {
    const nextPrompt = value?.trim() || defaultPrompt;
    setPrompt(nextPrompt);
    setGenerationKey((key) => key + 1);
    onGenerate?.(nextPrompt);
  }, [defaultPrompt, onGenerate]);

  const closeNavigation = useCallback(() => {
    setMobileNavigation(false);
    window.setTimeout(() => navigationTriggerRef.current?.focus());
  }, []);

  const closeGallery = useCallback(() => {
    setMobileGallery(false);
    window.setTimeout(() => galleryTriggerRef.current?.focus());
  }, []);

  const beginResize = useCallback((event: PointerEvent<HTMLDivElement>) => {
    dragStart.current = { x: event.clientX, width: panelWidth };
    event.currentTarget.setPointerCapture(event.pointerId);
  }, [panelWidth]);

  const resize = useCallback((event: PointerEvent<HTMLDivElement>) => {
    if (!dragStart.current) return;
    setPanelWidth(Math.min(MAX_PANEL_WIDTH, Math.max(MIN_PANEL_WIDTH, dragStart.current.width + dragStart.current.x - event.clientX)));
  }, []);

  const resizeWithKeyboard = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
    const increments: Record<string, number> = { ArrowLeft: 10, ArrowRight: -10 };
    if (event.key === "Home") {
      event.preventDefault();
      setPanelWidth(MIN_PANEL_WIDTH);
      return;
    }
    if (event.key === "End") {
      event.preventDefault();
      setPanelWidth(MAX_PANEL_WIDTH);
      return;
    }
    const increment = increments[event.key];
    if (!increment) return;
    event.preventDefault();
    setPanelWidth((width) => Math.min(MAX_PANEL_WIDTH, Math.max(MIN_PANEL_WIDTH, width + increment)));
  }, []);

  return (
    <div ref={ref} data-user-name={userName} className={cx("relative flex h-[720px] min-h-[620px] w-full gap-3 overflow-hidden bg-background-full p-3 font-sans text-text-primary", className)} {...props}>
      <AgentSidebar userName={userName} userInitials={userName.trim().charAt(0).toUpperCase() || "M"} collapsed={collapsed} onCollapsedChange={setCollapsed} className="hidden lg:flex" />

      <main className="relative flex min-w-0 flex-1 flex-col overflow-hidden">
        <header className="flex h-12 shrink-0 items-center justify-between border-b border-border-button-default px-3">
          <div className="flex min-w-0 items-center gap-2">
            <Button ref={navigationTriggerRef} variant="secondary" iconOnly leadingIcon={RiMenuLine} aria-label="Open navigation" onClick={() => setMobileNavigation(true)} className="rounded-full lg:hidden" />
            <nav aria-label="Chat location" className="flex min-w-0 items-center gap-2 text-body-medium"><button type="button" className="flex items-center gap-1 rounded-lg p-1.5 hover:bg-background-primary-hover">vibl coding project<RiArrowDownSLine className="size-4 text-foreground-icon-secondary" /></button><span className="text-text-tertiary">/</span><span className="truncate text-text-primary">image generation</span></nav>
          </div>
          <div className="flex gap-1"><IconButton icon={RiShareForwardLine} size="small" aria-label="Share chat" className="border-0 bg-transparent shadow-none" /><IconButton icon={RiMore2Line} size="small" aria-label="More options" className="border-0 bg-transparent shadow-none" /></div>
        </header>

        <section className="min-h-0 flex-1 overflow-y-auto px-5 py-8 [scrollbar-width:none]">
          <div className="mx-auto flex w-full max-w-[560px] flex-col gap-5">
            <p className="ml-auto max-w-[460px] rounded-2xl rounded-br-md bg-background-tertiary-default px-4 py-3 text-body text-text-primary">{prompt}</p>
            <GenerationFrame generationKey={generationKey} onToast={showToast} artworkSrc={generatedArtworkSrc} renderArtwork={renderGeneratedArtwork} generatedImageLabel={prompt} />
          </div>
        </section>

        <div className="shrink-0 px-4 pb-3">
          <AiChatComposerPreview className="mx-auto" composerProps={{ defaultModel: "Fable 5", onSubmit: (value) => generate(value) }} statusBarProps={{ branch: "Main", project: "project-sea", mode: "Agent", contextUsage: 57 }} />
        </div>
      </main>

      <div
        role="separator"
        aria-label="Resize panels"
        aria-orientation="vertical"
        aria-valuemin={MIN_PANEL_WIDTH}
        aria-valuemax={MAX_PANEL_WIDTH}
        aria-valuenow={panelWidth}
        tabIndex={0}
        onKeyDown={resizeWithKeyboard}
        onPointerDown={beginResize}
        onPointerMove={resize}
        onPointerUp={(event) => {
          dragStart.current = null;
          if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
        }}
        className="group/drag relative hidden w-px shrink-0 cursor-col-resize touch-none items-center justify-center outline-none before:absolute before:inset-y-0 before:-left-2 before:w-5 before:content-[''] focus-visible:ring-2 focus-visible:ring-border-focus-ring xl:flex"
      >
        <span aria-hidden className="h-6 w-px bg-border-button-default transition-colors group-hover/drag:bg-foreground-icon-secondary" />
      </div>
      <ImageGallery items={galleryItems} palettes={palettes} styleLabels={styleLabels} panelWidth={panelWidth} artworkSrcById={galleryArtworkSrcById} renderArtwork={renderGalleryArtwork} onNewGeneration={() => generate()} onToast={showToast} />

      <AnimatePresence>
        {toast ? (
          <motion.div role="status" initial={{ opacity: 0, y: 12, scale: .96 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: 8 }} className="absolute bottom-5 left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-xl border border-border-button-default bg-background-primary-default px-3 py-2 text-body-2-medium text-text-primary shadow-dropdown"><RiSparkling2Line className="size-4 text-accent-600" />{toast}<button type="button" aria-label="Dismiss notification" onClick={() => setToast(null)}><RiCloseLine className="size-4 text-foreground-icon-secondary" /></button></motion.div>
        ) : null}
      </AnimatePresence>

      <div className="absolute right-3 bottom-3 z-20 flex gap-2 xl:hidden">
        <Button ref={galleryTriggerRef} variant="secondary" iconOnly leadingIcon={RiGalleryLine} aria-label="Open image gallery" onClick={() => setMobileGallery(true)} className="rounded-full shadow-lg" />
        <button type="button" className="rounded-full bg-accent-600 p-3 text-white shadow-lg" aria-label="New generation" onClick={() => generate()}><RiAddLine className="size-5" /></button>
      </div>

      <ModalOverlay isOpen={mobileNavigation} isDismissable onOpenChange={(open) => { if (!open) closeNavigation(); }} className="fixed inset-0 z-50 bg-black/40 transition-opacity duration-200 data-[entering]:opacity-0 data-[exiting]:opacity-0 motion-reduce:transition-none lg:hidden">
        <Modal className="h-full w-[min(272px,calc(100%-24px))] p-3 pr-0 outline-none transition-transform duration-300 ease-out data-[entering]:-translate-x-full data-[exiting]:-translate-x-full motion-reduce:transition-none">
          <Dialog aria-label="Navigation" className="relative h-full outline-none">
            <AgentSidebar userName={userName} userInitials={userName.trim().charAt(0).toUpperCase() || "M"} className="w-[260px] max-w-full" />
            <Button variant="secondary" iconOnly leadingIcon={RiCloseLine} aria-label="Close navigation" onClick={closeNavigation} className="absolute top-2 right-2 rounded-full" />
          </Dialog>
        </Modal>
      </ModalOverlay>

      <ModalOverlay isOpen={mobileGallery} isDismissable onOpenChange={(open) => { if (!open) closeGallery(); }} className="fixed inset-0 z-50 flex items-end bg-black/40 transition-opacity duration-200 data-[entering]:opacity-0 data-[exiting]:opacity-0 motion-reduce:transition-none xl:hidden">
        <Modal className="h-[min(86dvh,720px)] w-full rounded-t-3xl bg-background-full p-3 pb-[calc(12px+env(safe-area-inset-bottom))] shadow-sidebar outline-none transition-transform duration-300 ease-out data-[entering]:translate-y-full data-[exiting]:translate-y-full motion-reduce:transition-none">
          <Dialog aria-label="Image gallery" className="flex h-full min-h-0 flex-col outline-none">
            <div className="flex h-10 shrink-0 items-center justify-between px-1"><span className="text-headline-medium text-text-primary">Image generations</span><Button variant="secondary" iconOnly leadingIcon={RiCloseLine} aria-label="Close image gallery" onClick={closeGallery} className="rounded-full" /></div>
            <ImageGallery items={galleryItems} palettes={palettes} styleLabels={styleLabels} mobile artworkSrcById={galleryArtworkSrcById} renderArtwork={renderGalleryArtwork} onNewGeneration={() => generate()} onToast={showToast} className="min-h-0 flex-1" />
          </Dialog>
        </Modal>
      </ModalOverlay>
    </div>
  );
}

export default AiImageGeneration;

import { useId, type CSSProperties } from "react";

export type ArtworkPalette = readonly [string, string, string, string];

export interface GeneratedArtworkProps {
  title: string;
  palettes: readonly ArtworkPalette[];
  variant?: number;
  className?: string;
  style?: CSSProperties;
}

/**
 * Redistributable, authored artwork used in place of BoardCN's photographic
 * demo assets. The layered vector treatment preserves the template's dense,
 * editorial gallery rhythm without copying the reference files.
 */
export function GeneratedArtwork({ title, palettes, variant = 0, className, style }: GeneratedArtworkProps) {
  const id = useId().replace(/:/g, "");
  const colors = palettes[Math.abs(variant) % palettes.length] ?? palettes[0];
  const rotation = (variant * 19) % 90;

  return (
    <svg
      role="img"
      aria-label={title}
      viewBox="0 0 320 400"
      preserveAspectRatio="xMidYMid slice"
      className={className}
      style={style}
    >
      <defs>
        <linearGradient id={`${id}-bg`} x1="0" y1="0" x2="1" y2="1">
          <stop stopColor={colors[0]} />
          <stop offset="1" stopColor={colors[1]} />
        </linearGradient>
        <pattern id={`${id}-dots`} width="12" height="12" patternUnits="userSpaceOnUse">
          <circle cx="3" cy="3" r="1.7" fill={colors[3]} opacity=".28" />
        </pattern>
        <filter id={`${id}-grain`} x="-10%" y="-10%" width="120%" height="120%">
          <feTurbulence baseFrequency=".76" numOctaves="2" seed={variant + 3} type="fractalNoise" />
          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 .11 0" />
        </filter>
      </defs>
      <rect width="320" height="400" fill={`url(#${id}-bg)`} />
      <g transform={`rotate(${rotation} 160 200)`}>
        <ellipse cx="88" cy="98" rx="118" ry="72" fill={colors[2]} opacity=".82" />
        <rect x="148" y="84" width="176" height="168" rx="52" fill={colors[3]} opacity=".86" />
        <path d="M-28 335C54 230 118 247 171 179c46-59 88-57 184-16v262H-28Z" fill={colors[2]} />
        <path d="M-18 360c78-58 135-42 197-93 48-39 91-36 156-6" fill="none" stroke={colors[0]} strokeWidth="22" strokeLinecap="round" />
      </g>
      <rect width="320" height="400" fill={`url(#${id}-dots)`} />
      <g fill="none" stroke={colors[3]} strokeWidth="3" opacity=".72">
        <circle cx="160" cy="195" r={42 + (variant % 4) * 11} />
        <circle cx="160" cy="195" r={58 + (variant % 3) * 14} />
      </g>
      <path d="M102 251c9-45 31-71 59-71s50 26 58 71l20 95H82Z" fill={colors[3]} />
      <circle cx="160" cy="154" r="38" fill={colors[2]} />
      <path d="M124 151c9-45 68-51 78-1-20-12-48-15-78 1Z" fill={colors[3]} />
      <path d="M145 169c10 8 22 8 32 0" fill="none" stroke={colors[3]} strokeWidth="4" strokeLinecap="round" />
      <rect width="320" height="400" filter={`url(#${id}-grain)`} opacity=".5" />
    </svg>
  );
}

export function FootballArtwork({ className }: { className?: string }) {
  const id = useId().replace(/:/g, "");
  return (
    <svg role="img" aria-label="Vintage-style illustration of a football player in Argentina's striped kit" viewBox="0 0 400 500" className={className} preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id={`${id}-sky`} cx="50%" cy="38%" r="70%"><stop stopColor="#5a9af2" /><stop offset="1" stopColor="#0c4eae" /></radialGradient>
        <pattern id={`${id}-stripe`} width="52" height="20" patternUnits="userSpaceOnUse"><rect width="26" height="20" fill="#f6f2df" /><rect x="26" width="26" height="20" fill="#70b6ec" /></pattern>
        <filter id={`${id}-paper`}><feTurbulence baseFrequency=".5" numOctaves="3" seed="11" /><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .13 0" /></filter>
      </defs>
      <rect width="400" height="500" fill={`url(#${id}-sky)`} />
      <circle cx="328" cy="88" r="96" fill="#8dc3ff" opacity=".25" />
      <path d="M0 420c108-70 259-73 400-11v91H0Z" fill="#14367b" />
      <path d="M176 137c-27 35-25 73 4 91 32 20 70-3 75-43 5-38-7-72-39-76-17-2-30 8-40 28Z" fill="#d9a170" stroke="#212846" strokeWidth="8" />
      <path d="M168 145c7-49 64-70 91-19 9 17 9 32 4 47-20-30-48-44-95-28Z" fill="#302519" />
      <path d="M137 226c39-28 95-20 129 12l29 150-169 11-22-126c-5-22 6-37 33-47Z" fill={`url(#${id}-stripe)`} stroke="#202c50" strokeWidth="9" />
      <path d="M194 231v167M249 240l22 148M145 240l8 151" stroke="#26385f" strokeWidth="5" opacity=".45" />
      <path d="M125 260 53 337l43 29 73-70M267 257l79 54-23 45-90-59" fill="#d9a170" stroke="#212846" strokeWidth="9" strokeLinecap="round" strokeLinejoin="round" />
      <path d="m156 395-23 92h58l21-91m40-4 36 95h60l-49-111" fill="#e8e1c8" stroke="#212846" strokeWidth="10" strokeLinejoin="round" />
      <circle cx="74" cy="376" r="40" fill="#ece8db" stroke="#1e3159" strokeWidth="8" />
      <path d="m74 338 23 17-8 27-30 1-9-28Z" fill="#1e3159" />
      <rect width="400" height="500" filter={`url(#${id}-paper)`} />
    </svg>
  );
}

import { useId, type CSSProperties } from "react";

export type ArtworkPalette = readonly [string, string, string, string];

export interface GeneratedArtworkProps {
  title: string;
  palettes: readonly ArtworkPalette[];
  variant?: number;
  className?: string;
  style?: CSSProperties;
}

/**
 * Redistributable, authored artwork used in place of BoardCN's photographic
 * demo assets. The layered vector treatment preserves the template's dense,
 * editorial gallery rhythm without copying the reference files.
 */
export function GeneratedArtwork({ title, palettes, variant = 0, className, style }: GeneratedArtworkProps) {
  const id = useId().replace(/:/g, "");
  const colors = palettes[Math.abs(variant) % palettes.length] ?? palettes[0];
  const rotation = (variant * 19) % 90;

  return (
    <svg
      role="img"
      aria-label={title}
      viewBox="0 0 320 400"
      preserveAspectRatio="xMidYMid slice"
      className={className}
      style={style}
    >
      <defs>
        <linearGradient id={`${id}-bg`} x1="0" y1="0" x2="1" y2="1">
          <stop stopColor={colors[0]} />
          <stop offset="1" stopColor={colors[1]} />
        </linearGradient>
        <pattern id={`${id}-dots`} width="12" height="12" patternUnits="userSpaceOnUse">
          <circle cx="3" cy="3" r="1.7" fill={colors[3]} opacity=".28" />
        </pattern>
        <filter id={`${id}-grain`} x="-10%" y="-10%" width="120%" height="120%">
          <feTurbulence baseFrequency=".76" numOctaves="2" seed={variant + 3} type="fractalNoise" />
          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 .11 0" />
        </filter>
      </defs>
      <rect width="320" height="400" fill={`url(#${id}-bg)`} />
      <g transform={`rotate(${rotation} 160 200)`}>
        <ellipse cx="88" cy="98" rx="118" ry="72" fill={colors[2]} opacity=".82" />
        <rect x="148" y="84" width="176" height="168" rx="52" fill={colors[3]} opacity=".86" />
        <path d="M-28 335C54 230 118 247 171 179c46-59 88-57 184-16v262H-28Z" fill={colors[2]} />
        <path d="M-18 360c78-58 135-42 197-93 48-39 91-36 156-6" fill="none" stroke={colors[0]} strokeWidth="22" strokeLinecap="round" />
      </g>
      <rect width="320" height="400" fill={`url(#${id}-dots)`} />
      <g fill="none" stroke={colors[3]} strokeWidth="3" opacity=".72">
        <circle cx="160" cy="195" r={42 + (variant % 4) * 11} />
        <circle cx="160" cy="195" r={58 + (variant % 3) * 14} />
      </g>
      <path d="M102 251c9-45 31-71 59-71s50 26 58 71l20 95H82Z" fill={colors[3]} />
      <circle cx="160" cy="154" r="38" fill={colors[2]} />
      <path d="M124 151c9-45 68-51 78-1-20-12-48-15-78 1Z" fill={colors[3]} />
      <path d="M145 169c10 8 22 8 32 0" fill="none" stroke={colors[3]} strokeWidth="4" strokeLinecap="round" />
      <rect width="320" height="400" filter={`url(#${id}-grain)`} opacity=".5" />
    </svg>
  );
}

export function FootballArtwork({ className }: { className?: string }) {
  const id = useId().replace(/:/g, "");
  return (
    <svg role="img" aria-label="Vintage-style illustration of a football player in Argentina's striped kit" viewBox="0 0 400 500" className={className} preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id={`${id}-sky`} cx="50%" cy="38%" r="70%"><stop stopColor="#5a9af2" /><stop offset="1" stopColor="#0c4eae" /></radialGradient>
        <pattern id={`${id}-stripe`} width="52" height="20" patternUnits="userSpaceOnUse"><rect width="26" height="20" fill="#f6f2df" /><rect x="26" width="26" height="20" fill="#70b6ec" /></pattern>
        <filter id={`${id}-paper`}><feTurbulence baseFrequency=".5" numOctaves="3" seed="11" /><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .13 0" /></filter>
      </defs>
      <rect width="400" height="500" fill={`url(#${id}-sky)`} />
      <circle cx="328" cy="88" r="96" fill="#8dc3ff" opacity=".25" />
      <path d="M0 420c108-70 259-73 400-11v91H0Z" fill="#14367b" />
      <path d="M176 137c-27 35-25 73 4 91 32 20 70-3 75-43 5-38-7-72-39-76-17-2-30 8-40 28Z" fill="#d9a170" stroke="#212846" strokeWidth="8" />
      <path d="M168 145c7-49 64-70 91-19 9 17 9 32 4 47-20-30-48-44-95-28Z" fill="#302519" />
      <path d="M137 226c39-28 95-20 129 12l29 150-169 11-22-126c-5-22 6-37 33-47Z" fill={`url(#${id}-stripe)`} stroke="#202c50" strokeWidth="9" />
      <path d="M194 231v167M249 240l22 148M145 240l8 151" stroke="#26385f" strokeWidth="5" opacity=".45" />
      <path d="M125 260 53 337l43 29 73-70M267 257l79 54-23 45-90-59" fill="#d9a170" stroke="#212846" strokeWidth="9" strokeLinecap="round" strokeLinejoin="round" />
      <path d="m156 395-23 92h58l21-91m40-4 36 95h60l-49-111" fill="#e8e1c8" stroke="#212846" strokeWidth="10" strokeLinejoin="round" />
      <circle cx="74" cy="376" r="40" fill="#ece8db" stroke="#1e3159" strokeWidth="8" />
      <path d="m74 338 23 17-8 27-30 1-9-28Z" fill="#1e3159" />
      <rect width="400" height="500" filter={`url(#${id}-paper)`} />
    </svg>
  );
}

"use client";

import { useEffect, useState, type ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { RiCheckLine, RiFileCopyLine, RiThumbDownLine, RiThumbUpLine } from "@remixicon/react";
import { IconButton } from "@/components/base/buttons/icon-button";

export interface GenerationFrameProps {
  generationKey: number;
  duration?: number;
  onComplete?: () => void;
  onToast?: (message: string) => void;
  /** Licensed artwork URL supplied by the registry consumer. */
  artworkSrc?: string;
  /** Render slot for licensed artwork or a framework-specific image component. */
  renderArtwork?: () => ReactNode;
  generatedImageLabel?: string;
}

const PULSE_DOTS = [
  { count: 14, radius: 27, size: 3 },
  { count: 22, radius: 41, size: 3.5 },
  { count: 28, radius: 54, size: 2.5 },
].flatMap(({ count, radius, size }, ring) => Array.from({ length: count }, (_, index) => {
  const angle = (index / count) * Math.PI * 2 - Math.PI / 2;
  return {
    delay: -(index / count) * 1.8 - ring * 0.14,
    size,
    x: Math.cos(angle) * radius,
    y: Math.sin(angle) * radius,
  };
}));

function PulsatingLoader({ remaining }: { remaining: number }) {
  return (
    <div className="absolute inset-0 flex flex-col justify-end p-4">
      <div aria-hidden className="absolute top-[46%] left-1/2 size-32 -translate-x-1/2 -translate-y-1/2">
        {PULSE_DOTS.map((dot, index) => (
          <span
            key={index}
            className="image-generation-pulse-dot absolute rounded-full bg-text-primary"
            style={{
              width: `${dot.size}px`,
              height: `${dot.size}px`,
              left: `${(64 + dot.x - dot.size / 2).toFixed(4)}px`,
              top: `${(64 + dot.y - dot.size / 2).toFixed(4)}px`,
              animationDelay: `${dot.delay.toFixed(5)}s`,
            }}
          />
        ))}
      </div>
      <div className="flex items-center justify-between gap-3 text-body-medium text-text-secondary">
        <span>Generating image</span>
        <span aria-label={`${remaining} second${remaining === 1 ? "" : "s"} remaining`} className="tabular-nums">{remaining} s</span>
      </div>
    </div>
  );
}

export function GenerationFrame({
  generationKey,
  duration = 10,
  onComplete,
  onToast,
  artworkSrc,
  renderArtwork,
  generatedImageLabel = "Vintage editorial illustration of Lionel Messi dribbling in Argentina's home kit against a blue background",
}: GenerationFrameProps) {
  const reducedMotion = useReducedMotion();
  const [remaining, setRemaining] = useState(duration);
  const [complete, setComplete] = useState(false);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    setRemaining(duration);
    setComplete(false);
    setCopied(false);
    if (reducedMotion || duration <= 0) {
      setComplete(true);
      onComplete?.();
      return;
    }
    const startedAt = Date.now();
    const timer = window.setInterval(() => {
      const next = Math.max(0, Math.ceil(duration - (Date.now() - startedAt) / 1000));
      setRemaining(next);
      if (next === 0) {
        window.clearInterval(timer);
        setComplete(true);
        onComplete?.();
      }
    }, 100);
    return () => window.clearInterval(timer);
  }, [duration, generationKey, onComplete, reducedMotion]);

  const copyPrompt = async () => {
    const text = "Create a vintage editorial illustration of Lionel Messi dribbling in Argentina's home kit against a blue background.";
    try { await navigator.clipboard.writeText(text); } catch { /* Clipboard may be unavailable in embedded previews. */ }
    setCopied(true);
    onToast?.("Prompt copied");
    window.setTimeout(() => setCopied(false), 1800);
  };

  return (
    <motion.div
      key={generationKey}
      initial={reducedMotion ? false : { height: 0, opacity: 0 }}
      animate={{ height: "auto", opacity: 1 }}
      transition={{ height: { duration: 0.52, ease: [0.22, 1, 0.36, 1] }, opacity: { duration: 0.22 } }}
      className="w-[200px] overflow-hidden"
    >
      <div className="relative aspect-[4/5] overflow-hidden rounded-2xl bg-background-tertiary-default shadow-sm" aria-label={complete ? "Generated image" : "Generating image"}>
        {!complete ? <PulsatingLoader remaining={remaining} /> : null}
        <AnimatePresence>
          {complete ? (
            <motion.div
              initial={reducedMotion ? false : { clipPath: "circle(0% at 50% 50%)", filter: "blur(8px)" }}
              animate={{ clipPath: "circle(76% at 50% 50%)", filter: "blur(0px)" }}
              transition={{ duration: reducedMotion ? 0 : 0.9, ease: [0.22, 1, 0.36, 1] }}
              className="absolute inset-0"
            >
              <div role="img" aria-label={generatedImageLabel} className="size-full">
                {renderArtwork ? renderArtwork() : <img src={artworkSrc ?? "/ai-image-generation/messi.jpg"} alt="" className="size-full object-cover outline -outline-offset-1 outline-black/10 dark:outline-white/10" />}
              </div>
            </motion.div>
          ) : null}
        </AnimatePresence>
      </div>
      {complete ? (
        <motion.div initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} className="mt-2 flex items-center gap-1">
          <IconButton size="small" icon={RiThumbUpLine} aria-label="Like image" className="size-7 border-0 bg-transparent shadow-none" onClick={() => onToast?.("Thanks for the feedback")} />
          <IconButton size="small" icon={RiThumbDownLine} aria-label="Dislike image" className="size-7 border-0 bg-transparent shadow-none" onClick={() => onToast?.("Feedback recorded")} />
          <IconButton size="small" icon={copied ? RiCheckLine : RiFileCopyLine} aria-label={copied ? "Prompt copied" : "Copy prompt"} className="size-7 border-0 bg-transparent shadow-none" onClick={copyPrompt} />
        </motion.div>
      ) : null}
    </motion.div>
  );
}

"use client";

import { useEffect, useState, type ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { RiCheckLine, RiFileCopyLine, RiThumbDownLine, RiThumbUpLine } from "@remixicon/react";
import { IconButton } from "@/components/base/buttons/icon-button";

export interface GenerationFrameProps {
  generationKey: number;
  duration?: number;
  onComplete?: () => void;
  onToast?: (message: string) => void;
  /** Licensed artwork URL supplied by the registry consumer. */
  artworkSrc?: string;
  /** Render slot for licensed artwork or a framework-specific image component. */
  renderArtwork?: () => ReactNode;
  generatedImageLabel?: string;
}

const PULSE_DOTS = [
  { count: 14, radius: 27, size: 3 },
  { count: 22, radius: 41, size: 3.5 },
  { count: 28, radius: 54, size: 2.5 },
].flatMap(({ count, radius, size }, ring) => Array.from({ length: count }, (_, index) => {
  const angle = (index / count) * Math.PI * 2 - Math.PI / 2;
  return {
    delay: -(index / count) * 1.8 - ring * 0.14,
    size,
    x: Math.cos(angle) * radius,
    y: Math.sin(angle) * radius,
  };
}));

function PulsatingLoader({ remaining }: { remaining: number }) {
  return (
    <div className="absolute inset-0 flex flex-col justify-end p-4">
      <div aria-hidden className="absolute top-[46%] left-1/2 size-32 -translate-x-1/2 -translate-y-1/2">
        {PULSE_DOTS.map((dot, index) => (
          <span
            key={index}
            className="image-generation-pulse-dot absolute rounded-full bg-text-primary"
            style={{
              width: `${dot.size}px`,
              height: `${dot.size}px`,
              left: `${(64 + dot.x - dot.size / 2).toFixed(4)}px`,
              top: `${(64 + dot.y - dot.size / 2).toFixed(4)}px`,
              animationDelay: `${dot.delay.toFixed(5)}s`,
            }}
          />
        ))}
      </div>
      <div className="flex items-center justify-between gap-3 text-body-medium text-text-secondary">
        <span>Generating image</span>
        <span aria-label={`${remaining} second${remaining === 1 ? "" : "s"} remaining`} className="tabular-nums">{remaining} s</span>
      </div>
    </div>
  );
}

export function GenerationFrame({
  generationKey,
  duration = 10,
  onComplete,
  onToast,
  artworkSrc,
  renderArtwork,
  generatedImageLabel = "Vintage editorial illustration of Lionel Messi dribbling in Argentina's home kit against a blue background",
}: GenerationFrameProps) {
  const reducedMotion = useReducedMotion();
  const [remaining, setRemaining] = useState(duration);
  const [complete, setComplete] = useState(false);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    setRemaining(duration);
    setComplete(false);
    setCopied(false);
    if (reducedMotion || duration <= 0) {
      setComplete(true);
      onComplete?.();
      return;
    }
    const startedAt = Date.now();
    const timer = window.setInterval(() => {
      const next = Math.max(0, Math.ceil(duration - (Date.now() - startedAt) / 1000));
      setRemaining(next);
      if (next === 0) {
        window.clearInterval(timer);
        setComplete(true);
        onComplete?.();
      }
    }, 100);
    return () => window.clearInterval(timer);
  }, [duration, generationKey, onComplete, reducedMotion]);

  const copyPrompt = async () => {
    const text = "Create a vintage editorial illustration of Lionel Messi dribbling in Argentina's home kit against a blue background.";
    try { await navigator.clipboard.writeText(text); } catch { /* Clipboard may be unavailable in embedded previews. */ }
    setCopied(true);
    onToast?.("Prompt copied");
    window.setTimeout(() => setCopied(false), 1800);
  };

  return (
    <motion.div
      key={generationKey}
      initial={reducedMotion ? false : { height: 0, opacity: 0 }}
      animate={{ height: "auto", opacity: 1 }}
      transition={{ height: { duration: 0.52, ease: [0.22, 1, 0.36, 1] }, opacity: { duration: 0.22 } }}
      className="w-[200px] overflow-hidden"
    >
      <div className="relative aspect-[4/5] overflow-hidden rounded-2xl bg-background-tertiary-default shadow-sm" aria-label={complete ? "Generated image" : "Generating image"}>
        {!complete ? <PulsatingLoader remaining={remaining} /> : null}
        <AnimatePresence>
          {complete ? (
            <motion.div
              initial={reducedMotion ? false : { clipPath: "circle(0% at 50% 50%)", filter: "blur(8px)" }}
              animate={{ clipPath: "circle(76% at 50% 50%)", filter: "blur(0px)" }}
              transition={{ duration: reducedMotion ? 0 : 0.9, ease: [0.22, 1, 0.36, 1] }}
              className="absolute inset-0"
            >
              <div role="img" aria-label={generatedImageLabel} className="size-full">
                {renderArtwork ? renderArtwork() : <img src={artworkSrc ?? "/ai-image-generation/messi.jpg"} alt="" className="size-full object-cover outline -outline-offset-1 outline-black/10 dark:outline-white/10" />}
              </div>
            </motion.div>
          ) : null}
        </AnimatePresence>
      </div>
      {complete ? (
        <motion.div initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} className="mt-2 flex items-center gap-1">
          <IconButton size="small" icon={RiThumbUpLine} aria-label="Like image" className="size-7 border-0 bg-transparent shadow-none" onClick={() => onToast?.("Thanks for the feedback")} />
          <IconButton size="small" icon={RiThumbDownLine} aria-label="Dislike image" className="size-7 border-0 bg-transparent shadow-none" onClick={() => onToast?.("Feedback recorded")} />
          <IconButton size="small" icon={copied ? RiCheckLine : RiFileCopyLine} aria-label={copied ? "Prompt copied" : "Copy prompt"} className="size-7 border-0 bg-transparent shadow-none" onClick={copyPrompt} />
        </motion.div>
      ) : null}
    </motion.div>
  );
}

"use client";

import { useState, type ReactNode } from "react";
import { AnimatePresence, motion } from "motion/react";
import { Dialog, Modal, ModalOverlay } from "react-aria-components";
import {
  RiAddLine,
  RiCloseLine,
  RiDownloadLine,
  RiExpandDiagonalLine,
  RiGalleryLine,
  RiMore2Line,
  RiPaletteLine,
  RiRefreshLine,
  RiSideBarFill,
} from "@remixicon/react";
import { IconButton } from "@/components/base/buttons/icon-button";
import { Dropdown, DropdownItem, DropdownPopover, DropdownTrigger } from "@/components/base/dropdown/dropdown";
import { cx } from "@/utils/cx";
import { type ArtworkPalette } from "./artwork";

export interface GalleryItem {
  id: string;
  title: string;
  aspect: "square" | "portrait" | "tall" | "landscape";
  variant: number;
  generated?: boolean;
}

export interface ImageGalleryProps {
  items: readonly GalleryItem[];
  palettes: readonly ArtworkPalette[];
  styleLabels?: readonly string[];
  onNewGeneration?: () => void;
  onToast?: (message: string) => void;
  className?: string;
  mobile?: boolean;
  panelWidth?: number;
  artworkSrcById?: Partial<Record<string, string>>;
  renderArtwork?: (item: GalleryItem) => ReactNode;
}

const aspectClasses: Record<GalleryItem["aspect"], string> = {
  square: "aspect-square",
  portrait: "aspect-[3/4]",
  tall: "aspect-[14/21]",
  landscape: "aspect-[4/3]",
};

function GalleryArtwork({ item, className, artworkSrc, renderArtwork }: { item: GalleryItem; className?: string; artworkSrc?: string; renderArtwork?: (item: GalleryItem) => ReactNode }) {
  if (renderArtwork) return <div role="img" aria-label={item.title} className={className}>{renderArtwork(item)}</div>;
  return <img src={artworkSrc ?? `/ai-image-generation/${item.id}.jpg`} alt={item.title} className={cx("object-cover outline -outline-offset-1 outline-black/10 dark:outline-white/10", className)} />;
}

function GalleryTile({ item, onEnlarge, onToast, artworkSrc, renderArtwork }: { item: GalleryItem; onEnlarge: () => void; onToast?: (message: string) => void; artworkSrc?: string; renderArtwork?: (item: GalleryItem) => ReactNode }) {
  return (
    <figure className={cx("group relative mb-2 break-inside-avoid overflow-hidden rounded-xl bg-background-tertiary-default", aspectClasses[item.aspect])}>
      <GalleryArtwork item={item} artworkSrc={artworkSrc} renderArtwork={renderArtwork} className="size-full transition-transform duration-500 ease-out group-hover:scale-[1.035]" />
      <button type="button" aria-label={`Enlarge ${item.title}`} onClick={onEnlarge} className="absolute inset-0 cursor-zoom-in rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-border-focus-ring" />
      <div className="absolute right-1.5 bottom-1.5 flex translate-y-1 gap-1 opacity-0 transition-[opacity,transform] duration-200 group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100">
        <button type="button" aria-label={`Download ${item.title}`} onClick={() => onToast?.("Download prepared")} className="rounded-md bg-neutral-950/45 p-1 text-white backdrop-blur-sm transition-colors hover:bg-neutral-950/65"><RiDownloadLine className="size-4" aria-hidden /></button>
        <Dropdown>
          <DropdownTrigger aria-label={`More actions for ${item.title}`} className="rounded-md bg-neutral-950/45 p-1 text-white backdrop-blur-sm transition-colors hover:bg-neutral-950/65"><RiMore2Line className="size-4" aria-hidden /></DropdownTrigger>
          <DropdownPopover aria-label={`Actions for ${item.title}`} placement="top end" offset={4} className="w-32 p-1">
            <DropdownItem className="gap-1.5 px-2 py-1.5" onSelect={() => onToast?.("Generation duplicated")}><RiRefreshLine className="size-4" aria-hidden />Remix</DropdownItem>
            <DropdownItem className="gap-1.5 px-2 py-1.5" onSelect={() => onToast?.("Prompt copied")}>Copy prompt</DropdownItem>
          </DropdownPopover>
        </Dropdown>
      </div>
      <figcaption className="sr-only">{item.title}</figcaption>
    </figure>
  );
}

export function ImageGallery({ items, palettes, styleLabels = [], onNewGeneration, onToast, className, mobile = false, panelWidth = 410, artworkSrcById, renderArtwork }: ImageGalleryProps) {
  const [view, setView] = useState<"gallery" | "styles">("gallery");
  const [expanded, setExpanded] = useState(false);
  const [hidden, setHidden] = useState(false);
  const [selected, setSelected] = useState<GalleryItem | null>(null);
  void palettes;

  if (hidden) {
    return mobile ? null : <IconButton icon={RiSideBarFill} aria-label="Open image panel" onClick={() => setHidden(false)} className="absolute top-3 right-3 z-20" />;
  }

  return (
    <motion.aside layout style={expanded || mobile ? undefined : { width: panelWidth }} className={cx("relative h-full min-h-0 shrink-0 flex-col gap-2.5 overflow-hidden pt-2", mobile ? "flex w-full" : "hidden xl:flex", expanded && !mobile && "w-[calc(100%-292px)]", className)} aria-label="Image generations">
      <header className="flex h-10 shrink-0 items-center justify-between border-b border-border-button-default pb-2">
        <div role="group" aria-label="Panel view" className="relative flex rounded-full bg-background-tertiary-default p-0.5">
          <motion.span layoutId="gallery-tab" className={cx("absolute inset-y-0.5 rounded-full bg-background-primary-default shadow-xs", view === "gallery" ? "left-0.5 w-[82px]" : "left-[84px] w-[72px]")} />
          <button type="button" aria-pressed={view === "gallery"} onClick={() => setView("gallery")} className="relative z-10 flex items-center gap-1 rounded-full px-2 py-[5px] text-body-2-medium text-text-primary"><RiGalleryLine className="size-[18px]" aria-hidden />Gallery</button>
          <button type="button" aria-pressed={view === "styles"} onClick={() => setView("styles")} className="relative z-10 flex items-center gap-1 rounded-full px-2 py-[5px] text-body-2-medium text-text-primary"><RiPaletteLine className="size-[18px]" aria-hidden />Styles</button>
        </div>
        <div className="flex items-center gap-1 text-foreground-icon-secondary">
          <button type="button" aria-label="New generation" onClick={onNewGeneration} className="rounded-md p-1 hover:bg-background-primary-hover"><RiAddLine className="size-4" /></button>
          {!mobile ? <button type="button" aria-label={expanded ? "Restore panel" : "Expand panel"} onClick={() => setExpanded((value) => !value)} className="rounded-md p-1 hover:bg-background-primary-hover"><RiExpandDiagonalLine className="size-4" /></button> : null}
          {!mobile ? <button type="button" aria-label="Toggle panel" onClick={() => setHidden(true)} className="rounded-md p-1 hover:bg-background-primary-hover"><RiSideBarFill className="size-4" /></button> : null}
        </div>
      </header>

      <div className="min-h-0 flex-1 overflow-y-auto pr-1 [scrollbar-width:none]">
        {view === "gallery" ? (
          <div className={cx("columns-3 gap-2", expanded && "columns-4")}>
            {items.map((item) => <GalleryTile key={item.id} item={item} onEnlarge={() => setSelected(item)} onToast={onToast} artworkSrc={artworkSrcById?.[item.id]} renderArtwork={renderArtwork} />)}
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-2 p-1">
            {styleLabels.map((style, index) => (
              <button key={style} type="button" onClick={() => onToast?.(`${style} selected`)} className="group overflow-hidden rounded-xl border border-border-button-default bg-background-primary-default text-left shadow-xs">
                <img src={`/ai-image-generation/${items[(index + 1) % items.length]?.id ?? "messi"}.jpg`} alt="" className="aspect-[4/3] w-full object-cover outline -outline-offset-1 outline-black/10 dark:outline-white/10" />
                <span className="block px-2 py-2 text-body-2-medium text-text-primary">{style}</span>
              </button>
            ))}
          </div>
        )}
      </div>

      <AnimatePresence>
        {selected ? (
          <ModalOverlay isOpen isDismissable onOpenChange={(open) => { if (!open) setSelected(null); }} className="fixed inset-0 z-50 grid place-items-center bg-neutral-950/70 p-6 backdrop-blur-sm data-[entering]:opacity-0 data-[exiting]:opacity-0">
            <Modal className="max-h-[88vh] max-w-3xl overflow-hidden rounded-2xl bg-background-primary-default shadow-xl data-[entering]:scale-95 data-[entering]:opacity-0 data-[exiting]:scale-95 data-[exiting]:opacity-0">
              <Dialog aria-label={selected.title} className="relative outline-none">
                <GalleryArtwork item={selected} artworkSrc={artworkSrcById?.[selected.id]} renderArtwork={renderArtwork} className="max-h-[80vh] w-auto max-w-[85vw]" />
                <IconButton icon={RiCloseLine} aria-label="Close preview" onClick={() => setSelected(null)} className="absolute top-3 right-3" />
              </Dialog>
            </Modal>
          </ModalOverlay>
        ) : null}
      </AnimatePresence>
    </motion.aside>
  );
}