import React, { useState } from 'react';
import { 
  Plus, 
  Layout, 
  Sparkles,
  Network,
  GitBranch,
  ChevronDown,
  MapPin,
  Search,
  User,
  ShoppingBag,
  Star,
  Clock,
  Flame,
  Coffee,
  Pizza,
  ArrowLeft,
  SmartphoneIcon,
  CheckCircle2,
  ChevronRight,
  Wallet,
  Tag,
  MessageCircle,
  Settings,
  ShieldCheck,
  Package,
  Bike,
  FileText,
  Target,
  Zap,
  Lock,
  Eye
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('prototype'); // prototype, flowchart, mindmap, prd
  const [activePageId, setActivePageId] = useState('home'); // home, orders, profile
  
  // 原型模拟数据
  const orderList = [
    { id: 'OR8823', name: '一食堂·红烧肉专场', status: '配送中', price: '¥18.5', time: '预计 12:20 送达', items: '红烧肉套餐 x1', icon: <Pizza className="w-5 h-5" /> },
    { id: 'OR8812', name: '学霸奶茶铺', status: '已完成', price: '¥12.0', time: '昨天 15:30', items: '多肉葡萄 x1', icon: <Coffee className="w-5 h-5" /> },
  ];

  const categories = [
    { name: '快餐', icon: <Pizza className="w-6 h-6" />, color: 'bg-red-500' },
    { name: '甜品', icon: <Coffee className="w-6 h-6" />, color: 'bg-yellow-400' },
    { name: '校园优选', icon: <Star className="w-6 h-6" />, color: 'bg-blue-600' },
    { name: '宵夜', icon: <Flame className="w-6 h-6" />, color: 'bg-red-600' },
    { name: '便利店', icon: <ShoppingBag className="w-6 h-6" />, color: 'bg-blue-400' },
  ];

  const shops = [
    { id: 1, name: '一食堂·红烧肉专场', rating: 4.8, time: '20min', price: '¥15起', tag: '学生食堂', img: 'bg-red-50' },
    { id: 2, name: '学霸奶茶铺', rating: 4.9, time: '15min', price: '¥12起', tag: '人气爆款', img: 'bg-yellow-50' },
    { id: 3, name: '蓝港海鲜炒饭', rating: 4.5, time: '25min', price: '¥18起', tag: '校园直达', img: 'bg-blue-50' },
    { id: 4, name: '西区炸鸡汉堡', rating: 4.7, time: '18min', price: '¥20起', tag: '限时特惠', img: 'bg-red-50' },
  ];

  // 渲染首页
  const renderHomePage = () => (
    <div className="flex-1 overflow-y-auto pb-24 custom-scrollbar animate-in fade-in duration-300">
      <div className="bg-gradient-to-b from-red-500 to-red-600 p-6 pb-10 text-white rounded-b-[2.5rem]">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-1 cursor-pointer">
            <MapPin className="w-4 h-4" />
            <span className="text-sm font-bold">华南理工大学-C10栋</span>
            <ChevronDown className="w-4 h-4" />
          </div>
          <button onClick={() => setActivePageId('profile')} className="bg-white/20 p-2 rounded-full backdrop-blur-md">
            <User className="w-5 h-5" />
          </button>
        </div>
        <div className="bg-white rounded-2xl h-12 flex items-center px-4 gap-3 shadow-lg">
          <Search className="w-5 h-5 text-slate-400" />
          <input className="bg-transparent border-none outline-none text-slate-800 text-sm w-full" placeholder="搜索校内美食、食堂..." />
        </div>
      </div>
      <div className="grid grid-cols-5 gap-2 px-6 -mt-6">
        {categories.map((cat, i) => (
          <div key={i} className="flex flex-col items-center gap-2">
            <div className={`${cat.color} w-12 h-12 rounded-2xl flex items-center justify-center text-white shadow-xl shadow-slate-200 active:scale-90 transition-transform cursor-pointer`}>
              {cat.icon}
            </div>
            <span className="text-[10px] font-black text-slate-600">{cat.name}</span>
          </div>
        ))}
      </div>
      <div className="px-6 mt-8">
        <h3 className="text-lg font-black text-slate-900 mb-4">推荐商家</h3>
        <div className="columns-2 gap-4 space-y-4">
          {shops.map((shop) => (
            <div key={shop.id} className="break-inside-avoid bg-white border border-slate-100 rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all group cursor-pointer">
              <div className={`${shop.img} h-32 w-full flex items-center justify-center relative`}>
                <span className="text-[10px] absolute top-2 left-2 bg-white/80 backdrop-blur-md px-2 py-1 rounded-lg font-bold text-slate-600">{shop.tag}</span>
                <ShoppingBag className="w-8 h-8 opacity-10" />
              </div>
              <div className="p-3">
                <h5 className="font-black text-sm text-slate-800 line-clamp-1">{shop.name}</h5>
                <div className="flex items-center justify-between mt-2 text-[10px] font-bold">
                  <div className="flex items-center gap-1 text-yellow-600"><Star className="w-3 h-3 fill-yellow-600" /> {shop.rating}</div>
                  <div className="text-slate-400 flex items-center gap-1"><Clock className="w-3 h-3" /> {shop.time}</div>
                </div>
                <div className="mt-2 font-black text-red-600 text-xs">{shop.price}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  // 渲染订单页
  const renderOrdersPage = () => (
    <div className="flex-1 overflow-y-auto pb-24 custom-scrollbar animate-in slide-in-from-bottom-4 duration-300">
      <div className="p-6">
        <h2 className="text-2xl font-black text-slate-900 mb-6">我的订单</h2>
        <div className="space-y-4">
          {orderList.map((order) => (
            <div key={order.id} className="bg-white rounded-[2rem] p-5 shadow-sm border border-slate-50 relative overflow-hidden">
              {order.status === '配送中' && (
                <div className="absolute top-0 right-0 bg-blue-600 text-white text-[10px] px-4 py-1 font-black rounded-bl-2xl flex items-center gap-1">
                  <Bike className="w-3 h-3" /> 校内极速达
                </div>
              )}
              <div className="flex items-center gap-4 mb-4">
                <div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${order.status === '配送中' ? 'bg-red-50 text-red-500' : 'bg-slate-50 text-slate-400'}`}>
                  {order.icon}
                </div>
                <div>
                  <h4 className="font-black text-slate-900">{order.name}</h4>
                  <p className="text-[10px] font-bold text-slate-400">{order.items}</p>
                </div>
              </div>
              <div className="flex items-center justify-between pt-4 border-t border-slate-50">
                <div>
                  <span className={`text-xs font-black ${order.status === '配送中' ? 'text-blue-600' : 'text-slate-400'}`}>{order.status}</span>
                  <p className="text-[10px] font-bold text-slate-400">{order.time}</p>
                </div>
                <div className="text-right flex gap-2">
                  <button className="px-4 py-2 bg-slate-50 rounded-xl text-[10px] font-black">再来一单</button>
                  {order.status === '配送中' && <button className="px-4 py-2 bg-blue-600 text-white rounded-xl text-[10px] font-black shadow-lg shadow-blue-200">看地图</button>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  // 渲染个人页
  const renderProfilePage = () => (
    <div className="flex-1 overflow-y-auto pb-24 custom-scrollbar animate-in slide-in-from-right-4 duration-300">
      <div className="bg-blue-600 p-8 pt-12 pb-20 rounded-b-[3rem] text-white relative shadow-2xl">
        <div className="flex items-center gap-4">
          <div className="w-16 h-16 bg-white rounded-3xl p-1 shadow-2xl">
            <div className="w-full h-full bg-yellow-400 rounded-[1.2rem] flex items-center justify-center text-slate-900 font-black text-xl italic">RYB</div>
          </div>
          <div>
            <h2 className="text-xl font-black italic underline decoration-yellow-400 decoration-4 underline-offset-4">李同学</h2>
            <div className="flex items-center gap-1 mt-1 bg-white/20 px-2 py-0.5 rounded-full w-fit">
              <ShieldCheck className="w-3 h-3" />
              <span className="text-[8px] font-black uppercase tracking-widest">已实名学生认证</span>
            </div>
          </div>
        </div>
        <div className="absolute -bottom-10 inset-x-8 bg-white rounded-[2.5rem] p-6 shadow-2xl flex justify-between text-slate-950">
          <div className="text-center flex-1 border-r border-slate-50">
            <p className="text-[8px] font-black text-slate-400 uppercase tracking-widest">余额</p>
            <p className="text-lg font-black mt-1 text-red-500 tracking-tighter">¥128.5</p>
          </div>
          <div className="text-center flex-1 border-r border-slate-50">
            <p className="text-[8px] font-black text-slate-400 uppercase tracking-widest">补贴</p>
            <p className="text-lg font-black mt-1 text-blue-600 tracking-tighter">¥25.0</p>
          </div>
          <div className="text-center flex-1">
            <p className="text-[8px] font-black text-slate-400 uppercase tracking-widest">积分</p>
            <p className="text-lg font-black mt-1 text-yellow-500 tracking-tighter">2.4k</p>
          </div>
        </div>
      </div>
      <div className="px-8 mt-20 space-y-4">
        {[
          { icon: <Wallet className="text-red-500" />, label: "支付设置" },
          { icon: <Tag className="text-yellow-500" />, label: "优惠券包" },
          { icon: <MessageCircle className="text-blue-500" />, label: "客服与反馈" }
        ].map((item, i) => (
          <div key={i} className="flex items-center justify-between p-5 bg-white rounded-3xl border border-slate-50 shadow-sm hover:shadow-md transition-shadow cursor-pointer">
             <div className="flex items-center gap-4">
               <div className="w-10 h-10 bg-slate-50 rounded-2xl flex items-center justify-center">{item.icon}</div>
               <span className="font-black text-slate-700">{item.label}</span>
             </div>
             <ChevronRight className="w-5 h-5 text-slate-300" />
          </div>
        ))}
        <div className="bg-slate-950 rounded-[2.5rem] p-6 text-white flex justify-between items-center shadow-2xl mt-8">
           <div>
             <h4 className="font-black text-lg">申请校园骑手</h4>
             <p className="text-[10px] font-bold text-slate-500 mt-1">本校学生专享 · 自由接单</p>
           </div>
           <div className="w-12 h-12 bg-yellow-400 rounded-2xl flex items-center justify-center text-slate-900 shadow-xl shadow-yellow-400/20 active:scale-95 transition-transform cursor-pointer">
             <Plus className="w-6 h-6" />
           </div>
        </div>
      </div>
    </div>
  );

  // 流程图展示
  const renderFlowchart = () => (
    <div className="p-20 max-w-4xl mx-auto space-y-16 animate-in fade-in duration-500">
      <div className="text-center">
        <div className="inline-block px-4 py-1 bg-blue-100 text-blue-600 rounded-full text-[10px] font-black uppercase mb-4 tracking-widest">Core Business Logic</div>
        <h2 className="text-5xl font-black italic tracking-tighter">业务链路流转</h2>
      </div>
      <div className="relative flex flex-col items-center gap-12">
        <div className="absolute top-0 bottom-0 w-1 bg-gradient-to-b from-red-500 via-yellow-400 to-blue-600 rounded-full opacity-20"></div>
        {[
          { icon: <MapPin />, title: "用户定位", desc: "自动识别校区楼栋，精准派送" },
          { icon: <Search />, title: "挑选商家", desc: "食堂、档口、便利店全覆盖" },
          { icon: <Plus />, title: "下单支付", desc: "校园补贴自动抵扣，极速核销" },
          { icon: <Bike />, title: "校内配送", desc: "学生骑手熟悉环境，直送寝室" }
        ].map((node, i) => (
          <div key={i} className="relative z-10 flex items-center gap-10 bg-white p-8 rounded-[3rem] shadow-2xl border-2 border-slate-50 w-full max-w-lg hover:scale-105 transition-transform">
             <div className="w-16 h-16 bg-slate-950 text-white rounded-3xl flex items-center justify-center shrink-0 shadow-xl italic font-black text-xl">0{i+1}</div>
             <div>
               <h4 className="font-black text-xl text-slate-900 flex items-center gap-2">{node.icon} {node.title}</h4>
               <p className="text-slate-400 font-bold mt-1">{node.desc}</p>
             </div>
          </div>
        ))}
      </div>
    </div>
  );

  // PRD 展示 (修复了 > 符号导致的 JSX 错误)
  const renderPRD = () => (
    <div className="p-20 max-w-5xl mx-auto space-y-12 animate-in slide-in-from-bottom-8 duration-500">
      <div className="flex items-center justify-between border-b-8 border-slate-950 pb-8">
        <div>
          <h2 className="text-6xl font-black italic tracking-tighter">PRD 文档</h2>
          <p className="text-slate-400 font-bold mt-2 uppercase tracking-widest">Campus Delivery Requirement Specification v1.2</p>
        </div>
        <div className="flex gap-4">
          <div className="w-4 h-4 bg-red-500 rounded-full"></div>
          <div className="w-4 h-4 bg-yellow-400 rounded-full"></div>
          <div className="w-4 h-4 bg-blue-600 rounded-full"></div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
        <section className="space-y-6">
          <div className="flex items-center gap-4 text-2xl font-black">
            <Target className="w-8 h-8 text-red-500" /> 1. 产品背景与定位
          </div>
          <p className="text-slate-600 font-bold leading-relaxed bg-slate-50 p-6 rounded-[2rem] border-l-8 border-red-500">
            解决校外外卖进门难、校内食堂数字化程度低、高峰期配送效率慢的问题。
            利用学生兼职骑手实现“楼栋直达”，核心色调红（效率）、黄（奖励）、蓝（信任）贯穿交互。
          </p>
        </section>

        <section className="space-y-6">
          <div className="flex items-center gap-4 text-2xl font-black">
            <Zap className="w-8 h-8 text-yellow-500" /> 2. 核心竞争力 (MVP)
          </div>
          <ul className="space-y-3">
            {['智能楼栋定位：LBS+寝室号精准绑定', '校园补贴支付：优先抵扣政府/学校专项补贴', '封闭式配送：学生骑手直接刷卡进楼', '实名认证：基于学校数据库的实名接口'].map((t, i) => (
              <li key={i} className="flex items-center gap-3 bg-white p-4 rounded-2xl shadow-sm border border-slate-100 font-black text-slate-700">
                <CheckCircle2 className="w-5 h-5 text-emerald-500" /> {t}
              </li>
            ))}
          </ul>
        </section>
      </div>

      <div className="bg-slate-950 text-white rounded-[3rem] p-12 space-y-8 shadow-2xl">
        <div className="flex items-center gap-4 text-2xl font-black">
          <Lock className="w-8 h-8 text-blue-400" /> 3. 业务规则与数据逻辑
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="p-6 bg-white/5 rounded-3xl border border-white/10">
            <h5 className="font-black text-blue-400 mb-4 uppercase tracking-widest text-xs">支付逻辑</h5>
            <p className="text-sm font-bold opacity-70">优先抵扣校园补贴 {'→'} 校园卡余额 {'→'} 微信/支付宝补余。</p>
          </div>
          <div className="p-6 bg-white/5 rounded-3xl border border-white/10">
            <h5 className="font-black text-blue-400 mb-4 uppercase tracking-widest text-xs">配送规则</h5>
            <p className="text-sm font-bold opacity-70">仅限校区围栏内接单/派送。超出范围订单自动进入“转接模式”。</p>
          </div>
          <div className="p-6 bg-white/5 rounded-3xl border border-white/10">
            <h5 className="font-black text-blue-400 mb-4 uppercase tracking-widest text-xs">实名校验</h5>
            <p className="text-sm font-bold opacity-70">下单前强制进行校园实名比对。非认证用户无法进入支付环节。</p>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="flex h-screen bg-slate-50 text-slate-900 font-sans overflow-hidden">
      {/* 侧边导航 */}
      <nav className="w-24 bg-slate-950 flex flex-col items-center py-10 gap-10 shrink-0 z-50">
        <div className="w-14 h-14 bg-red-500 rounded-2xl flex items-center justify-center shadow-2xl border-t-2 border-white/20 active:scale-95 transition-transform cursor-pointer">
          <Sparkles className="w-7 h-7 text-white" />
        </div>
        <div className="flex flex-col gap-6 flex-1">
          <button 
            onClick={() => setActiveTab('prototype')} 
            className={`p-4 rounded-2xl transition-all flex flex-col items-center gap-1 ${activeTab === 'prototype' ? 'bg-white text-slate-950 shadow-xl' : 'text-slate-500 hover:text-white'}`}
          >
            <Layout className="w-7 h-7" />
            <span className="text-[8px] font-black uppercase tracking-tighter">原型</span>
          </button>
          <button 
            onClick={() => setActiveTab('flowchart')} 
            className={`p-4 rounded-2xl transition-all flex flex-col items-center gap-1 ${activeTab === 'flowchart' ? 'bg-white text-slate-950 shadow-xl' : 'text-slate-500 hover:text-white'}`}
          >
            <Network className="w-7 h-7" />
            <span className="text-[8px] font-black uppercase tracking-tighter">流程</span>
          </button>
          <button 
            onClick={() => setActiveTab('mindmap')} 
            className={`p-4 rounded-2xl transition-all flex flex-col items-center gap-1 ${activeTab === 'mindmap' ? 'bg-white text-slate-950 shadow-xl' : 'text-slate-500 hover:text-white'}`}
          >
            <GitBranch className="w-7 h-7" />
            <span className="text-[8px] font-black uppercase tracking-tighter">架构</span>
          </button>
          <button 
            onClick={() => setActiveTab('prd')} 
            className={`p-4 rounded-2xl transition-all flex flex-col items-center gap-1 ${activeTab === 'prd' ? 'bg-white text-slate-950 shadow-xl' : 'text-slate-500 hover:text-white'}`}
          >
            <FileText className="w-7 h-7" />
            <span className="text-[8px] font-black uppercase tracking-tighter">文档</span>
          </button>
        </div>
      </nav>

      {/* 主容器 */}
      <div className="flex-1 flex flex-col relative overflow-hidden">
        <header className="h-20 bg-white/60 backdrop-blur-xl border-b border-slate-100 flex items-center justify-between px-10 shrink-0 z-10">
           <div className="flex items-center gap-3">
             <div className="w-10 h-10 bg-yellow-400 rounded-xl flex items-center justify-center font-black italic shadow-lg shadow-yellow-400/20">RYB</div>
             <div>
               <h1 className="text-sm font-black tracking-tight uppercase">RedYellowBlue Delivery</h1>
               <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Campus Ecosystem Solution</p>
             </div>
           </div>
           <div className="flex gap-4">
             <button className="flex items-center gap-2 text-xs font-black px-4 py-2 hover:bg-slate-50 rounded-xl transition-colors">
               <Eye className="w-4 h-4" /> 预览视图
             </button>
             <button className="bg-slate-950 text-white px-6 py-2 rounded-xl text-xs font-black shadow-2xl active:scale-95 transition-transform">
               同步至云端
             </button>
           </div>
        </header>

        <main className="flex-1 overflow-y-auto custom-scrollbar bg-slate-100/30">
          {activeTab === 'prototype' && (
             <div className="flex justify-center items-start p-10 min-h-full">
               <div className="w-[375px] h-[760px] bg-white rounded-[3.5rem] border-[12px] border-slate-950 shadow-2xl overflow-hidden relative flex flex-col">
                 
                 {/* 页面渲染器 */}
                 {activePageId === 'home' && renderHomePage()}
                 {activePageId === 'orders' && renderOrdersPage()}
                 {activePageId === 'profile' && renderProfilePage()}

                 {/* 底部 Tab Bar */}
                 <div className="absolute bottom-0 inset-x-0 h-24 bg-white/80 backdrop-blur-2xl border-t border-slate-50 px-10 flex items-center justify-between z-50">
                    <button 
                      onClick={() => setActivePageId('home')} 
                      className={`flex flex-col items-center gap-1.5 transition-all ${activePageId === 'home' ? 'text-red-600' : 'text-slate-300 hover:text-slate-400'}`}
                    >
                      <div className={`p-2 rounded-2xl ${activePageId === 'home' ? 'bg-red-50' : ''}`}><Layout className="w-6 h-6" /></div>
                      <span className="text-[8px] font-black uppercase tracking-widest">首页</span>
                    </button>
                    <button 
                      onClick={() => setActivePageId('orders')} 
                      className={`flex flex-col items-center gap-1.5 transition-all ${activePageId === 'orders' ? 'text-blue-600' : 'text-slate-300 hover:text-slate-400'}`}
                    >
                      <div className={`p-2 rounded-2xl ${activePageId === 'orders' ? 'bg-blue-50' : ''}`}><ShoppingBag className="w-6 h-6" /></div>
                      <span className="text-[8px] font-black uppercase tracking-widest">订单</span>
                    </button>
                    <button 
                      onClick={() => setActivePageId('profile')} 
                      className={`flex flex-col items-center gap-1.5 transition-all ${activePageId === 'profile' ? 'text-yellow-600' : 'text-slate-300 hover:text-slate-400'}`}
                    >
                      <div className={`p-2 rounded-2xl ${activePageId === 'profile' ? 'bg-yellow-50' : ''}`}><User className="w-6 h-6" /></div>
                      <span className="text-[8px] font-black uppercase tracking-widest">我的</span>
                    </button>
                 </div>
               </div>
             </div>
          )}
          {activeTab === 'flowchart' && renderFlowchart()}
          {activeTab === 'mindmap' && (
            <div className="p-20 grid grid-cols-1 md:grid-cols-3 gap-8">
              {[
                { title: "用户交互层", items: ["定位/楼栋关联", "多色块分类筛选", "订单进度可视化", "实名资产看板"] },
                { title: "业务中台层", items: ["校园补贴算法", "信用积分模型", "地理围栏服务", "统一身份认证"] },
                { title: "运力调度层", items: ["学生骑手抢单", "食堂档口接单", "异常订单仲裁", "路线自动纠偏"] }
              ].map((c, i) => (
                <div key={i} className="bg-white rounded-[3rem] p-10 shadow-xl border-b-[12px] border-slate-950">
                  <h4 className="text-xl font-black italic mb-6"># {c.title}</h4>
                  <div className="space-y-4">
                    {c.items.map((it, j) => (
                      <div key={j} className="flex items-center gap-3 text-sm font-bold text-slate-500 bg-slate-50 p-4 rounded-2xl">
                        <div className="w-2 h-2 bg-red-500 rounded-full"></div> {it}
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
          {activeTab === 'prd' && renderPRD()}
        </main>
      </div>

      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
        body { font-family: 'Inter', sans-serif; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
      `}</style>
    </div>
  );
};

export default App;