import React, { useState, useEffect } from 'react';
import { 
  Sparkles, 
  Search, 
  Stamp, 
  BookOpen, 
  ChevronRight,
  X,
  RefreshCw,
  Box,
  Shapes,
  Type,
  PenTool,
  Maximize2,
  ZoomIn,
  RotateCcw
} from 'lucide-react';

const JADE_TYPES = [
  { id: 'hetian', name: '和田羊脂玉', desc: '温润如脂，精光内蕴', prompt: 'Mutton-fat White Jade, translucent, greasy luster' },
  { id: 'feicui', name: '翡翠冰种', desc: '澄澈如水，翠意生辉', prompt: 'Ice-type Green Jadeite, glass-like transparency' },
  { id: 'xiuyan', name: '岫岩老玉', desc: '质地朴茂，古韵悠长', prompt: 'Xiu-jade, dark green with natural stone texture' },
  { id: 'dushan', name: '独山玉', desc: '色彩斑斓，如梦似幻', prompt: 'Dushan Jade, multi-color patterns' },
  { id: 'nanred', name: '南红玛瑙', desc: '色泽鲜红，温润饱满', prompt: 'Southern Red Agate, deep solid red, semi-translucent' }
];

const JADE_SHAPES = ['山子', '牌片', '圆雕件', '手把件', '随形料', '器皿'];

const SEAL_MATERIALS = [
  { id: 'tianhuang', name: '寿山田黄', color: '#ffb300', texture: 'warm yellow honey-like stone with radish-silk veins' },
  { id: 'jixue', name: '昌化鸡血', color: '#d32f2f', texture: 'bright cinnabar red patches on grey stone base' },
  { id: 'furong', name: '寿山芙蓉', color: '#f8bbd0', texture: 'pale pink porcelain-like stone texture' },
  { id: 'qingtian', name: '青田封门', color: '#c5e1a5', texture: 'olive green semi-translucent stone' },
  { id: 'balin', name: '巴林福黄', color: '#ffd54f', texture: 'bright glassy yellow stone' },
  { id: 'kunlun', name: '昆仑冻石', color: '#e0f2f1', texture: 'crystal-like translucent white stone' },
  { id: 'yaan', name: '雅安绿', color: '#4caf50', texture: 'vibrant emerald green stone texture' },
  { id: 'chongqing', name: '重庆漆石', color: '#212121', texture: 'pitch black polished lacquer-like stone' }
];

const SEAL_FONTS = [
  { id: 'zhuanshu', name: '秦汉篆书', style: 'seal script style, rounded and balanced lines' },
  { id: 'lishu', name: '汉隶碑刻', style: 'clerical script style, flared strokes, ancient and thick' },
  { id: 'kaishu', name: '唐风楷书', style: 'regular script style, sharp and formal strokes' },
  { id: 'xingshu', name: '文人行书', style: 'running script style, fluid and elegant cursive strokes' }
];

async function generateNanoBananaImage(prompt, aspectRatio = "1:1") {
  const apiKey = ""; // Runtime auto-fill
  const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3.1-flash-image-preview:generateContent?key=${apiKey}`;
  
  const payload = {
    contents: [{
      role: 'user',
      parts: [{ text: prompt }]
    }],
    generationConfig: {
      responseModalities: ['IMAGE'],
      imageConfig: { aspectRatio: aspectRatio }
    }
  };

  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    
    if (!response.ok) throw new Error('Generation failed');
    
    const result = await response.json();
    const part = result?.candidates?.[0]?.content?.parts?.find(p => p.inlineData);
    if (part) {
      return `data:${part.inlineData.mimeType};base64,${part.inlineData.data}`;
    }
    return null;
  } catch (error) {
    console.error("Image generation error:", error);
    return null;
  }
}

export default function JadeDesignApp() {
  const [activeTab, setActiveTab] = useState('相玉定形');
  const [previewImage, setPreviewImage] = useState(null);

  return (
    <div className="flex h-screen bg-[#080807] text-[#e5e5e0] font-serif overflow-hidden select-none">
      {/* 侧边导航 - 典雅金石风格 */}
      <nav className="w-72 bg-[#0c0c0b] border-r border-[#2d2a20] flex flex-col z-10 shadow-[4px_0_24px_rgba(0,0,0,0.5)]">
        <div className="p-10">
          <div className="flex flex-col items-center gap-4 mb-2">
            <div className="w-16 h-16 border border-[#c2a47a] rotate-45 flex items-center justify-center relative group">
              <div className="absolute inset-1 border border-[#c2a47a/30] scale-90"></div>
              <span className="rotate-[-45deg] font-bold text-[#c2a47a] text-2xl tracking-tighter">玉界</span>
            </div>
            <div className="text-center">
              <h1 className="text-sm font-light tracking-[0.4em] text-[#c2a47a]">智能金石系统</h1>
              <p className="text-[9px] uppercase tracking-[0.2em] text-[#63635e] mt-1">Nano Banana Core</p>
            </div>
          </div>
        </div>

        <div className="flex-1 px-6 space-y-4">
          {[
            { id: '相玉定形', icon: <Sparkles size={18} />, sub: 'DESIGN' },
            { id: '方寸金石', icon: <Stamp size={18} />, sub: 'SEAL' }
          ].map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`w-full group flex flex-col items-start px-6 py-5 rounded-sm transition-all duration-500 border-l-2 ${
                activeTab === tab.id 
                  ? 'bg-gradient-to-r from-[#c2a47a10] to-transparent border-[#c2a47a] text-[#c2a47a]' 
                  : 'border-transparent text-[#8c8c82] hover:text-[#e5e5e0]'
              }`}
            >
              <div className="flex items-center gap-3 mb-1">
                <div className={`${activeTab === tab.id ? "text-[#c2a47a]" : "text-[#4d4d4a]"} transition-colors`}>{tab.icon}</div>
                <div className="text-sm font-medium tracking-[0.2em]">{tab.id}</div>
              </div>
              <div className="text-[10px] opacity-40 tracking-[0.3em] font-light ml-8">{tab.sub}</div>
            </button>
          ))}
        </div>

        <div className="p-8">
          <div className="border-t border-[#2d2a20] pt-6 opacity-30 text-center">
            <div className="text-[10px] tracking-widest text-[#c2a47a]">万物有灵 · 金石为开</div>
          </div>
        </div>
      </nav>

      {/* 主操作区 - 类似展厅的灯光感 */}
      <main className="flex-1 relative overflow-y-auto bg-[radial-gradient(circle_at_50%_0%,_#161614_0%,_#080807_100%)] p-12">
        {activeTab === '相玉定形' && <ModuleDesign onShowFull={setPreviewImage} />}
        {activeTab === '方寸金石' && <ModuleSeal onShowFull={setPreviewImage} />}
      </main>

      {/* 全屏大图预览 */}
      {previewImage && (
        <div 
          className="fixed inset-0 z-[100] bg-black/98 backdrop-blur-md flex items-center justify-center p-12 animate-in fade-in duration-500"
          onClick={() => setPreviewImage(null)}
        >
          <button className="absolute top-8 right-8 text-[#c2a47a] hover:scale-110 transition-transform p-2">
            <X size={32} />
          </button>
          <img 
            src={previewImage} 
            className="max-w-full max-h-full object-contain shadow-[0_0_80px_rgba(194,164,122,0.1)] border border-[#c2a47a/20] animate-in zoom-in-95 duration-700"
            alt="Preview Full"
            onClick={(e) => e.stopPropagation()}
          />
        </div>
      )}
    </div>
  );
}

function ModuleDesign({ onShowFull }) {
  const initialForm = { type: JADE_TYPES[0].name, shape: JADE_SHAPES[0], appearance: '', design: '' };
  const [formData, setFormData] = useState(initialForm);
  const [generating, setGenerating] = useState(false);
  const [imgUrl, setImgUrl] = useState(null);

  const handleReset = () => { setFormData(initialForm); setImgUrl(null); };

  const handleGenerate = async () => {
    if (!formData.appearance || !formData.design) return;
    setGenerating(true);
    
    const typeObj = JADE_TYPES.find(t => t.name === formData.type);
    const prompt = `Extreme realistic professional museum macro photography. 
    Subject: A master-level Chinese jade carving. 
    Material: ${typeObj.prompt}, high subsurface scattering, realistic oily or icy texture. 
    Form: ${formData.shape}. 
    Raw stone features incorporated: ${formData.appearance}. 
    Artistic Concept: ${formData.design}. 
    Lighting: Soft side lighting to reveal texture and depth, dark neutral background, 8k resolution, cinematic quality.`;
    
    const url = await generateNanoBananaImage(prompt, "1:1");
    if (url) setImgUrl(url);
    setGenerating(false);
  };

  return (
    <div className="max-w-6xl mx-auto animate-in fade-in slide-in-from-bottom-8 duration-1000">
      <header className="mb-12 flex justify-between items-end border-b border-[#2d2a20] pb-6">
        <div className="space-y-2">
          <h2 className="text-3xl font-light tracking-[0.2em] text-[#f2f2ed]">相玉定形</h2>
          <p className="text-xs text-[#63635e] tracking-[0.3em]">AI-DRIVEN JADE ARTISTRY</p>
        </div>
        <button onClick={handleReset} className="group flex items-center gap-2 text-[#8c8c82] hover:text-[#c2a47a] transition-colors pb-1">
          <RotateCcw size={14} className="group-hover:rotate-[-90deg] transition-transform duration-500" />
          <span className="text-[11px] tracking-widest uppercase">重置构思</span>
        </button>
      </header>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div className="lg:col-span-5 space-y-8">
          <div className="bg-[#0c0c0b] border border-[#2d2a20] p-8 space-y-8 shadow-2xl relative">
            {/* Input fields with elegant labels */}
            <div className="space-y-6">
              <div className="space-y-3">
                <label className="text-[10px] text-[#c2a47a] tracking-[0.4em] uppercase flex items-center gap-2">品类</label>
                <select 
                  value={formData.type}
                  onChange={(e) => setFormData({...formData, type: e.target.value})}
                  className="w-full bg-[#080807] border border-[#2d2a20] p-3 text-sm text-[#f2f2ed] outline-none focus:border-[#c2a47a/50] transition-all cursor-pointer"
                >
                  {JADE_TYPES.map(t => <option key={t.id} value={t.name}>{t.name}</option>)}
                </select>
              </div>

              <div className="space-y-3">
                <label className="text-[10px] text-[#c2a47a] tracking-[0.4em] uppercase">形制</label>
                <div className="grid grid-cols-3 gap-2">
                  {JADE_SHAPES.map(s => (
                    <button 
                      key={s}
                      onClick={() => setFormData({...formData, shape: s})}
                      className={`py-2 text-[11px] border transition-all ${formData.shape === s ? 'bg-[#c2a47a10] border-[#c2a47a] text-[#c2a47a]' : 'border-[#2d2a20] text-[#63635e] hover:border-[#4d4d4a]'}`}
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>

              <div className="space-y-3">
                <label className="text-[10px] text-[#c2a47a] tracking-[0.4em] uppercase">原石样貌描述</label>
                <textarea 
                  value={formData.appearance}
                  onChange={(e) => setFormData({...formData, appearance: e.target.value})}
                  placeholder="例如：外皮带秋梨色，质地紧致..."
                  className="w-full bg-[#080807] border border-[#2d2a20] p-4 text-sm text-[#f2f2ed] h-28 outline-none focus:border-[#c2a47a/50] resize-none placeholder:text-[#2d2a20]"
                />
              </div>

              <div className="space-y-3">
                <label className="text-[10px] text-[#c2a47a] tracking-[0.4em] uppercase">设计构想</label>
                <textarea 
                  value={formData.design}
                  onChange={(e) => setFormData({...formData, design: e.target.value})}
                  placeholder="例如：利用皮色雕琢成枯荷孤舟，展现禅意..."
                  className="w-full bg-[#080807] border border-[#2d2a20] p-4 text-sm text-[#f2f2ed] h-28 outline-none focus:border-[#c2a47a/50] resize-none placeholder:text-[#2d2a20]"
                />
              </div>
            </div>

            <button 
              onClick={handleGenerate}
              disabled={generating || !formData.appearance || !formData.design}
              className="w-full py-4 bg-[#c2a47a] text-[#080807] text-xs font-bold tracking-[0.5em] hover:bg-[#d4b992] transition-all disabled:opacity-20 flex items-center justify-center gap-3"
            >
              {generating ? <RefreshCw className="animate-spin" size={16} /> : <Sparkles size={16} />}
              {generating ? "神工演算中" : "造化生图"}
            </button>
          </div>
        </div>

        <div className="lg:col-span-7">
          <div 
            className={`group bg-[#0c0c0b] border border-[#2d2a20] h-[600px] overflow-hidden flex flex-col relative shadow-[0_0_50px_rgba(0,0,0,0.8)] cursor-pointer transition-all hover:border-[#c2a47a/20]`}
            onClick={() => imgUrl && onShowFull(imgUrl)}
          >
            {!imgUrl && !generating && (
              <div className="flex-1 flex flex-col items-center justify-center space-y-4 opacity-10">
                <div className="w-24 h-24 border border-[#c2a47a] rotate-45 flex items-center justify-center">
                  <Box size={40} className="rotate-[-45deg]" />
                </div>
                <p className="text-[10px] tracking-[1em] uppercase">等待开墨</p>
              </div>
            )}
            {generating && (
              <div className="flex-1 flex flex-col items-center justify-center space-y-6">
                <div className="relative w-20 h-20">
                  <div className="absolute inset-0 border border-[#c2a47a/20] rotate-45"></div>
                  <div className="absolute inset-0 border-t border-[#c2a47a] rotate-45 animate-[spin_3s_linear_infinite]"></div>
                  <Sparkles className="absolute inset-0 m-auto text-[#c2a47a] animate-pulse" size={24} />
                </div>
                <p className="text-[#c2a47a] text-[10px] tracking-[0.4em] uppercase animate-pulse">正在模拟物质真实性渲染...</p>
              </div>
            )}
            {imgUrl && !generating && (
              <div className="flex-1 relative animate-in fade-in zoom-in-95 duration-1000">
                <img src={imgUrl} className="w-full h-full object-cover" alt="Jade Result" />
                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all flex items-center justify-center">
                  <div className="px-4 py-2 border border-white/20 backdrop-blur-sm text-white text-[10px] tracking-[0.4em] opacity-0 group-hover:opacity-100 transition-opacity uppercase">查看大图</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function ModuleSeal({ onShowFull }) {
  const initialData = { content: '金石为开', material: SEAL_MATERIALS[0].id, shape: '正方形', font: SEAL_FONTS[0].id, intent: '' };
  const [data, setData] = useState(initialData);
  const [generating, setGenerating] = useState(false);
  const [results, setResults] = useState(null);

  const handleReset = () => { setData(initialData); setResults(null); };

  const handleGenerate = async () => {
    setGenerating(true);
    const material = SEAL_MATERIALS.find(m => m.id === data.material);
    const font = SEAL_FONTS.find(f => f.id === data.font);
    
    // Shared stone visual identity for consistency
    const stoneIdentity = `${material.texture}, unique stone patterns, consistent color palette, professional macro photography.`;

    // Side View Prompt
    const sidePrompt = `Extreme macro photography of a Chinese stone seal (SIDE VIEW). 
    Material: ${stoneIdentity} 
    Overall Shape: A ${data.shape} pillar stone seal. 
    Design Intent: ${data.intent || 'Simple classic plain style'}. 
    The base is clean and shows the exact same stone material as the body. 
    Lighting: Studio lighting, sharp details of stone grain and polished surface. No text on this side view. Dark background.`;
    
    // Bottom View Prompt
    const bottomPrompt = `Extreme macro photography of the EXACT BOTTOM BASE of the seal mentioned above. 
    Material: ${stoneIdentity} 
    The flat ${data.shape} base shows physically carved Chinese characters "${data.content}" in ${font.style}. 
    The carving depth is visible with sharp stone-to-stone edges, showing the raw stone grain inside the carved grooves. 
    No ink, no paper, just the physical stone carving. Perfectly centered view from bottom-up.`;

    const [sideUrl, bottomUrl] = await Promise.all([
      generateNanoBananaImage(sidePrompt, "1:1"),
      generateNanoBananaImage(bottomPrompt, "1:1")
    ]);

    if (sideUrl && bottomUrl) setResults({ side: sideUrl, bottom: bottomUrl });
    setGenerating(false);
  };

  return (
    <div className="max-w-7xl mx-auto animate-in fade-in slide-in-from-bottom-8 duration-1000">
      <header className="mb-12 flex justify-between items-end border-b border-[#2d2a20] pb-6">
        <div className="space-y-2">
          <h2 className="text-3xl font-light tracking-[0.2em] text-[#f2f2ed]">方寸金石</h2>
          <p className="text-xs text-[#63635e] tracking-[0.3em]">PRECISION SEAL CARVING</p>
        </div>
        <button onClick={handleReset} className="group flex items-center gap-2 text-[#8c8c82] hover:text-[#c2a47a] transition-colors pb-1">
          <RotateCcw size={14} className="group-hover:rotate-[-90deg] transition-transform duration-500" />
          <span className="text-[11px] tracking-widest uppercase">重置勒石</span>
        </button>
      </header>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div className="lg:col-span-4 space-y-6">
          <div className="bg-[#0c0c0b] border border-[#2d2a20] p-8 space-y-6 shadow-2xl h-[700px] overflow-y-auto custom-scrollbar">
            <div className="space-y-6">
              <div className="space-y-3">
                <label className="text-[10px] text-[#c2a47a] tracking-[0.4em] uppercase">印文内容</label>
                <input 
                  value={data.content}
                  onChange={e => setData({...data, content: e.target.value.slice(0, 4)})}
                  className="w-full bg-[#080807] border border-[#2d2a20] p-4 text-2xl tracking-[0.5em] text-[#f2f2ed] focus:border-[#c2a47a/50] outline-none text-center"
                  placeholder="四字以内"
                />
              </div>

              <div className="space-y-3">
                <label className="text-[10px] text-[#c2a47a] tracking-[0.4em] uppercase">材质</label>
                <div className="grid grid-cols-2 gap-2">
                  {SEAL_MATERIALS.map(m => (
                    <button 
                      key={m.id}
                      onClick={() => setData({...data, material: m.id})}
                      className={`p-3 text-[10px] border transition-all flex items-center gap-2 ${data.material === m.id ? 'bg-[#c2a47a10] border-[#c2a47a] text-[#c2a47a]' : 'border-[#2d2a20] text-[#63635e] hover:border-[#4d4d4a]'}`}
                    >
                      <div className="w-2 h-2 rounded-full" style={{ backgroundColor: m.color }}></div>
                      {m.name}
                    </button>
                  ))}
                </div>
              </div>

              <div className="space-y-3">
                <label className="text-[10px] text-[#c2a47a] tracking-[0.4em] uppercase">书体</label>
                <div className="grid grid-cols-2 gap-2">
                  {SEAL_FONTS.map(f => (
                    <button 
                      key={f.id}
                      onClick={() => setData({...data, font: f.id})}
                      className={`p-3 text-[10px] border transition-all ${data.font === f.id ? 'bg-[#c2a47a10] border-[#c2a47a] text-[#c2a47a]' : 'border-[#2d2a20] text-[#63635e] hover:border-[#4d4d4a]'}`}
                    >
                      {f.name}
                    </button>
                  ))}
                </div>
              </div>

              <div className="space-y-3">
                <label className="text-[10px] text-[#c2a47a] tracking-[0.4em] uppercase">形状</label>
                <div className="flex gap-2">
                  {['正方形', '长方形', '椭圆形'].map(s => (
                    <button 
                      key={s}
                      onClick={() => setData({...data, shape: s})}
                      className={`flex-1 py-3 text-[10px] border transition-all ${data.shape === s ? 'bg-[#c2a47a10] border-[#c2a47a] text-[#c2a47a]' : 'border-[#2d2a20] text-[#63635e] hover:border-[#4d4d4a]'}`}
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>

              <div className="space-y-3">
                <label className="text-[10px] text-[#c2a47a] tracking-[0.4em] uppercase">意境构思</label>
                <textarea 
                  value={data.intent}
                  onChange={(e) => setData({...data, intent: e.target.value})}
                  placeholder="例如：印钮雕刻螭龙，侧壁带有微刻书法，整体有风化古感..."
                  className="w-full bg-[#080807] border border-[#2d2a20] p-4 text-sm text-[#f2f2ed] h-32 outline-none focus:border-[#c2a47a/50] resize-none placeholder:text-[#2d2a20]"
                />
              </div>
            </div>

            <button 
              onClick={handleGenerate}
              disabled={generating || !data.content}
              className="w-full py-4 bg-[#c2a47a] text-[#080807] text-xs font-bold tracking-[0.5em] hover:bg-[#d4b992] transition-all disabled:opacity-20 flex items-center justify-center gap-3"
            >
              {generating ? <RefreshCw className="animate-spin" size={16} /> : <Stamp size={16} />}
              {generating ? "勒石刻金中" : "勒石印金"}
            </button>
          </div>
        </div>

        <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* Side View Result */}
          <div 
            className="group bg-[#0c0c0b] border border-[#2d2a20] h-full overflow-hidden flex flex-col relative shadow-2xl cursor-pointer"
            onClick={() => results?.side && onShowFull(results.side)}
          >
            <div className="p-3 border-b border-[#2d2a20] text-center text-[9px] text-[#63635e] tracking-[0.5em] uppercase">侧部预览 · 材质造型</div>
            {!results && !generating && (
               <div className="flex-1 flex items-center justify-center opacity-10"><Box size={40} /></div>
            )}
            {generating && (
              <div className="flex-1 flex flex-col items-center justify-center space-y-4">
                <RefreshCw className="animate-spin text-[#c2a47a]" size={24}/>
                <span className="text-[9px] text-[#c2a47a] tracking-widest animate-pulse">实体演算</span>
              </div>
            )}
            {results && !generating && (
              <div className="flex-1 relative animate-in fade-in duration-1000">
                <img src={results.side} className="w-full h-full object-cover" alt="Seal Side" />
                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100 uppercase text-[9px] text-white tracking-widest backdrop-blur-sm">查看大图</div>
              </div>
            )}
          </div>

          {/* Bottom View Result */}
          <div 
            className="group bg-[#0c0c0b] border border-[#2d2a20] h-full overflow-hidden flex flex-col relative shadow-2xl cursor-pointer"
            onClick={() => results?.bottom && onShowFull(results.bottom)}
          >
            <div className="p-3 border-b border-[#2d2a20] text-center text-[9px] text-[#63635e] tracking-[0.5em] uppercase">底部视角 · 真实刻痕</div>
            {!results && !generating && (
               <div className="flex-1 flex items-center justify-center opacity-10"><ZoomIn size={40} /></div>
            )}
            {generating && (
              <div className="flex-1 flex flex-col items-center justify-center space-y-4">
                <Stamp className="animate-bounce text-[#c2a47a]" size={24}/>
                <span className="text-[9px] text-[#c2a47a] tracking-widest animate-pulse">刻凿模拟</span>
              </div>
            )}
            {results && !generating && (
              <div className="flex-1 relative animate-in fade-in duration-1000">
                <img src={results.bottom} className="w-full h-full object-cover" alt="Seal Bottom" />
                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100 uppercase text-[9px] text-white tracking-widest backdrop-blur-sm">查看大图</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}