import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { PageShell } from "@/components/page-shell";
import { toolSeo } from "@/lib/tool-seo";

export const Route = createFileRoute("/tools/images")({
  head: () =>
    toolSeo({
      path: "/tools/images",
      title: "AI Image Generator — Realistic African Portraits & Scenes | Gatavase AI",
      shortTitle: "AI Image Generator — Gatavase AI Creative",
      description:
        "Generate realistic pictures of people, characters and scenes with Gatavase AI Creative. Built in Uganda by Gatavase Corporation, our image generator is tuned for Ugandan and African storytellers — cinematic portraits of entrepreneurs in Kampala offices, vibrant market scenes, family celebrations, sports moments, cultural motifs and editorial covers. Describe what you see in your head, choose the mood, and produce publication-ready visuals for blogs, campaigns, book covers, presentations and social media in seconds.",
      ogDescription: "Realistic AI portraits, characters and scenes with a Ugandan lens.",
      category: "MultimediaApplication",
    }),
  component: ImagesPage,
});

function ImagesPage() {
  const [prompt, setPrompt] = useState("A confident young Ugandan entrepreneur in her Kampala office, golden hour lighting, cinematic");
  const [url, setUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const run = async () => {
    setLoading(true); setError(null); setUrl(null);
    try {
      const { generateImage } = await import("@/lib/ai.functions");
      const res = await generateImage({ data: { prompt } });
      setUrl(res.url);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to generate image");
    } finally { setLoading(false); }
  };

  return (
    <PageShell eyebrow="Multimedia · Images" title="Pictures of People" lead="Generate realistic portraits, characters and scenes with a Ugandan lens.">
      <div className="grid gap-6 lg:grid-cols-2">
        <div className="glow-card rounded-2xl p-5">
          <label className="mb-2 block text-sm font-medium">Describe your image</label>
          <textarea rows={10} value={prompt} onChange={(e) => setPrompt(e.target.value)}
            className="w-full resize-none rounded-lg border border-border bg-input px-4 py-3 text-sm outline-none focus:border-primary" />
          <button onClick={run} disabled={loading || !prompt.trim()}
            className="mt-3 w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground disabled:opacity-50">
            {loading ? "Painting…" : "Generate image"}
          </button>
          {error && <div className="mt-3 rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive">{error}</div>}
        </div>
        <div className="glow-card flex min-h-[400px] items-center justify-center rounded-2xl p-5">
          {url ? (
            <div className="w-full">
              <img src={url} alt="AI generated" className="w-full rounded-lg" />
              <a href={url} download="gatavase-image.png" className="mt-3 inline-block text-sm text-primary hover:underline">Download</a>
            </div>
          ) : (
            <div className="text-sm text-muted-foreground">Your image will appear here.</div>
          )}
        </div>
      </div>
    </PageShell>
  );
}