"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-fal/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 FalIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    fill="currentColor"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <title>Fal.ai</title>
    <path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18L19.82 8 12 11.82 4.18 8 12 4.18zM4 9.48l7 3.5v7.84l-7-3.5V9.48zm16 0v7.84l-7 3.5v-7.84l7-3.5z" />
  </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">
            <FalIcon className="size-6" />
          </div>
        </div>
      </EmptyMedia>
      <EmptyTitle>Generate Image with Fal.ai</EmptyTitle>
      <EmptyDescription>
        This demo showcases generating images using Fal.ai's Flux model.
      </EmptyDescription>
    </EmptyHeader>
  </Empty>
);

export Example;