"use client";

import { AlertCircle, ArrowUpIcon, ImageIcon } from "lucide-react";
import type { SVGProps } from "react";
import { useState } from "react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group";
import { Separator } from "@/components/ui/separator";

const Example = () => {
  const [prompt, setPrompt] = useState("A serene mountain landscape");
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  const [imageData, setImageData] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!prompt.trim()) return;

    setIsLoading(true);
    setError(null);

    await fetch("/view/basics-generate-image-openai/api/generate-image", {
      method: "POST",
      body: JSON.stringify({
        prompt,
      }),
    })
      .then((response) => {
        response.json().then((json) => {
          if (json.success) {
            setImageData(json.imageData);
          } else {
            setError(new Error(json.error || "Failed to generate image"));
          }
          setIsLoading(false);
        });
      })
      .catch((error) => {
        setError(error);
        setIsLoading(false);
      });
  };

  return (
    <div className="mx-auto flex w-full max-w-2xl flex-col gap-4">
      {error && (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Error</AlertTitle>
          <AlertDescription>{error.message}</AlertDescription>
        </Alert>
      )}
      <EmptyState />

      {isLoading && (
        <div className="text-center text-muted-foreground">
          Generating image...
        </div>
      )}

      {imageData && (
        <div className="mt-4">
          <img
            alt="Generated"
            className="w-full rounded-lg border"
            height={600}
            src={imageData}
            width={800}
          />
        </div>
      )}
      <form onSubmit={handleSubmit}>
        <InputGroup className="bg-background">
          <InputGroupTextarea
            disabled={isLoading}
            onChange={(e) => setPrompt(e.target.value)}
            placeholder="Describe the image you want to generate..."
            value={prompt}
          />
          <InputGroupAddon align="block-end">
            <InputGroupText className="ml-auto">
              {prompt.length}/4000
            </InputGroupText>
            <Separator className="!h-4" orientation="vertical" />
            <InputGroupButton
              className="rounded-full"
              disabled={!prompt.trim() || isLoading}
              size="icon-xs"
              type="submit"
              variant="default"
            >
              <ArrowUpIcon />
              <span className="sr-only">Generate</span>
            </InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      </form>
    </div>
  );
};

const OpenAIIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    className="dark:fill-white"
    preserveAspectRatio="xMidYMid"
    viewBox="0 0 256 260"
  >
    <title>OpenAI</title>
    <path d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z" />
  </svg>
);

function AISDKIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <div className="text-zinc-800 dark:text-zinc-100">
      <svg
        aria-label="AI SDK icon"
        data-testid="multi-agent-icon"
        height="16"
        strokeLinejoin="round"
        style={{ color: "currentcolor" }}
        viewBox="0 0 16 16"
        width="16"
        {...props}
      >
        <title>AI SDK icon</title>
        <path
          d="M2.5 0.5V0H3.5V0.5C3.5 1.60457 4.39543 2.5 5.5 2.5H6V3V3.5H5.5C4.39543 3.5 3.5 4.39543 3.5 5.5V6H3H2.5V5.5C2.5 4.39543 1.60457 3.5 0.5 3.5H0V3V2.5H0.5C1.60457 2.5 2.5 1.60457 2.5 0.5Z"
          fill="currentColor"
        />
        <path
          d="M14.5 4.5V5H13.5V4.5C13.5 3.94772 13.0523 3.5 12.5 3.5H12V3V2.5H12.5C13.0523 2.5 13.5 2.05228 13.5 1.5V1H14H14.5V1.5C14.5 2.05228 14.9477 2.5 15.5 2.5H16V3V3.5H15.5C14.9477 3.5 14.5 3.94772 14.5 4.5Z"
          fill="currentColor"
        />
        <path
          d="M8.40706 4.92939L8.5 4H9.5L9.59294 4.92939C9.82973 7.29734 11.7027 9.17027 14.0706 9.40706L15 9.5V10.5L14.0706 10.5929C11.7027 10.8297 9.82973 12.7027 9.59294 15.0706L9.5 16H8.5L8.40706 15.0706C8.17027 12.7027 6.29734 10.8297 3.92939 10.5929L3 10.5V9.5L3.92939 9.40706C6.29734 9.17027 8.17027 7.29734 8.40706 4.92939Z"
          fill="currentColor"
        />
      </svg>
    </div>
  );
}

const EmptyState = () => (
  <Empty className="mx-auto mt-6 max-w-2xl">
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <div className="-space-x-1 flex">
          <div className="mt-1 flex size-12 items-center justify-center rounded-full border bg-white p-1 shadow-sm dark:bg-card">
            <AISDKIcon className="size-6" />
          </div>
          <div className="flex size-12 items-center justify-center rounded-full border bg-white p-1 shadow-sm dark:bg-card">
            <ImageIcon className="size-6" />
          </div>
          <div className="mt-1 flex size-12 items-center justify-center rounded-full border bg-white p-1 shadow-sm dark:bg-card">
            <OpenAIIcon className="size-6" />
          </div>
        </div>
      </EmptyMedia>
      <EmptyTitle>Generate Image with OpenAI</EmptyTitle>
      <EmptyDescription>
        This demo showcases generating images using OpenAI's DALL-E 3.
      </EmptyDescription>
    </EmptyHeader>
  </Empty>
);

export Example;