import React, { useState, useMemo } from "react";

// 单文件 React 组件：默认导出
// 使用 TailwindCSS 进行样式（无需额外导入）

const INITIAL_FOODS = [
  // 经典中餐
  { name: "麻婆豆腐", periods: ["午餐", "晚餐"], flavors: ["辣", "咸"], budget: "正常吃" },
  { name: "宫保鸡丁", periods: ["午餐", "晚餐"], flavors: ["甜", "辣", "咸"], budget: "正常吃" },
  { name: "鱼香肉丝", periods: ["午餐", "晚餐"], flavors: ["甜", "酸", "辣"], budget: "正常吃" },
  { name: "水煮牛肉", periods: ["晚餐"], flavors: ["辣"], budget: "奢侈一把" },
  { name: "糖醋里脊", periods: ["午餐", "晚餐"], flavors: ["甜", "酸"], budget: "正常吃" },
  { name: "回锅肉", periods: ["午餐", "晚餐"], flavors: ["辣", "咸"], budget: "正常吃" },
  { name: "地三鲜", periods: ["午餐", "晚餐"], flavors: ["咸", "香"], budget: "正常吃" },
  { name: "红烧排骨", periods: ["午餐", "晚餐"], flavors: ["咸", "甜"], budget: "正常吃" },
  { name: "清蒸鲈鱼", periods: ["晚餐"], flavors: ["清淡", "咸"], budget: "奢侈一把" },
  { name: "北京烤鸭", periods: ["晚餐"], flavors: ["咸", "香"], budget: "奢侈一把" },
  { name: "酸菜鱼", periods: ["午餐", "晚餐"], flavors: ["酸", "辣"], budget: "正常吃" },
  { name: "扬州炒饭", periods: ["午餐", "晚餐"], flavors: ["咸"], budget: "省钱" },
  { name: "兰州拉面", periods: ["午餐"], flavors: ["咸", "香"], budget: "省钱" },
  { name: "重庆小面", periods: ["早餐", "午餐"], flavors: ["辣"], budget: "省钱" },
  { name: "麻辣烫", periods: ["午餐", "晚餐"], flavors: ["辣"], budget: "正常吃" },
  { name: "麻辣香锅", periods: ["晚餐"], flavors: ["辣", "香"], budget: "正常吃" },
  { name: "广式烧腊饭", periods: ["午餐", "晚餐"], flavors: ["咸", "甜"], budget: "正常吃" },
  { name: "白切鸡", periods: ["午餐", "晚餐"], flavors: ["清淡"], budget: "正常吃" },
  { name: "小笼包", periods: ["早餐", "午餐"], flavors: ["咸", "香"], budget: "正常吃" },
  { name: "火锅", periods: ["晚餐", "夜宵"], flavors: ["辣", "咸", "清淡"], budget: "奢侈一把" },
  { name: "羊肉串", periods: ["夜宵"], flavors: ["辣", "咸"], budget: "正常吃" },
  { name: "肉夹馍", periods: ["早餐", "午餐"], flavors: ["咸", "香"], budget: "省钱" },
  { name: "螺蛳粉", periods: ["午餐", "晚餐"], flavors: ["辣", "酸"], budget: "正常吃" },
  { name: "过桥米线", periods: ["午餐", "晚餐"], flavors: ["清淡", "咸"], budget: "正常吃" },
  { name: "潮汕牛肉火锅", periods: ["晚餐"], flavors: ["清淡"], budget: "奢侈一把" },
  // 快手便当
  { name: "肯德基套餐", periods: ["午餐", "晚餐"], flavors: ["咸", "香"], budget: "正常吃" },
  { name: "麦当劳套餐", periods: ["午餐", "晚餐"], flavors: ["咸", "香"], budget: "正常吃" },
  { name: "汉堡王套餐", periods: ["午餐", "晚餐"], flavors: ["咸", "香"], budget: "正常吃" },
  { name: "赛百味三明治", periods: ["午餐"], flavors: ["咸", "清淡"], budget: "正常吃" },
  { name: "方便面", periods: ["夜宵"], flavors: ["咸"], budget: "省钱" },
  { name: "便当盒饭", periods: ["午餐"], flavors: ["咸"], budget: "省钱" },
  { name: "寿司拼盘", periods: ["午餐", "晚餐"], flavors: ["清淡"], budget: "正常吃" },
  { name: "饭团", periods: ["早餐", "午餐"], flavors: ["咸"], budget: "省钱" },
  { name: "沙县小吃", periods: ["午餐", "晚餐"], flavors: ["咸"], budget: "省钱" },
  { name: "黄焖鸡米饭", periods: ["午餐", "晚餐"], flavors: ["咸", "香"], budget: "正常吃" },
  // 西餐/异国
  { name: "披萨", periods: ["午餐", "晚餐"], flavors: ["咸", "甜"], budget: "正常吃" },
  { name: "意式肉酱面", periods: ["午餐", "晚餐"], flavors: ["酸", "咸"], budget: "正常吃" },
  { name: "牛排", periods: ["晚餐"], flavors: ["咸", "香"], budget: "奢侈一把" },
  { name: "奶油蘑菇汤", periods: ["晚餐"], flavors: ["咸", "香"], budget: "正常吃" },
  { name: "凯撒沙拉", periods: ["午餐"], flavors: ["清淡"], budget: "正常吃" },
  { name: "日式拉面", periods: ["午餐", "晚餐"], flavors: ["咸"], budget: "正常吃" },
  { name: "韩国部队火锅", periods: ["晚餐"], flavors: ["辣", "咸"], budget: "正常吃" },
  { name: "石锅拌饭", periods: ["午餐", "晚餐"], flavors: ["辣", "甜"], budget: "正常吃" },
  { name: "泰国冬阴功汤", periods: ["午餐", "晚餐"], flavors: ["酸", "辣"], budget: "正常吃" },
  { name: "绿咖喱鸡", periods: ["午餐", "晚餐"], flavors: ["辣", "甜"], budget: "正常吃" },
  { name: "越南火车头河粉", periods: ["午餐", "晚餐"], flavors: ["清淡", "酸"], budget: "正常吃" },
  { name: "墨西哥鸡肉卷", periods: ["午餐"], flavors: ["辣", "咸"], budget: "正常吃" },
  { name: "西班牙海鲜饭", periods: ["晚餐"], flavors: ["咸", "香"], budget: "奢侈一把" },
  { name: "德国烤猪肘", periods: ["晚餐"], flavors: ["咸", "香"], budget: "奢侈一把" },
  { name: "印度咖喱", periods: ["午餐", "晚餐"], flavors: ["辣", "香"], budget: "正常吃" },
  // 早餐/小吃/甜品
  { name: "豆浆油条", periods: ["早餐"], flavors: ["咸", "甜"], budget: "省钱" },
  { name: "煎饼果子", periods: ["早餐"], flavors: ["咸", "香"], budget: "省钱" },
  { name: "茶叶蛋", periods: ["早餐"], flavors: ["咸"], budget: "省钱" },
  { name: "小米粥", periods: ["早餐", "夜宵"], flavors: ["清淡", "甜"], budget: "省钱" },
  { name: "肠粉", periods: ["早餐"], flavors: ["清淡", "咸"], budget: "省钱" },
  { name: "烧烤", periods: ["夜宵"], flavors: ["辣", "咸"], budget: "正常吃" },
  { name: "炸鸡", periods: ["晚餐", "夜宵"], flavors: ["咸", "香"], budget: "正常吃" },
  { name: "臭豆腐", periods: ["夜宵"], flavors: ["辣"], budget: "省钱" },
  { name: "奶茶", periods: ["夜宵"], flavors: ["甜"], budget: "正常吃" },
  { name: "双皮奶", periods: ["夜宵"], flavors: ["甜"], budget: "正常吃" },
  { name: "蛋糕", periods: ["夜宵"], flavors: ["甜"], budget: "奢侈一把" },
  // 注意：原列表中重复的项已合并（例如重复出现的麻婆豆腐/宫保鸡丁）
];

const PERIODS = ["早餐", "午餐", "晚餐", "夜宵"];
const FLAVORS = ["辣", "甜", "咸", "酸", "清淡", "香"];
const BUDGETS = ["省钱", "正常吃", "奢侈一把"];

export default function TodayEatApp() {
  const [foods, setFoods] = useState(INITIAL_FOODS);

  // 筛选状态
  const [selectedPeriod, setSelectedPeriod] = useState(""); // 单选
  const [selectedFlavors, setSelectedFlavors] = useState([]); // 多选
  const [selectedBudget, setSelectedBudget] = useState(""); // 单选

  const [result, setResult] = useState("今天我们吃...");
  const [manageOpen, setManageOpen] = useState(false);

  // 新增项临时状态
  const [newName, setNewName] = useState("");
  const [newPeriods, setNewPeriods] = useState([]);
  const [newFlavors, setNewFlavors] = useState([]);
  const [newBudget, setNewBudget] = useState(BUDGETS[1]);

  // 帮助：切换多选
  const toggleMulti = (val, arr, setArr) => {
    if (arr.includes(val)) setArr(arr.filter((a) => a !== val));
    else setArr([...arr, val]);
  };

  // 两步筛选逻辑
  const filterStep = (items) => {
    // 如果没有选择 period，则匹配全部 period（用户应该至少选择一个，但我们容错）
    const periodCond = (item) =>
      !selectedPeriod || item.periods.includes(selectedPeriod);
    const budgetCond = (item) => !selectedBudget || item.budget === selectedBudget;

    // 精确匹配：如果用户选择了口味，则要求菜品包含所有已选口味；否则只按 period+budget
    const exact = items.filter((item) => {
      if (!periodCond(item) || !budgetCond(item)) return false;
      if (selectedFlavors.length === 0) return true;
      return selectedFlavors.every((f) => item.flavors.includes(f));
    });
    if (exact.length > 0) return exact;

    // 放宽匹配：找到满足 period 和 budget 的，并且口味中包含任意一个已选口味（如果用户选择了口味）
    const relaxed = items.filter((item) => {
      if (!periodCond(item) || !budgetCond(item)) return false;
      if (selectedFlavors.length === 0) return true;
      return item.flavors.some((f) => selectedFlavors.includes(f));
    });
    return relaxed;
  };

  const handleRescue = () => {
    const candidates = filterStep(foods);
    if (!candidates || candidates.length === 0) {
      setResult("糟糕，你的菜单里没有符合条件的菜哦！");
      return;
    }
    const pick = candidates[Math.floor(Math.random() * candidates.length)];
    setResult(pick.name);
  };

  // 管理列表功能
  const handleDelete = (index) => {
    setFoods((prev) => prev.filter((_, i) => i !== index));
  };

  const handleAdd = () => {
    const name = newName.trim();
    if (!name) return;
    const item = {
      name,
      periods: newPeriods.length ? newPeriods : PERIODS,
      flavors: newFlavors,
      budget: newBudget || BUDGETS[1],
    };
    setFoods((p) => [item, ...p]);
    // 重置
    setNewName("");
    setNewPeriods([]);
    setNewFlavors([]);
    setNewBudget(BUDGETS[1]);
  };

  // 便捷计数显示
  const counts = useMemo(() => {
    return {
      total: foods.length,
    };
  }, [foods]);

  return (
    <div className="min-h-screen bg-gradient-to-b from-white to-gray-50 p-6 flex flex-col items-center">
      <div className="w-full max-w-2xl bg-white rounded-2xl shadow-md p-6">
        <header className="text-center mb-6">
          <h1 className="text-3xl font-extrabold">今天吃什么？</h1>
          <p className="text-sm text-gray-500">选择你的时段 / 口味 / 预算，让我来拯救你的选择困难症 🎯</p>
        </header>

        {/* 筛选区 */}
        <section className="mb-6">
          <div className="grid grid-cols-1 gap-4">
            <div>
              <div className="text-sm font-medium mb-2">时段选择</div>
              <div className="flex flex-wrap gap-2">
                {PERIODS.map((p) => (
                  <button
                    key={p}
                    onClick={() => setSelectedPeriod(selectedPeriod === p ? "" : p)}
                    className={`px-3 py-1 rounded-full border ${selectedPeriod === p ? "bg-blue-600 text-white" : "bg-white text-gray-700"}`}
                  >
                    {p}
                  </button>
                ))}
              </div>
            </div>

            <div>
              <div className="text-sm font-medium mb-2">口味选择（可多选）</div>
              <div className="flex flex-wrap gap-2">
                {FLAVORS.map((f) => (
                  <button
                    key={f}
                    onClick={() => toggleMulti(f, selectedFlavors, setSelectedFlavors)}
                    className={`px-3 py-1 rounded-full border ${selectedFlavors.includes(f) ? "bg-green-600 text-white" : "bg-white text-gray-700"}`}
                  >
                    {f}
                  </button>
                ))}
              </div>
            </div>

            <div>
              <div className="text-sm font-medium mb-2">预算选择</div>
              <div className="flex flex-wrap gap-2">
                {BUDGETS.map((b) => (
                  <button
                    key={b}
                    onClick={() => setSelectedBudget(selectedBudget === b ? "" : b)}
                    className={`px-3 py-1 rounded-full border ${selectedBudget === b ? "bg-yellow-600 text-white" : "bg-white text-gray-700"}`}
                  >
                    {b}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* 大按钮 */}
        <div className="mb-6 text-center">
          <button
            onClick={handleRescue}
            className="w-full py-4 rounded-xl text-xl font-bold shadow-lg transform active:scale-95 bg-gradient-to-r from-red-500 to-pink-500 text-white"
          >
            拯救我的选择困难症！
          </button>
        </div>

        {/* 结果显示区 */}
        <div className="mb-6 p-4 rounded-lg border bg-gray-50 text-center text-xl">
          {result}
        </div>

        {/* 管理我的菜单 按钮 */}
        <div className="mb-2">
          <button
            onClick={() => setManageOpen(!manageOpen)}
            className="px-3 py-2 rounded-md border inline-flex items-center gap-2"
          >
            管理我的菜单 ({counts.total})
            <span className="ml-2 text-xs text-gray-500">{manageOpen ? "收起" : "展开"}</span>
          </button>
        </div>

        {/* 管理面板 */}
        {manageOpen && (
          <div className="mt-4 border rounded-lg p-4 bg-white">
            <div className="mb-4">
              <h3 className="font-semibold mb-2">当前菜单（点击删除以移除）</h3>
              <div className="max-h-64 overflow-auto divide-y">
                {foods.map((f, idx) => (
                  <div key={`${f.name}-${idx}`} className="py-2 flex justify-between items-center">
                    <div>
                      <div className="font-medium">{f.name}</div>
                      <div className="text-xs text-gray-500">{[f.periods.join("/"), f.flavors.join("/"), f.budget].join(" • ")}</div>
                    </div>
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => {
                          // 将该菜名填入结果预览（便于快速测试）
                          setResult(f.name);
                        }}
                        className="px-2 py-1 rounded border text-sm"
                      >
                        预览
                      </button>
                      <button onClick={() => handleDelete(idx)} className="px-3 py-1 rounded bg-red-500 text-white text-sm">删除</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="pt-4 border-t">
              <h4 className="font-semibold mb-2">添加新菜品</h4>
              <div className="grid grid-cols-1 gap-3">
                <input
                  className="border rounded px-3 py-2"
                  placeholder="输入菜名，例如：香辣牛肉"
                  value={newName}
                  onChange={(e) => setNewName(e.target.value)}
                />

                <div>
                  <div className="text-sm mb-1">选择时段（可多选，默认全部）</div>
                  <div className="flex gap-2 flex-wrap">
                    {PERIODS.map((p) => (
                      <button
                        key={p}
                        onClick={() => toggleMulti(p, newPeriods, setNewPeriods)}
                        className={`px-2 py-1 rounded-full border ${newPeriods.includes(p) ? "bg-blue-600 text-white" : "bg-white text-gray-700"}`}
                      >
                        {p}
                      </button>
                    ))}
                  </div>
                </div>

                <div>
                  <div className="text-sm mb-1">选择口味（可多选）</div>
                  <div className="flex gap-2 flex-wrap">
                    {FLAVORS.map((f) => (
                      <button
                        key={f}
                        onClick={() => toggleMulti(f, newFlavors, setNewFlavors)}
                        className={`px-2 py-1 rounded-full border ${newFlavors.includes(f) ? "bg-green-600 text-white" : "bg-white text-gray-700"}`}
                      >
                        {f}
                      </button>
                    ))}
                  </div>
                </div>

                <div>
                  <div className="text-sm mb-1">预算</div>
                  <div className="flex gap-2">
                    {BUDGETS.map((b) => (
                      <button
                        key={b}
                        onClick={() => setNewBudget(b)}
                        className={`px-2 py-1 rounded-full border ${newBudget === b ? "bg-yellow-600 text-white" : "bg-white text-gray-700"}`}
                      >
                        {b}
                      </button>
                    ))}
                  </div>
                </div>

                <div className="flex gap-2">
                  <button onClick={handleAdd} className="px-4 py-2 rounded bg-green-600 text-white">添加到菜单</button>
                  <button
                    onClick={() => {
                      setNewName("");
                      setNewPeriods([]);
                      setNewFlavors([]);
                      setNewBudget(BUDGETS[1]);
                    }}
                    className="px-4 py-2 rounded border"
                  >
                    重置
                  </button>
                </div>
              </div>
            </div>

          </div>
        )}

        <footer className="mt-6 text-xs text-gray-400 text-center">简单、直观、拯救选择难题 · 请在本地或你的 React 项目中引入 Tailwind 即可运行。</footer>
      </div>
    </div>
  );
}