"use client";

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

interface AtmTip {
  emoji: string;
  title: string;
  detail: string;
}

const TIPS: Record<string, AtmTip[]> = {
  bali: [
    { emoji: "🏦", title: "优先银行 ATM", detail: "BCA / Mandiri 手续费相对透明，避开独立小黄机。" },
    { emoji: "💳", title: "Wise / 实体卡", detail: "尽量用无外汇手续费卡，按需取现。" },
    { emoji: "💵", title: "别一次取太多", detail: "现金够用即可，酒店与餐厅多数可刷卡。" },
  ],
  chiangmai: [
    { emoji: "🏧", title: "Aeon / 银行柜员机", detail: "注意屏幕提示的「动态汇率」选项，尽量选拒绝。" },
    { emoji: "💱", title: "拒绝 DCC", detail: "出现「用人民币结算？」选 No，用泰铢记账更划算。" },
    { emoji: "🧾", title: "保留小票", detail: "便于核对手续费与异常扣款。" },
  ],
  lisbon: [
    { emoji: "🇪🇺", title: "欧元区友好", detail: "多数 ATM 支持国际卡，留意 Multibanco 标识。" },
    { emoji: "🚫", title: "拒绝动态货币转换", detail: "选以欧元扣款，避免银行额外加点。" },
    { emoji: "🪙", title: "小面额现金", detail: "市场与有轨电车偶尔需要硬币。" },
  ],
  barcelona: [
    { emoji: "🏧", title: "银行网点 ATM", detail: "CaixaBank / Santander 更稳，避开街头独立机。" },
    { emoji: "🚫", title: "拒 DCC", detail: "选欧元结算，别让机器帮你换汇。" },
    { emoji: "👛", title: "现金备用量", detail: "堂食可刷卡，小摊与夜市准备现金。" },
  ],
  mexico: [
    { emoji: "🏦", title: "BBVA / Santander", detail: "大行 ATM 更安全，白天取现。" },
    { emoji: "⚠️", title: "警惕侧录", detail: "检查插卡口是否松动，优先商场内机器。" },
    { emoji: "💵", title: "小费文化", detail: "预留小额比索现金给餐厅与快递。" },
  ],
  tokyo: [
    { emoji: "🏪", title: "7-Eleven ATM", detail: "对国际卡最友好，便利店随处可取。" },
    { emoji: "💴", title: "日元现金仍重要", detail: "部分居酒屋与神社只收现金。" },
    { emoji: "💱", title: "少在机场换汇", detail: "汇率通常较差，落地后便利店 ATM 更优。" },
  ],
};

interface Props {
  destinations: Destination[];
}

export default function AtmCashGuide({ destinations }: Props) {
  const [slug, setSlug] = useState(destinations[0]?.slug || "chiangmai");
  const tips = useMemo(() => TIPS[slug] || TIPS.chiangmai, [slug]);
  const dest = destinations.find((d) => d.slug === slug);

  return (
    <section className="section atm-section" id="atm">
      <div className="container">
        <div className="section-header reveal">
          <span className="section-tag">🏧 ATM</span>
          <h2>取现与换汇避坑</h2>
          <p>拒 DCC、选对机器，少交「智商税」</p>
        </div>

        <div className="housing-cities reveal">
          {destinations.map((d) => (
            <button
              key={d.slug}
              className={`season-city-btn${slug === d.slug ? " active" : ""}`}
              onClick={() => setSlug(d.slug)}
            >
              {d.emoji} {d.name}
            </button>
          ))}
        </div>

        <h3 className="sim-city-title reveal">{dest?.emoji} {dest?.name}</h3>

        <div className="atm-grid">
          {tips.map((t, i) => (
            <div key={t.title} className="atm-card reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
              <span className="atm-emoji">{t.emoji}</span>
              <h4>{t.title}</h4>
              <p>{t.detail}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}