"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-google/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"
                )}
              >
                <GoogleIcon 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 Google Gemini
                </h1>
              )}
              {imageData ? null : (
                <p className="max-w-xl text-pretty text-muted-foreground text-sm">
                  Generate an image from text with Google's Gemini image 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 GoogleIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    aria-hidden="true"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <title>Google</title>
    <path
      d="M21.8 12.23c0-.78-.07-1.53-.2-2.23H12v4.22h5.48a4.69 4.69 0 0 1-2.03 3.08v2.56h3.28c1.92-1.77 3.07-4.39 3.07-7.63Z"
      fill="#4285F4"
    />
    <path
      d="M12 22c2.7 0 4.97-.9 6.63-2.44l-3.28-2.56c-.91.61-2.08.97-3.35.97-2.58 0-4.76-1.74-5.54-4.07H3.08v2.63A10 10 0 0 0 12 22Z"
      fill="#34A853"
    />
    <path
      d="M6.46 13.9a5.99 5.99 0 0 1 0-3.8V7.47H3.08a10 10 0 0 0 0 9.06l3.38-2.63Z"
      fill="#FBBC05"
    />
    <path
      d="M12 6.03c1.47 0 2.79.5 3.83 1.48l2.87-2.87A9.97 9.97 0 0 0 12 2 10 10 0 0 0 3.08 7.47l3.38 2.63c.78-2.33 2.96-4.07 5.54-4.07Z"
      fill="#EA4335"
    />
  </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;