"use client";

import { useCallback, useMemo, useState } from "react";
import { Sparkles, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ItemImageCapture, ProcessedImage } from "./ItemImageCapture";

interface ItemAiAssistantProps {
  locale: string;
  categories: string[];
  serverOptions: string[];
  onGenerated: (result: { json: unknown; prefill: ItemAiPrefill }) => void;
}

export interface ItemAiPrefill {
  name?: string;
  description?: string;
  category?: string;
  rarity?: string | null;
  servers?: string[] | string;
  tags?: string[] | string;
  metadata?: Record<string, unknown>;
}

export function ItemAiAssistant({
  locale,
  categories,
  serverOptions,
  onGenerated,
}: ItemAiAssistantProps) {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [scope, setScope] = useState<"global" | "server">("global");
  const [server, setServer] = useState<string>(serverOptions[0] ?? "");
  const [images, setImages] = useState<ProcessedImage[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [rawJson, setRawJson] = useState<string | null>(null);

  const disabled = useMemo(() => !name.trim() || !description.trim(), [name, description]);

  const handleGenerate = useCallback(async () => {
    if (disabled || loading) return;
    setLoading(true);
    setError(null);

    try {
      const response = await fetch("/api/admin/items/analyze", {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          locale,
          name,
          description,
          scope,
          server: scope === "server" ? server : null,
          categories,
          servers: serverOptions,
          images: images.map((image) => image.dataUrl),
        }),
      });

      if (!response.ok) {
        const data = await response.json().catch(() => null);
        throw new Error(data?.error || "Falha na análise com IA.");
      }

      const data = await response.json();
      const structure = data?.structure ?? data;
      const columns = structure?.columns;

      setRawJson(JSON.stringify(structure, null, 2));

      const prefill: ItemAiPrefill = {
        name: typeof columns?.name === "string" ? columns.name : undefined,
        description: typeof columns?.description === "string" ? columns.description : undefined,
        metadata: typeof columns === "object" && columns !== null ? columns : undefined,
      };

      if (columns) {
        if (typeof columns.category === "string") {
          prefill.category = columns.category;
        }
        if (Array.isArray(columns.servers)) {
          prefill.servers = columns.servers as string[];
        }
        if (typeof columns.servers === "string") {
          prefill.servers = columns.servers;
        }
        if (Array.isArray(columns.tags)) {
          prefill.tags = columns.tags as string[];
        }
        if (typeof columns.tags === "string") {
          prefill.tags = columns.tags;
        }
        if (columns.rarity && typeof columns.rarity === "string") {
          prefill.rarity = columns.rarity;
        }
      }

      onGenerated({ json: structure, prefill });
    } catch (err) {
      console.error(err);
      setError(err instanceof Error ? err.message : "Erro ao processar análise de IA.");
    } finally {
      setLoading(false);
    }
  }, [
    categories,
    description,
    disabled,
    images,
    locale,
    loading,
    name,
    onGenerated,
    scope,
    server,
    serverOptions,
  ]);

  return (
    <section className="space-y-6">
      <div className="flex items-start justify-between gap-4">
        <div className="space-y-2">
          <h2 className="text-2xl font-semibold flex items-center gap-2">
            <Sparkles className="h-5 w-5 text-primary" />
            Assistente IA para registro de item
          </h2>
          <p className="max-w-3xl text-sm text-muted-foreground">
            Cole prints e descreva o item. A IA vai sugerir a tabela, campos e metadados. Você pode ajustar os dados
            antes de salvar.
          </p>
        </div>
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          Até 2 imagens · Compressão automática · Suporte a Ctrl+V
        </div>
      </div>

      <div className="grid gap-6 lg:grid-cols-[1.1fr,0.9fr]">
        <div className="space-y-5">
          <div className="grid gap-3 md:grid-cols-2">
            <div className="space-y-2">
              <label className="text-sm font-medium">Nome do item</label>
              <Input
                value={name}
                onChange={(event) => setName(event.target.value)}
                placeholder="Ex.: Final Fate"
              />
            </div>

            <div className="space-y-2">
              <label className="text-sm font-medium">Escopo</label>
              <Select value={scope} onValueChange={(value: "global" | "server") => setScope(value)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="global">Global</SelectItem>
                  <SelectItem value="server">Específico de servidor</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          {scope === "server" && (
            <div className="space-y-2">
              <label className="text-sm font-medium">Servidor alvo</label>
              <Select value={server} onValueChange={setServer}>
                <SelectTrigger>
                  <SelectValue placeholder="Selecione o servidor" />
                </SelectTrigger>
                <SelectContent>
                  {serverOptions.map((option) => (
                    <SelectItem key={option} value={option}>
                      {option}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          )}

          <div className="space-y-2">
            <label className="text-sm font-medium">Descrição detalhada para a IA</label>
            <Textarea
              value={description}
              onChange={(event) => setDescription(event.target.value)}
              placeholder="Cole aqui todo o texto do item (atributos, requisitos, efeitos, etc.)"
              rows={6}
            />
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">Prints / evidências visuais</label>
            <ItemImageCapture onImagesChange={setImages} />
          </div>

          {error && (
            <div className="rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
              {error}
            </div>
          )}

          <div className="flex flex-wrap gap-2">
            <Button type="button" onClick={handleGenerate} disabled={disabled || loading}>
              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Gerar com IA
            </Button>
            <p className="text-xs text-muted-foreground">
              A IA retornará um JSON com sugestões de campos. Eles serão aplicados automaticamente no formulário.
            </p>
          </div>
        </div>

        <Card className="min-h-full">
          <CardHeader>
            <CardTitle className="text-sm">Prévia da resposta</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-xs text-muted-foreground">
            {rawJson ? (
              <pre className="max-h-[420px] overflow-auto rounded-md border bg-muted/40 p-3">
                {rawJson}
              </pre>
            ) : (
              <p>
                Execute a análise para visualizar o JSON sugerido. Ele será usado para preencher automaticamente os
                campos do formulário.
              </p>
            )}
          </CardContent>
        </Card>
      </div>
    </section>
  );
}