"use client";

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

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

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((caughtError) => {
        setError(caughtError);
        setIsLoading(false);
      });
  };

  return (
    <div className="mx-auto flex h-full w-full items-center justify-center">
      <div className="min-w-xl max-w-3xl rounded-[22px] bg-background p-1 shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_2px_-1px_rgba(0,0,0,0.08),0_12px_28px_-18px_rgba(0,0,0,0.35)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.08),0_1px_2px_-1px_rgba(0,0,0,0.45),0_14px_26px_-20px_rgba(0,0,0,0.75)]">
        <div className="flex flex-col gap-4 rounded-[16px] bg-muted/20 p-5 sm:gap-5 sm:p-6">
          <header className="space-y-3">
            <div className="-space-x-1 flex">
              <div
                className={cn(
                  "-outline-offset-1 mt-1 flex size-10 items-center justify-center rounded-full bg-white p-1 outline outline-1",
                  "shadow-[0_1px_2px_-1px_rgba(0,0,0,0.2)] outline-black/10 dark:bg-card dark:outline-white/10"
                )}
              >
                <AISDKIcon className="size-5" />
              </div>
              <div
                className={cn(
                  "-outline-offset-1 flex size-10 items-center justify-center rounded-full bg-white p-1 outline outline-1",
                  "shadow-[0_1px_2px_-1px_rgba(0,0,0,0.2)] outline-black/10 dark:bg-card dark:outline-white/10"
                )}
              >
                <ImageIcon className="size-5" />
              </div>
              <div
                className={cn(
                  "-outline-offset-1 mt-1 flex size-10 items-center justify-center rounded-full bg-white p-1 outline outline-1",
                  "shadow-[0_1px_2px_-1px_rgba(0,0,0,0.2)] outline-black/10 dark:bg-card dark:outline-white/10"
                )}
              >
                <OpenAIIcon className="size-5" />
              </div>
            </div>
            <div className="space-y-1">
              <p className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
                Pattern
              </p>
              {imageData ? (
                <h1 className="text-balance font-semibold text-xl tracking-tight sm:text-2xl">
                  {prompt}
                </h1>
              ) : (
                <h1 className="text-balance font-semibold text-xl tracking-tight sm:text-2xl">
                  Generate Image with OpenAI
                </h1>
              )}

              {imageData ? null : (
                <p className="max-w-xl text-pretty text-muted-foreground text-sm">
                  Describe an image and generate it using OpenAI's DALL-E 3
                  model.
                </p>
              )}
            </div>
          </header>

          {error && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertTitle>Error</AlertTitle>
              <AlertDescription>{error.message}</AlertDescription>
            </Alert>
          )}

          {isLoading && (
            <div className="flex items-center justify-center gap-2 rounded-xl bg-background/70 px-3 py-6 text-muted-foreground text-sm">
              <LoaderCircle className="size-4 animate-spin" />
              Generating image...
            </div>
          )}

          {imageData && (
            <div className="group relative overflow-hidden rounded-xl shadow-[0_0_0_1px_rgba(0,0,0,0.06),0_1px_2px_-1px_rgba(0,0,0,0.1)]">
              <img
                alt="Generated"
                className="-outline-offset-1 max-h-96 w-full outline outline-1 outline-black/10 dark:outline-white/10"
                height={600}
                src={imageData}
                width={800}
              />
              <div className="absolute right-3 bottom-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
                <Button
                  asChild
                  className="shadow-[0_0_0_1px_rgba(0,0,0,0.1),0_2px_6px_-1px_rgba(0,0,0,0.2)]"
                  size="sm"
                  variant="secondary"
                >
                  <a download="generated-image.png" href={imageData}>
                    <DownloadIcon className="size-4" />
                    Download
                  </a>
                </Button>
              </div>
            </div>
          )}

          {!imageData && (
            <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 tabular-nums">
                    {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>
      </div>
    </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 (
    <svg
      color="currentcolor"
      data-testid="geist-icon"
      height="1em"
      strokeLinejoin="round"
      viewBox="0 0 16 16"
      width="1em"
      {...props}
    >
      <path
        d="M2.5.5V0h1v.5a2 2 0 002 2H6v1h-.5a2 2 0 00-2 2V6h-1v-.5a2 2 0 00-2-2H0v-1h.5a2 2 0 002-2zM14.5 4.5V5h-1v-.5a1 1 0 00-1-1H12v-1h.5a1 1 0 001-1V1h1v.5a1 1 0 001 1h.5v1h-.5a1 1 0 00-1 1zM8.407 4.93L8.5 4h1l.093.93a5 5 0 004.478 4.477L15 9.5v1l-.93.093a5 5 0 00-4.477 4.478L9.5 16h-1l-.093-.93a5 5 0 00-4.478-4.477L3 10.5v-1l.93-.093A5 5 0 008.406 4.93z"
        fill="currentColor"
      />
    </svg>
  );
}

export Example;