"use client";

import { useMemo, useState } from "react";
import type { Destination } from "@/lib/types";

const TZ_OFFSET: Record<string, number> = {
  bali: 8, lisbon: 0, chiangmai: 7, mexico: -6, barcelona: 1, tokyo: 9,
};

const HOME_OFFSETS = [
  { key: "cn", label: "🇨🇳 中国 (UTC+8)", offset: 8 },
  { key: "us_east", label: "🇺🇸 美东 (UTC-5)", offset: -5 },
  { key: "us_west", label: "🇺🇸 美西 (UTC-8)", offset: -8 },
  { key: "uk", label: "🇬🇧 英国 (UTC+0)", offset: 0 },
  { key: "eu", label: "🇪🇺 中欧 (UTC+1)", offset: 1 },
];

function tipsForDiff(absDiff: number): string[] {
  if (absDiff <= 2) return ["时差很小，几乎无感", "抵达当天可正常作息", "保持常规睡眠即可"];
  if (absDiff <= 5) return ["建议提前 2–3 天微调作息", "抵达后当天晒太阳帮助校准", "避免落地立刻开长会"];
  if (absDiff <= 8) return ["东飞更伤，预留 2–3 天恢复", "第一晚尽量睡满 7 小时", "褪黑素/镁片可辅助（遵医嘱）"];
  return ["跨半球长途，预留 4–5 天缓冲", "分段飞行比直达更易恢复", "前两天安排轻量工作即可"];
}

interface Props {
  destinations: Destination[];
}

export default function JetLagEstimator({ destinations }: Props) {
  const [home, setHome] = useState("cn");
  const [slug, setSlug] = useState(destinations[0]?.slug || "bali");
  const [direction, setDirection] = useState<"east" | "west">("east");

  const result = useMemo(() => {
    const homeOff = HOME_OFFSETS.find((h) => h.key === home)?.offset ?? 8;
    const destOff = TZ_OFFSET[slug] ?? 8;
    let diff = destOff - homeOff;
    if (diff > 12) diff -= 24;
    if (diff < -12) diff += 24;
    const abs = Math.abs(diff);
    const dir = diff >= 0 ? "east" : "west";
    const recovery = Math.max(1, Math.ceil(abs / 2));
    return { diff, abs, dir, recovery, tips: tipsForDiff(abs) };
  }, [home, slug]);

  const dest = destinations.find((d) => d.slug === slug);

  return (
    <section className="section jetlag-section" id="jetlag">
      <div className="container">
        <div className="section-header reveal">
          <span className="section-tag">😴 JET LAG</span>
          <h2>时差恢复估算</h2>
          <p>算出时差跨度，提前安排恢复期与工作节奏</p>
        </div>

        <div className="jetlag-card reveal">
          <div className="jetlag-form">
            <div className="calc-field">
              <label>🏠 当前时区</label>
              <select value={home} onChange={(e) => setHome(e.target.value)}>
                {HOME_OFFSETS.map((h) => (
                  <option key={h.key} value={h.key}>{h.label}</option>
                ))}
              </select>
            </div>
            <div className="calc-field">
              <label>✈️ 目的地</label>
              <select value={slug} onChange={(e) => setSlug(e.target.value)}>
                {destinations.map((d) => (
                  <option key={d.slug} value={d.slug}>{d.emoji} {d.name}</option>
                ))}
              </select>
            </div>
            <div className="calc-field">
              <label>🧭 飞行方向（主观）</label>
              <div className="calc-options">
                <button className={`calc-option${direction === "east" ? " active" : ""}`} onClick={() => setDirection("east")}>🌅 向东飞</button>
                <button className={`calc-option${direction === "west" ? " active" : ""}`} onClick={() => setDirection("west")}>🌇 向西飞</button>
              </div>
            </div>
          </div>

          <div className="jetlag-result">
            <div className="jetlag-diff">
              <span className="jetlag-emoji">{dest?.emoji || "🌍"}</span>
              <strong>{result.abs === 0 ? "无时差" : `${result.abs} 小时`}</strong>
              <small>
                {result.diff === 0
                  ? "与当前时区相同"
                  : result.diff > 0
                    ? `目的地快 ${result.abs} 小时`
                    : `目的地慢 ${result.abs} 小时`}
              </small>
            </div>
            <div className="jetlag-recovery">
              <span>建议恢复期</span>
              <strong className="gradient-text">{result.recovery} 天</strong>
              {(direction === "east" || result.dir === "east") && result.abs > 3 && (
                <p className="jetlag-note">向东飞行通常更难适应，可多留一天缓冲</p>
              )}
            </div>
            <ul className="jetlag-tips">
              {result.tips.map((t) => <li key={t}>💡 {t}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}