import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { CalendarDays, Sparkles, Heart, CheckCircle2, Plus, Flag, CloudSun, Mountain, FlameKindling, Flower2, ChevronRight } from "lucide-react";

/**
 * Grow Me 成長之島｜單頁 Web 版本
 * - 雙模式：冒險者 Adventure / 療癒者 Healing
 * - 本地 state 儲存（可擴充到後端）
 * - 每日任務、技能卡、心情紀錄、島嶼視覺（SVG）
 */

const seedWeek = () => {
  const today = new Date();
  const start = new Date(today);
  start.setDate(start.getDate() - ((today.getDay() + 6) % 7)); // Monday start
  const days = Array.from({ length: 7 }).map((_, i) => {
    const d = new Date(start);
    d.setDate(start.getDate() + i);
    return {
      date: d,
      tasks: {
        adventure: [
          { id: crypto.randomUUID(), text: "主動用敬語詢問一次", done: false },
          { id: crypto.randomUUID(), text: "用インカム回報一次", done: false },
        ],
        healing: [
          { id: crypto.randomUUID(), text: "3分鐘肩頸伸展", done: false },
          { id: crypto.randomUUID(), text: "寫下一句感謝", done: false },
        ],
      },
      mood: "🙂",
    };
  });
  return days;
};

const defaultSkills = [
  { key: "敬語應對", level: 2, xp: 40, color: "from-indigo-400 to-fuchsia-400" },
  { key: "インカム溝通", level: 1, xp: 60, color: "from-sky-400 to-cyan-400" },
  { key: "飲み放題說明", level: 2, xp: 25, color: "from-emerald-400 to-lime-400" },
  { key: "料理補充", level: 1, xp: 15, color: "from-amber-400 to-orange-400" },
  { key: "身心照護", level: 2, xp: 50, color: "from-rose-400 to-pink-400" },
];

export default function GrowMeIsland() {
  const [mode, setMode] = useState("adventure");
  const [week, setWeek] = useState(seedWeek());
  const [skills, setSkills] = useState(defaultSkills);
  const [newTask, setNewTask] = useState("");
  const [selectedDayIndex, setSelectedDayIndex] = useState(() => {
    const today = new Date();
    return (today.getDay() + 6) % 7; // Monday=0
  });

  const day = week[selectedDayIndex];

  const completion = useMemo(() => {
    const total = week.reduce((acc, d) => acc + d.tasks.adventure.length + d.tasks.healing.length, 0);
    const done = week.reduce(
      (acc, d) =>
        acc + d.tasks.adventure.filter((t) => t.done).length + d.tasks.healing.filter((t) => t.done).length,
      0
    );
    return Math.round((done / Math.max(1, total)) * 100);
  }, [week]);

  const islandBloom = useMemo(() => {
    // 決定島上元素數量：依完成度與技能平均等級
    const avgLv = skills.reduce((a, s) => a + s.level, 0) / skills.length;
    const flowers = Math.min(30, Math.floor((completion / 100) * 20 + avgLv * 2));
    const trees = Math.min(12, Math.floor(avgLv + completion / 20));
    const fireflies = completion > 60 ? Math.floor((completion - 60) / 5) : 0;
    return { flowers, trees, fireflies };
  }, [completion, skills]);

  const toggleTask = (taskId: string) => {
    setWeek((prev) =>
      prev.map((d, i) =>
        i === selectedDayIndex
          ? {
              ...d,
              tasks: {
                ...d.tasks,
                [mode]: d.tasks[mode as "adventure" | "healing"].map((t) =>
                  t.id === taskId ? { ...t, done: !t.done } : t
                ),
              },
            }
          : d
      )
    );
  };

  const addTask = () => {
    if (!newTask.trim()) return;
    setWeek((prev) =>
      prev.map((d, i) =>
        i === selectedDayIndex
          ? {
              ...d,
              tasks: {
                ...d.tasks,
                [mode]: [
                  ...d.tasks[mode as "adventure" | "healing"],
                  { id: crypto.randomUUID(), text: newTask.trim(), done: false },
                ],
              },
            }
          : d
      )
    );
    setNewTask("");
  };

  const gainXP = (skillKey: string, amount = 10) => {
    setSkills((prev) =>
      prev.map((s) => {
        if (s.key !== skillKey) return s;
        const newXP = s.xp + amount;
        if (newXP >= 100) {
          return { ...s, level: s.level + 1, xp: newXP - 100 };
        }
        return { ...s, xp: newXP };
      })
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-sky-50 to-emerald-50 text-slate-800">
      <header className="max-w-6xl mx-auto px-4 pt-6 pb-3 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }}>
            <CloudSun className="w-7 h-7" />
          </motion.div>
          <h1 className="text-2xl sm:text-3xl font-semibold tracking-tight">Grow Me 成長之島</h1>
          <Badge variant="secondary" className="ml-2 rounded-full px-3 py-1">Web beta</Badge>
        </div>
        <div className="flex items-center gap-3">
          <Tabs value={mode} onValueChange={setMode} className="hidden sm:block">
            <TabsList className="grid grid-cols-2">
              <TabsTrigger value="adventure" className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-indigo-500 data-[state=active]:to-fuchsia-500 data-[state=active]:text-white">
                <FlameKindling className="w-4 h-4 mr-2" />冒險者
              </TabsTrigger>
              <TabsTrigger value="healing" className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-emerald-500 data-[state=active]:to-teal-500 data-[state=active]:text-white">
                <Heart className="w-4 h-4 mr-2" />療癒者
              </TabsTrigger>
            </TabsList>
          </Tabs>
          <Select value={mode} onValueChange={setMode}>
            <SelectTrigger className="w-[140px] sm:hidden">
              <SelectValue placeholder="模式" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="adventure">冒險者</SelectItem>
              <SelectItem value="healing">療癒者</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-4 pb-16 grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left: Island */}
        <Card className="lg:col-span-2 shadow-sm border-0 bg-white/70 backdrop-blur">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2">
              <Mountain className="w-5 h-5" />
              成長之島視覺
            </CardTitle>
          </CardHeader>
          <CardContent>
            <IslandSVG completion={completion} bloom={islandBloom} mode={mode} />
            <div className="mt-4">
              <Progress value={completion} className="h-2" />
              <p className="text-sm text-slate-500 mt-2">本週完成度：{completion}%</p>
            </div>
          </CardContent>
        </Card>

        {/* Right: Skills */}
        <Card className="shadow-sm border-0 bg-white/70 backdrop-blur">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2">
              <Sparkles className="w-5 h-5" />技能卡
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {skills.map((s) => (
                <div key={s.key} className="p-3 rounded-2xl border bg-white">
                  <div className="flex items-center justify-between">
                    <div className="font-medium">{s.key}</div>
                    <Badge className="rounded-full">Lv.{s.level}</Badge>
                  </div>
                  <div className={`mt-3 h-2 rounded-full bg-gradient-to-r ${s.color}`} style={{ width: `${s.xp}%` }} />
                  <div className="text-xs text-slate-500 mt-1">經驗值 {s.xp}%</div>
                  <div className="mt-3 flex gap-2">
                    <Button size="sm" variant="secondary" onClick={() => gainXP(s.key, 10)}>
                      +10 XP
                    </Button>
                    <Button size="sm" variant="ghost" onClick={() => gainXP(s.key, 100)}>
                      升級試試看
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Tasks */}
        <Card className="lg:col-span-3 shadow-sm border-0 bg-white/70 backdrop-blur">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2">
              <CalendarDays className="w-5 h-5" />本週任務
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap items-center gap-2 mb-4">
              {week.map((d, i) => (
                <Button
                  key={i}
                  variant={i === selectedDayIndex ? "default" : "secondary"}
                  className={`rounded-full ${i === selectedDayIndex ? "bg-gradient-to-r from-indigo-500 to-fuchsia-500" : ""}`}
                  onClick={() => setSelectedDayIndex(i)}
                >
                  {d.date.toLocaleDateString(undefined, { weekday: "short" })}
                </Button>
              ))}
            </div>

            <div className="grid md:grid-cols-2 gap-6">
              <TaskColumn
                title={mode === "adventure" ? "冒險者任務" : "療癒者任務"}
                tasks={day.tasks[mode as "adventure" | "healing"]}
                onToggle={toggleTask}
              />

              <div className="p-4 rounded-2xl border bg-white">
                <div className="font-medium mb-2 flex items-center"><CheckCircle2 className="w-4 h-4 mr-2" />新增{mode === "adventure" ? "冒險" : "療癒"}任務</div>
                <div className="flex gap-2">
                  <Input placeholder="輸入任務…" value={newTask} onChange={(e) => setNewTask(e.target.value)} />
                  <Button onClick={addTask}>
                    <Plus className="w-4 h-4 mr-1" />新增
                  </Button>
                </div>
                <p className="text-xs text-slate-500 mt-2">例：冒險→「用インカム回報一次」；療癒→「睡前自我擁抱」</p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Journal */}
        <Card className="lg:col-span-3 shadow-sm border-0 bg-white/70 backdrop-blur">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2"><Flag className="w-5 h-5" />今日一句話</CardTitle>
          </CardHeader>
          <CardContent>
            <Journal day={day} onChange={(mood) => {
              setWeek((prev) => prev.map((d, i) => (i === selectedDayIndex ? { ...d, mood } : d)));
            }} />
          </CardContent>
        </Card>
      </main>

      <footer className="max-w-6xl mx-auto px-4 pb-10 text-center text-xs text-slate-500">
        Made for Lily · Grow Me 成長之島 · 雙模式 Web 版
      </footer>
    </div>
  );
}

function TaskColumn({ title, tasks, onToggle }: { title: string; tasks: { id: string; text: string; done: boolean }[]; onToggle: (id: string) => void }) {
  return (
    <div className="p-4 rounded-2xl border bg-white">
      <div className="font-medium mb-3 flex items-center"><ChevronRight className="w-4 h-4 mr-2" />{title}</div>
      <div className="space-y-2">
        {tasks.map((t) => (
          <label key={t.id} className={`flex items-center gap-3 p-3 rounded-xl border ${t.done ? "bg-emerald-50 border-emerald-200" : "bg-white"}`}>
            <Checkbox checked={t.done} onCheckedChange={() => onToggle(t.id)} />
            <span className={`${t.done ? "line-through text-slate-400" : ""}`}>{t.text}</span>
          </label>
        ))}
        {tasks.length === 0 && (
          <div className="text-sm text-slate-500">目前尚無任務，新增一個吧！</div>
        )}
      </div>
    </div>
  );
}

function Journal({ day, onChange }: { day: any; onChange: (mood: string) => void }) {
  const [text, setText] = useState("");
  return (
    <div className="flex flex-col md:flex-row gap-4 items-start">
      <div className="flex gap-2">
        {"😀🙂😌🥲🥹😫".split("").map((m) => (
          <button key={m} onClick={() => onChange(m)} className={`text-2xl leading-none p-2 rounded-xl border ${day.mood === m ? "bg-yellow-50 border-yellow-300" : "bg-white"}`}>{m}</button>
        ))}
      </div>
      <Input placeholder="今天想記下一句話…（可留空）" value={text} onChange={(e) => setText(e.target.value)} />
      <Button variant="secondary" onClick={() => { setText(""); }}>
        儲存
      </Button>
    </div>
  );
}

function IslandSVG({ completion, bloom, mode }: { completion: number; bloom: { flowers: number; trees: number; fireflies: number }; mode: string }) {
  const width = 1100;
  const height = 340;
  const skyGrad = mode === "adventure" ? ["#c7d2fe", "#f5d0fe"] : ["#d1fae5", "#a7f3d0"]; // indigo→fuchsia vs emerald tones

  // 生成隨機花與樹（以完成度為種子稍微穩定）
  const rng = (seed: number) => () => {
    seed = (seed * 9301 + 49297) % 233280;
    return seed / 233280;
  };
  const rand = rng(completion + 7);
  const flowers = Array.from({ length: bloom.flowers }).map((_, i) => ({
    x: 80 + rand() * 880,
    y: 200 + rand() * 110,
    r: 3 + rand() * 3,
    rot: rand() * 360,
  }));
  const trees = Array.from({ length: bloom.trees }).map((_, i) => ({
    x: 120 + rand() * 840,
    y: 170 + rand() * 60,
    h: 20 + rand() * 40,
  }));
  const fireflies = Array.from({ length: bloom.fireflies }).map((_, i) => ({
    x: 100 + rand() * 860,
    y: 80 + rand() * 80,
  }));

  return (
    <div className="w-full overflow-hidden rounded-2xl border bg-white">
      <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-auto">
        <defs>
          <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={skyGrad[0]} />
            <stop offset="100%" stopColor={skyGrad[1]} />
          </linearGradient>
          <linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#bae6fd" />
            <stop offset="100%" stopColor="#7dd3fc" />
          </linearGradient>
        </defs>

        {/* sky */}
        <rect x="0" y="0" width={width} height={height} fill="url(#sky)" />
        {/* sun */}
        <circle cx="1000" cy="60" r="34" fill="#fde68a" opacity="0.9" />
        {/* sea */}
        <rect x="0" y="240" width={width} height={100} fill="url(#sea)" />

        {/* island base */}
        <path d="M60,240 C220,200 360,210 520,230 C700,255 920,235 1040,235 L1040,340 L60,340 Z" fill="#bbf7d0" stroke="#86efac" strokeWidth="2" />
        {/* path */}
        <path d="M150,245 C260,235 350,235 460,240 C540,243 650,248 780,242" fill="none" stroke="#fde68a" strokeWidth="6" strokeLinecap="round" opacity="0.7" />

        {/* trees */}
        {trees.map((t, i) => (
          <g key={`tree-${i}`} transform={`translate(${t.x}, ${t.y})`}>
            <rect x="-2" y={-t.h} width="4" height={t.h} fill="#166534" />
            <circle cx="0" cy={-t.h} r={t.h / 1.8} fill="#22c55e" />
          </g>
        ))}

        {/* flowers */}
        {flowers.map((f, i) => (
          <g key={`flower-${i}`} transform={`translate(${f.x}, ${f.y}) rotate(${f.rot})`} opacity="0.9">
            <circle cx="0" cy="0" r={f.r * 0.6} fill="#fb7185" />
            <circle cx={f.r} cy="0" r={f.r * 0.45} fill="#f472b6" />
            <circle cx={-f.r} cy="0" r={f.r * 0.45} fill="#f472b6" />
          </g>
        ))}

        {/* fireflies */}
        {fireflies.map((p, i) => (
          <circle key={`ff-${i}`} cx={p.x} cy={p.y} r={2.2} fill="#fde68a" opacity="0.8" />
        ))}

        {/* signboard */}
        <g transform="translate(140,210)">
          <rect x="-60" y="-20" width="120" height="32" rx="6" fill="#fef3c7" stroke="#fbbf24" />
          <text x="0" y="2" textAnchor="middle" className="fill-slate-700" style={{ fontSize: 12, fontWeight: 600 }}>
            Grow Me 成長之島
          </text>
        </g>
      </svg>
    </div>
  );
}

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>