import React, { useState, useEffect } from 'react';
import { 
  Baby, 
  Utensils, 
  Milk, 
  Droplets, 
  Pill, 
  Syringe, 
  Ruler, 
  Weight, 
  Clock, 
  Calendar, 
  ChevronRight, 
  Plus, 
  Bell,
  CheckCircle2,
  AlertCircle,
  X,
  History,
  Home,
  LineChart,
  Download // 新增图标
} from 'lucide-react';

// --- 模拟数据与常量 ---

const ACTION_TYPES = [
  { id: 'milk', label: '喝奶', icon: Milk, color: 'bg-blue-100 text-blue-500', unit: 'ml' },
  { id: 'food', label: '吃饭', icon: Utensils, color: 'bg-orange-100 text-orange-500', unit: 'g' },
  { id: 'water', label: '喝水', icon: Droplets, color: 'bg-cyan-100 text-cyan-500', unit: 'ml' },
  { id: 'poop', label: '便便', icon: Baby, color: 'bg-yellow-100 text-yellow-600', unit: '次' },
  { id: 'medicine', label: '喝药', icon: Pill, color: 'bg-red-100 text-red-500', unit: '次' },
];

const VACCINE_SCHEDULE = [
  { month: 0, name: '乙肝疫苗 (第一针)', completed: true },
  { month: 0, name: '卡介苗', completed: true },
  { month: 1, name: '乙肝疫苗 (第二针)', completed: false },
  { month: 2, name: '脊灰疫苗 (第一针)', completed: false },
  { month: 3, name: '百白破 (第一针)', completed: false },
  { month: 6, name: '乙肝疫苗 (第三针)', completed: false },
];

// --- 组件部分 ---

// 1. 顶部宝宝信息卡片
const BabyHeader = ({ babyInfo }) => {
  const [ageDisplay, setAgeDisplay] = useState('');

  useEffect(() => {
    const calculateAge = () => {
      const birth = new Date(babyInfo.birthDate);
      const now = new Date();
      const diffTime = Math.abs(now - birth);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      
      // 简单计算月龄
      const months = Math.floor(diffDays / 30);
      const days = diffDays % 30;

      setAgeDisplay(`${months}个月 ${days}天`);
    };
    calculateAge();
  }, [babyInfo]);

  return (
    <div className="bg-white rounded-3xl p-6 shadow-xl shadow-pink-100 mb-6 relative overflow-hidden">
      <div className="absolute top-0 right-0 w-32 h-32 bg-pink-50 rounded-full -mr-10 -mt-10 opacity-50"></div>
      <div className="flex items-center space-x-4 relative z-10">
        <div className="w-16 h-16 rounded-full bg-pink-200 border-4 border-white shadow-md flex items-center justify-center overflow-hidden">
           {/* 这里可以使用上传的图片，暂时用Icon代替 */}
           <Baby className="w-10 h-10 text-white" />
        </div>
        <div>
          <h2 className="text-xl font-bold text-gray-800">{babyInfo.name}</h2>
          <div className="flex items-center text-pink-500 text-sm font-medium mt-1 bg-pink-50 px-3 py-1 rounded-full w-fit">
            <Clock className="w-3 h-3 mr-1" />
            <span>来到世界: {ageDisplay}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

// 2. 快捷记录网格
const QuickActionGrid = ({ onLogAction }) => {
  return (
    <div className="grid grid-cols-3 gap-4 mb-6">
      {ACTION_TYPES.map((action) => (
        <button
          key={action.id}
          onClick={() => onLogAction(action)}
          className="flex flex-col items-center justify-center p-4 bg-white rounded-2xl shadow-sm hover:shadow-md transition-all active:scale-95 border border-gray-50"
        >
          <div className={`w-12 h-12 rounded-full ${action.color} flex items-center justify-center mb-2`}>
            <action.icon className="w-6 h-6" />
          </div>
          <span className="text-gray-600 text-xs font-medium">{action.label}</span>
        </button>
      ))}
      {/* 这是一个自定义打卡按钮 */}
      <button
        onClick={() => alert("自定义功能开发中...")}
        className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-2xl border-2 border-dashed border-gray-200 text-gray-400"
      >
        <Plus className="w-6 h-6 mb-2" />
        <span className="text-xs">更多</span>
      </button>
    </div>
  );
};

// 3. 今日动态列表
const ActivityFeed = ({ logs }) => {
  // 只显示今天的
  const todayLogs = logs.filter(log => {
    const today = new Date().toDateString();
    return new Date(log.timestamp).toDateString() === today;
  }).sort((a, b) => b.timestamp - a.timestamp); // 倒序

  return (
    <div className="bg-white rounded-3xl p-5 shadow-sm min-h-[200px]">
      <div className="flex justify-between items-center mb-4">
        <h3 className="font-bold text-gray-700 flex items-center">
          <History className="w-4 h-4 mr-2 text-pink-400" />
          今日动态
        </h3>
        <span className="text-xs text-gray-400">共 {todayLogs.length} 条记录</span>
      </div>

      {todayLogs.length === 0 ? (
        <div className="text-center py-10 text-gray-300">
          <p>宝宝今天还没有动静哦~</p>
        </div>
      ) : (
        <div className="space-y-4">
          {todayLogs.map((log) => {
            const actionDef = ACTION_TYPES.find(a => a.id === log.type) || ACTION_TYPES[0];
            const timeStr = new Date(log.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            
            return (
              <div key={log.id} className="flex items-center justify-between border-b border-gray-50 pb-2 last:border-0">
                <div className="flex items-center space-x-3">
                  <div className={`w-8 h-8 rounded-full ${actionDef.color} flex items-center justify-center`}>
                    <actionDef.icon className="w-4 h-4" />
                  </div>
                  <div>
                    <p className="text-sm font-medium text-gray-700">{actionDef.label}</p>
                    <p className="text-xs text-gray-400">{timeStr}</p>
                  </div>
                </div>
                <span className="text-sm font-bold text-gray-600">
                  {log.value ? `${log.value}${actionDef.unit}` : '已打卡'}
                </span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

// 4. 生长记录 & 疫苗
const GrowthAndVaccine = ({ growthData, vaccines }) => {
  return (
    <div className="space-y-6">
      {/* 身高体重卡片 */}
      <div className="bg-white rounded-3xl p-5 shadow-sm">
        <div className="flex justify-between items-center mb-4">
          <h3 className="font-bold text-gray-700 flex items-center">
            <LineChart className="w-4 h-4 mr-2 text-purple-400" />
            生长发育
          </h3>
          <button className="text-xs bg-purple-50 text-purple-500 px-3 py-1 rounded-full">记录</button>
        </div>
        <div className="grid grid-cols-2 gap-4">
            <div className="bg-purple-50 rounded-2xl p-4 flex flex-col justify-between h-24">
                <div className="flex items-center text-purple-400 text-xs font-bold uppercase tracking-wider">
                    <Ruler className="w-3 h-3 mr-1" /> 身高
                </div>
                <div className="text-2xl font-bold text-gray-700">
                    {growthData.height} <span className="text-sm font-normal text-gray-400">cm</span>
                </div>
            </div>
            <div className="bg-blue-50 rounded-2xl p-4 flex flex-col justify-between h-24">
                <div className="flex items-center text-blue-400 text-xs font-bold uppercase tracking-wider">
                    <Weight className="w-3 h-3 mr-1" /> 体重
                </div>
                <div className="text-2xl font-bold text-gray-700">
                    {growthData.weight} <span className="text-sm font-normal text-gray-400">kg</span>
                </div>
            </div>
        </div>
      </div>

      {/* 疫苗卡片 */}
      <div className="bg-white rounded-3xl p-5 shadow-sm">
        <div className="flex justify-between items-center mb-4">
          <h3 className="font-bold text-gray-700 flex items-center">
            <Syringe className="w-4 h-4 mr-2 text-green-400" />
            疫苗提醒
          </h3>
          <span className="text-xs text-gray-400">本月待接种: 1</span>
        </div>
        <div className="space-y-3">
            {vaccines.map((vac, index) => (
                <div key={index} className="flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                        {vac.completed ? (
                            <CheckCircle2 className="w-5 h-5 text-green-400" />
                        ) : (
                            <AlertCircle className="w-5 h-5 text-pink-400" />
                        )}
                        <span className={`text-sm ${vac.completed ? 'text-gray-400 line-through' : 'text-gray-700 font-medium'}`}>
                            {vac.name}
                        </span>
                    </div>
                    <span className="text-xs text-gray-400">{vac.month}月龄</span>
                </div>
            ))}
        </div>
      </div>
    </div>
  );
};

// 5. 弹窗组件
const ReminderModal = ({ isOpen, onClose, onConfirm }) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-[2rem] p-6 w-full max-w-sm shadow-2xl animate-in fade-in zoom-in duration-300">
        <div className="flex flex-col items-center text-center">
          <div className="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-4 animate-bounce">
            <Bell className="w-8 h-8 text-pink-500" />
          </div>
          <h3 className="text-xl font-bold text-gray-800 mb-2">宝宝起床了吗？</h3>
          <p className="text-gray-500 text-sm mb-6">
            距离上次记录已经过去很长时间啦。如果宝宝醒了，记得给TA喂点水或者换个尿布哦！
          </p>
          <div className="flex space-x-3 w-full">
            <button 
              onClick={onClose}
              className="flex-1 py-3 rounded-xl bg-gray-100 text-gray-600 font-bold hover:bg-gray-200 transition-colors"
            >
              还在睡
            </button>
            <button 
              onClick={onConfirm}
              className="flex-1 py-3 rounded-xl bg-pink-500 text-white font-bold shadow-lg shadow-pink-200 hover:bg-pink-600 transition-colors"
            >
              去打卡
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

// 主应用组件
const BabyApp = () => {
  const [activeTab, setActiveTab] = useState('home');
  const [showWakeupModal, setShowWakeupModal] = useState(false);
  
  // 模拟数据 State
  const [babyInfo] = useState({
    name: "糯米团子",
    birthDate: "2023-11-15",
    gender: "female"
  });

  const [growthData] = useState({
    height: 65.5,
    weight: 7.2
  });

  const [logs, setLogs] = useState([
    { id: 1, type: 'milk', value: 120, timestamp: Date.now() - 1000 * 60 * 60 * 2 }, // 2小时前
    { id: 2, type: 'poop', value: 1, timestamp: Date.now() - 1000 * 60 * 60 * 5 }, // 5小时前
  ]);

  // 检查是否需要弹窗提醒 (模拟逻辑：如果上次操作超过4小时，或者为了演示，页面加载时随机触发)
  useEffect(() => {
    const checkInactivity = () => {
        const lastActivityTime = logs.length > 0 ? logs[0].timestamp : 0;
        const now = Date.now();
        const fourHours = 4 * 60 * 60 * 1000;
        
        // 为了方便演示，这里我们假设如果最后一条记录超过4小时，就弹窗
        // 在真实场景中，这会在用户重新打开App时触发
        if (now - lastActivityTime > fourHours) {
            setShowWakeupModal(true);
        }
    };
    
    // 延迟1秒检查，模拟App启动过程
    const timer = setTimeout(checkInactivity, 1000);
    return () => clearTimeout(timer);
  }, [logs]);

  // 记录操作
  const handleLogAction = (actionDef) => {
    const newValue = prompt(`请输入${actionDef.label}的数量 (${actionDef.unit})`, "1");
    if (newValue) {
        const newLog = {
            id: Date.now(),
            type: actionDef.id,
            value: newValue,
            timestamp: Date.now()
        };
        setLogs([newLog, ...logs]);
    }
  };

  // 生成并下载 HTML 报表
  const handleExportHtml = () => {
    const htmlContent = `
      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>${babyInfo.name} - 成长档案</title>
        <style>
          body { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: #fdf2f8; color: #333; padding: 20px; max-width: 800px; margin: 0 auto; }
          .header { text-align: center; margin-bottom: 30px; }
          .card { background: white; padding: 20px; border-radius: 16px; box-shadow: 0 4px 10px rgba(236, 72, 153, 0.1); margin-bottom: 20px; }
          h1 { color: #db2777; margin-bottom: 5px; }
          h2 { color: #be185d; border-bottom: 2px solid #fce7f3; padding-bottom: 10px; font-size: 1.2rem; }
          .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
          table { width: 100%; border-collapse: collapse; margin-top: 15px; }
          th, td { text-align: left; padding: 12px; border-bottom: 1px solid #f3f4f6; }
          th { color: #831843; background-color: #fdf2f8; }
          tr:hover { background-color: #fff1f2; }
          .footer { text-align: center; font-size: 0.8rem; color: #9ca3af; margin-top: 30px; }
          .tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; font-weight: bold; }
        </style>
      </head>
      <body>
        <div class="header">
          <h1>${babyInfo.name} 的成长档案 👶</h1>
          <p>生成日期: ${new Date().toLocaleDateString()}</p>
        </div>

        <div class="card">
          <h2>基本信息</h2>
          <div class="info-grid">
            <p><strong>性别:</strong> ${babyInfo.gender === 'female' ? '女宝宝' : '男宝宝'}</p>
            <p><strong>出生日期:</strong> ${babyInfo.birthDate}</p>
            <p><strong>当前身高:</strong> ${growthData.height} cm</p>
            <p><strong>当前体重:</strong> ${growthData.weight} kg</p>
          </div>
        </div>

        <div class="card">
          <h2>📅 近期记录明细</h2>
          <table>
            <thead>
              <tr>
                <th>时间</th>
                <th>类型</th>
                <th>详情</th>
              </tr>
            </thead>
            <tbody>
              ${logs.map(log => {
                const action = ACTION_TYPES.find(a => a.id === log.type);
                return `
                  <tr>
                    <td>${new Date(log.timestamp).toLocaleString()}</td>
                    <td>
                      <span class="tag" style="background-color: #fce7f3; color: #be185d">
                        ${action?.label || log.type}
                      </span>
                    </td>
                    <td>${log.value} ${action?.unit || ''}</td>
                  </tr>
                `;
              }).join('')}
            </tbody>
          </table>
        </div>

        <div class="footer">
          由 Baby Guardian 宝宝监护室 App 生成
        </div>
      </body>
      </html>
    `;

    const blob = new Blob([htmlContent], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `${babyInfo.name}_成长档案_${new Date().toISOString().slice(0,10)}.html`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="min-h-screen bg-pink-50 font-sans text-gray-800 flex justify-center">
      {/* 手机容器模拟 */}
      <div className="w-full max-w-md bg-white min-h-screen shadow-2xl relative flex flex-col">
        
        {/* 顶部背景装饰 */}
        <div className="absolute top-0 left-0 w-full h-64 bg-gradient-to-b from-pink-200 to-pink-50 rounded-b-[3rem] z-0"></div>

        {/* 主要内容区域 */}
        <main className="flex-1 relative z-10 p-6 pb-24 overflow-y-auto">
          {/* 顶部栏 */}
          <div className="flex justify-between items-center mb-6 pt-4">
            <span className="text-xl font-bold text-gray-800">宝宝监护室</span>
            <button className="p-2 bg-white/60 backdrop-blur-md rounded-full shadow-sm">
                <Bell className="w-5 h-5 text-gray-600" />
            </button>
          </div>

          {activeTab === 'home' && (
            <>
              <BabyHeader babyInfo={babyInfo} />
              <div className="mb-2 px-2">
                <h3 className="text-sm font-bold text-gray-400 mb-3 uppercase tracking-wider">快速打卡</h3>
              </div>
              <QuickActionGrid onLogAction={handleLogAction} />
              <ActivityFeed logs={logs} />
            </>
          )}

          {activeTab === 'growth' && (
             <div className="mt-4">
                 <h2 className="text-2xl font-bold mb-6 text-gray-800 px-2">健康档案</h2>
                 <GrowthAndVaccine growthData={growthData} vaccines={VACCINE_SCHEDULE} />
             </div>
          )}

          {activeTab === 'profile' && (
              <div className="mt-10 text-center">
                  <div className="w-24 h-24 bg-pink-100 rounded-full mx-auto mb-4 flex items-center justify-center">
                      <Baby className="w-12 h-12 text-pink-400" />
                  </div>
                  <h2 className="text-xl font-bold text-gray-800">设置与账号</h2>
                  <p className="text-gray-400 mt-2 text-sm">当前版本 v1.0.0</p>
                  
                  <div className="mt-8 space-y-3 px-4">
                    <button 
                      onClick={handleExportHtml}
                      className="w-full flex items-center justify-center bg-white border border-pink-200 text-pink-500 px-6 py-3 rounded-2xl shadow-sm hover:bg-pink-50 transition-colors"
                    >
                      <Download className="w-5 h-5 mr-2" />
                      导出数据 (HTML)
                    </button>

                    <button className="w-full bg-pink-500 text-white px-6 py-3 rounded-2xl shadow-lg shadow-pink-200">
                        退出登录
                    </button>
                  </div>
              </div>
          )}

        </main>

        {/* 底部导航栏 */}
        <div className="absolute bottom-0 left-0 w-full bg-white border-t border-gray-100 px-6 py-4 rounded-t-[2rem] shadow-[0_-5px_20px_-5px_rgba(0,0,0,0.05)] z-20">
          <div className="flex justify-between items-center">
            <NavButton 
                active={activeTab === 'home'} 
                onClick={() => setActiveTab('home')} 
                icon={Home} 
                label="首页" 
            />
            <div className="w-px h-8 bg-gray-100"></div>
            <NavButton 
                active={activeTab === 'growth'} 
                onClick={() => setActiveTab('growth')} 
                icon={LineChart} 
                label="成长" 
            />
            <div className="w-px h-8 bg-gray-100"></div>
            <NavButton 
                active={activeTab === 'profile'} 
                onClick={() => setActiveTab('profile')} 
                icon={Baby} 
                label="我的" 
            />
          </div>
        </div>

        {/* 弹窗 */}
        <ReminderModal 
            isOpen={showWakeupModal} 
            onClose={() => setShowWakeupModal(false)}
            onConfirm={() => {
                setShowWakeupModal(false);
                // 这里可以自动触发一个 'wake up' 的记录或者只是关闭
            }}
        />

      </div>
    </div>
  );
};

// 底部导航按钮组件
const NavButton = ({ active, onClick, icon: Icon, label }) => (
  <button 
    onClick={onClick}
    className={`flex flex-col items-center justify-center w-16 transition-all duration-300 ${active ? 'transform -translate-y-2' : ''}`}
  >
    <div className={`p-2 rounded-full mb-1 transition-colors ${active ? 'bg-pink-500 text-white shadow-lg shadow-pink-200' : 'text-gray-300'}`}>
      <Icon className="w-6 h-6" />
    </div>
    <span className={`text-[10px] font-bold ${active ? 'text-pink-500' : 'text-gray-300'}`}>
      {label}
    </span>
  </button>
);

export default BabyApp;