import { useState, useRef, useCallback } from "react";

const API_URL = "https://api.anthropic.com/v1/messages";

const STYLES = [
  { id: "luxury", label: "🏙️ Luxury Modern", desc: "Blau-grau, LED, Marmor" },
  { id: "nordic", label: "🪵 Nordic Minimal", desc: "Hell, Holz, clean" },
  { id: "industrial", label: "🏭 Industrial", desc: "Beton, Stahl, roh" },
  { id: "warm", label: "🕯️ Warm Cozy", desc: "Erdtöne, weich" },
  { id: "futuristic", label: "🚀 Futuristic", desc: "Dunkel, Neon, High-Tech" },
];

const OUTPUTS = [
  { id: "chatgpt", label: "ChatGPT / DALL·E 3" },
  { id: "midjourney", label: "Midjourney v6.1" },
  { id: "firefly", label: "Adobe Firefly" },
  { id: "stablediffusion", label: "Stable Diffusion" },
  { id: "gemini", label: "Gemini" },
  { id: "all", label: "🔄 Alle" },
];

const FORMAT_LABELS = {
  chatgpt: "ChatGPT / DALL·E 3",
  midjourney: "Midjourney v6.1",
  firefly: "Adobe Firefly",
  stablediffusion: "Stable Diffusion XL",
  gemini: "Google Gemini",
};

const FORMAT_COLORS = {
  chatgpt: "#10a37f",
  midjourney: "#7c5cfc",
  firefly: "#ff4444",
  stablediffusion: "#f5a623",
  gemini: "#4285f4",
};

// Where each AI can be opened with prefilled text
const AI_URLS = {
  chatgpt: (prompt) => `https://chatgpt.com/?q=${encodeURIComponent(prompt)}`,
  gemini: (prompt) => `https://gemini.google.com/app?q=${encodeURIComponent(prompt)}`,
  firefly: (_) => `https://firefly.adobe.com/generate/images`,
  midjourney: (_) => `https://www.midjourney.com/imagine`,
  stablediffusion: (_) => `https://stablediffusionweb.com/`,
};

const AI_OPEN_NOTES = {
  chatgpt: "Prompt wird vorausgefüllt — Grundriss noch anhängen",
  gemini: "Prompt wird vorausgefüllt — Grundriss noch anhängen",
  firefly: "Firefly öffnen — Prompt kopieren & Grundriss hochladen",
  midjourney: "Midjourney öffnen — Prompt ins /imagine Feld einfügen",
  stablediffusion: "Stable Diffusion öffnen — Prompt einfügen",
};

const STYLE_PROMPTS = {
  luxury: "elegant blue-grey color palette, cinematic ambient lighting, softly glowing LED accents, high-end modern furniture, marble and glass surfaces",
  nordic: "bright airy Scandinavian palette, natural wood textures, minimalist clean lines, warm white lighting, linen and oak materials",
  industrial: "exposed concrete walls, raw steel elements, Edison bulb lighting, dark matte finishes, urban loft atmosphere",
  warm: "warm earth tones, terracotta and cream palette, soft candlelike lighting, plush textiles, hygge atmosphere",
  futuristic: "dark high-tech interior, neon accent lighting, glossy surfaces, smart home elements, cyberpunk-inspired palette",
};

export default function FloorplanPromptGen() {
  const [image, setImage] = useState(null);
  const [selectedStyle, setSelectedStyle] = useState("luxury");
  const [selectedOutput, setSelectedOutput] = useState("chatgpt");
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState(null);
  const [error, setError] = useState(null);
  const [dragging, setDragging] = useState(false);
  const [copied, setCopied] = useState(null);
  const fileInputRef = useRef();

  const handleFile = useCallback(async (file) => {
    if (!file || !file.type.startsWith("image/")) return;
    const dataUrl = await new Promise(res => {
      const r = new FileReader();
      r.onload = () => res(r.result);
      r.readAsDataURL(file);
    });
    setImage({ file, dataUrl, base64: dataUrl.split(",")[1], mediaType: file.type });
    setResults(null);
    setError(null);
  }, []);

  const onDrop = (e) => {
    e.preventDefault(); setDragging(false);
    if (e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]);
  };

  const generate = async () => {
    if (!image) return;
    setLoading(true); setError(null); setResults(null);

    const targets = selectedOutput === "all"
      ? ["chatgpt", "gemini", "midjourney", "firefly", "stablediffusion"]
      : [selectedOutput];

    const styleDesc = STYLE_PROMPTS[selectedStyle];
    const styleName = STYLES.find(s => s.id === selectedStyle)?.label || selectedStyle;

    const system = `Du bist ein Experte für 3D-Architektur-Visualisierung und Prompt-Engineering. Analysiere Grundrisse und generiere präzise Bildgenerierungs-Prompts. Antworte NUR mit einem JSON-Objekt, ohne Markdown-Backticks oder anderen Text.`;

    const user = `Analysiere diesen Grundriss und erstelle optimierte Prompts für ein ultra-detailliertes 3D-Architektur-Floorplan-Rendering.

Gewählter Stil: ${styleName}
Stil-Eigenschaften: ${styleDesc}

Erkenne aus dem Grundriss alle Räume, Größen und besondere Merkmale.

Generiere folgendes JSON:
{
  "rooms_detected": ["Liste der erkannten Räume mit m²"],
  "layout_notes": "kurze Beschreibung des Layouts",
  "prompts": {
    ${targets.map(t => `"${t}": "vollständiger Prompt für ${FORMAT_LABELS[t]}"`).join(",\n    ")}
  }
}

Prompt-Anforderungen:
- Enthält "ultra-detailed 3D architectural floor plan rendering"
- Isometrische Draufsicht von oben
- Alle erkannten Räume mit korrekter Möblierung erwähnen
- Stil: ${styleDesc}
- Fotorealistisch, hochdetailliert

Format-spezifisch:
- chatgpt: Natürliche Sprache, sehr detailliert, alle Räume aufgelistet
- gemini: Natürliche Sprache, strukturiert, präzise
- midjourney: Englisch, Tags-Stil, endet mit --ar 9:16 --v 6.1 --stylize 300
- firefly: Englisch, Satzform, Firefly-optimiert
- stablediffusion: Englisch, (tag:1.2) Gewichtung, nach ### negative prompt`;

    try {
      const resp = await fetch(API_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          model: "claude-sonnet-4-20250514",
          max_tokens: 4000,
          system,
          messages: [{
            role: "user",
            content: [
              { type: "image", source: { type: "base64", media_type: image.mediaType, data: image.base64 } },
              { type: "text", text: user }
            ]
          }]
        })
      });
      if (!resp.ok) throw new Error(`API Fehler ${resp.status}`);
      const data = await resp.json();
      const text = data.content.map(i => i.text || "").join("");
      const clean = text.replace(/```json|```/g, "").trim();
      const parsed = JSON.parse(clean);
      setResults({ ...parsed, targets });
    } catch (e) {
      setError(e.message);
    } finally {
      setLoading(false);
    }
  };

  const copy = (text, id) => {
    navigator.clipboard.writeText(text).then(() => {
      setCopied(id); setTimeout(() => setCopied(null), 2000);
    });
  };

  const openInAI = (target, prompt) => {
    const urlFn = AI_URLS[target];
    if (urlFn) window.open(urlFn(prompt), "_blank");
  };

  return (
    <div style={{
      minHeight: "100vh",
      background: "linear-gradient(135deg, #0d0d14 0%, #111820 50%, #0d0d14 100%)",
      color: "#e8e8f0",
      fontFamily: "'Georgia', serif",
      padding: "0 0 60px"
    }}>
      {loading && (
        <div style={{
          position: "fixed", inset: 0, background: "rgba(10,10,18,0.92)",
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          zIndex: 100, gap: 20
        }}>
          <div style={{ fontSize: 40, animation: "spin 2s linear infinite" }}>⟳</div>
          <style>{`@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}`}</style>
          <div style={{ fontFamily: "monospace", fontSize: 12, color: "#64b5f6", letterSpacing: 3 }}>GRUNDRISS WIRD ANALYSIERT</div>
        </div>
      )}
      <style>{`@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}`}</style>

      <div style={{ maxWidth: 780, margin: "0 auto", padding: "0 20px" }}>

        {/* Header */}
        <div style={{ paddingTop: 44, paddingBottom: 32, textAlign: "center" }}>
          <div style={{ fontSize: 11, fontFamily: "monospace", color: "#64b5f6", letterSpacing: 4, marginBottom: 10 }}>3D ARCHITEKTUR</div>
          <h1 style={{ fontSize: 30, fontWeight: 900, margin: 0, letterSpacing: -1, color: "#fff" }}>Floorplan Prompt Generator</h1>
          <p style={{ marginTop: 10, color: "#666", fontSize: 13, fontFamily: "monospace" }}>
            Grundriss hochladen → Stil wählen → direkt in deiner KI öffnen
          </p>
        </div>

        {/* Upload */}
        <div
          onClick={() => fileInputRef.current.click()}
          onDragOver={e => { e.preventDefault(); setDragging(true); }}
          onDragLeave={() => setDragging(false)}
          onDrop={onDrop}
          style={{
            border: `2px dashed ${dragging ? "#64b5f6" : "#2a2a40"}`,
            borderRadius: 4,
            background: dragging ? "rgba(100,181,246,0.05)" : "rgba(255,255,255,0.02)",
            padding: image ? "20px" : "52px 20px",
            textAlign: "center", cursor: "pointer", transition: "all 0.2s",
          }}
        >
          <input ref={fileInputRef} type="file" accept="image/*" style={{ display: "none" }}
            onChange={e => e.target.files[0] && handleFile(e.target.files[0])} />
          {image ? (
            <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
              <img src={image.dataUrl} alt="Grundriss" style={{ width: 120, height: 100, objectFit: "cover", border: "1px solid #2a2a40" }} />
              <div style={{ textAlign: "left" }}>
                <div style={{ fontSize: 13, color: "#64b5f6", marginBottom: 4 }}>✓ Grundriss geladen</div>
                <div style={{ fontFamily: "monospace", fontSize: 10, color: "#555" }}>{image.file.name}<br />{(image.file.size / 1024).toFixed(0)} KB</div>
                <div style={{ marginTop: 8, fontSize: 10, fontFamily: "monospace", color: "#444", textDecoration: "underline", cursor: "pointer" }}>anderen wählen</div>
              </div>
            </div>
          ) : (
            <>
              <div style={{ fontSize: 36, marginBottom: 14 }}>📐</div>
              <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 8, color: "#ccc" }}>Grundriss hier ablegen</div>
              <div style={{ fontFamily: "monospace", fontSize: 11, color: "#555" }}>Handgezeichnet oder digital · PNG / JPG</div>
            </>
          )}
        </div>

        {/* Style selector */}
        <div style={{ marginTop: 28 }}>
          <div style={{ fontFamily: "monospace", fontSize: 9, color: "#64b5f6", letterSpacing: 3, marginBottom: 12 }}>INNENRAUM-STIL</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {STYLES.map(s => (
              <button key={s.id} onClick={() => setSelectedStyle(s.id)} style={{
                display: "flex", alignItems: "center", gap: 14,
                background: selectedStyle === s.id ? "rgba(100,181,246,0.08)" : "rgba(255,255,255,0.02)",
                border: `1.5px solid ${selectedStyle === s.id ? "#64b5f6" : "#2a2a40"}`,
                color: selectedStyle === s.id ? "#e8e8f0" : "#666",
                padding: "12px 16px", cursor: "pointer", transition: "all 0.15s", textAlign: "left", borderRadius: 2,
              }}>
                <span style={{ fontSize: 16 }}>{s.label.split(" ")[0]}</span>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 2 }}>{s.label.slice(3)}</div>
                  <div style={{ fontFamily: "monospace", fontSize: 10, color: selectedStyle === s.id ? "#64b5f6" : "#444" }}>{s.desc}</div>
                </div>
                {selectedStyle === s.id && <span style={{ marginLeft: "auto", color: "#64b5f6", fontSize: 14 }}>◉</span>}
              </button>
            ))}
          </div>
        </div>

        {/* Output format */}
        <div style={{ marginTop: 24 }}>
          <div style={{ fontFamily: "monospace", fontSize: 9, color: "#64b5f6", letterSpacing: 3, marginBottom: 12 }}>ZIEL-KI</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
            {OUTPUTS.map(o => (
              <button key={o.id} onClick={() => setSelectedOutput(o.id)} style={{
                background: selectedOutput === o.id ? "rgba(124,92,252,0.1)" : "rgba(255,255,255,0.02)",
                border: `1.5px solid ${selectedOutput === o.id ? "#7c5cfc" : "#2a2a40"}`,
                color: selectedOutput === o.id ? "#c4b5fd" : "#555",
                padding: "11px 12px", fontFamily: "monospace", fontSize: 11,
                cursor: "pointer", transition: "all 0.15s", borderRadius: 2,
              }}>{o.label}</button>
            ))}
          </div>
        </div>

        {/* Generate */}
        <button onClick={generate} disabled={!image || loading} style={{
          width: "100%", marginTop: 24, padding: 18,
          background: image && !loading ? "#64b5f6" : "transparent",
          border: "2px solid #64b5f6",
          color: image && !loading ? "#0d0d14" : "#64b5f6",
          fontSize: 14, fontWeight: 800, fontFamily: "monospace",
          letterSpacing: 2, textTransform: "uppercase",
          cursor: image && !loading ? "pointer" : "not-allowed",
          transition: "all 0.2s", borderRadius: 2,
        }}>
          {loading ? "⟳ ANALYSIERE GRUNDRISS..." : "▶ PROMPT GENERIEREN"}
        </button>

        {error && (
          <div style={{ marginTop: 16, padding: "12px 16px", border: "1.5px solid #ef5350", background: "rgba(239,83,80,0.06)", fontFamily: "monospace", fontSize: 11, color: "#ef9a9a", borderRadius: 2 }}>⚠ {error}</div>
        )}

        {/* Results */}
        {results && (
          <div style={{ marginTop: 36, animation: "fadeUp 0.4s ease" }}>
            {results.rooms_detected && (
              <div style={{ border: "1px solid #2a2a40", background: "rgba(255,255,255,0.02)", padding: "16px 18px", marginBottom: 20, borderRadius: 2 }}>
                <div style={{ fontFamily: "monospace", fontSize: 9, color: "#64b5f6", letterSpacing: 2, marginBottom: 12 }}>ERKANNTE RÄUME</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {results.rooms_detected.map((r, i) => (
                    <span key={i} style={{ background: "rgba(100,181,246,0.08)", border: "1px solid #2a4060", padding: "4px 10px", fontFamily: "monospace", fontSize: 10, color: "#90caf9", borderRadius: 2 }}>{r}</span>
                  ))}
                </div>
                {results.layout_notes && (
                  <div style={{ marginTop: 12, fontFamily: "monospace", fontSize: 10, color: "#555", lineHeight: 1.6 }}>{results.layout_notes}</div>
                )}
              </div>
            )}

            <div style={{ fontFamily: "monospace", fontSize: 9, color: "#64b5f6", letterSpacing: 3, marginBottom: 14 }}>GENERIERTE PROMPTS</div>

            {results.targets.map(target => {
              const prompt = results.prompts?.[target];
              if (!prompt) return null;
              const color = FORMAT_COLORS[target] || "#64b5f6";
              const note = AI_OPEN_NOTES[target];
              return (
                <div key={target} style={{ border: "1.5px solid #2a2a40", background: "rgba(255,255,255,0.02)", marginBottom: 14, overflow: "hidden", borderRadius: 2 }}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "11px 16px", borderBottom: "1px solid #2a2a40", background: "rgba(255,255,255,0.01)", flexWrap: "wrap", gap: 8 }}>
                    <span style={{ fontFamily: "monospace", fontSize: 10, color, letterSpacing: 1.5, fontWeight: 700 }}>{FORMAT_LABELS[target]}</span>
                    <div style={{ display: "flex", gap: 8 }}>
                      <button onClick={() => copy(prompt, target)} style={{
                        background: "transparent",
                        border: `1px solid ${copied === target ? "#66bb6a" : "#2a2a40"}`,
                        color: copied === target ? "#66bb6a" : "#555",
                        fontFamily: "monospace", fontSize: 9, padding: "4px 10px",
                        cursor: "pointer", borderRadius: 2, transition: "all 0.15s"
                      }}>{copied === target ? "✓ KOPIERT" : "KOPIEREN"}</button>
                      <button onClick={() => openInAI(target, prompt)} style={{
                        background: color,
                        border: `1px solid ${color}`,
                        color: "#000",
                        fontFamily: "monospace", fontSize: 9, padding: "4px 10px",
                        cursor: "pointer", borderRadius: 2, fontWeight: 700
                      }}>↗ ÖFFNEN</button>
                    </div>
                  </div>
                  {note && (
                    <div style={{ padding: "6px 16px", background: "rgba(255,255,255,0.01)", fontFamily: "monospace", fontSize: 9, color: "#444", borderBottom: "1px solid #1a1a2e" }}>
                      ℹ️ {note}
                    </div>
                  )}
                  <div style={{ padding: "14px 16px", fontFamily: "monospace", fontSize: 11, lineHeight: 1.85, color: "#ccc", whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
                    {prompt}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}