"use client";

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

const RATES: Record<string, { wash: number; dry: number; fold: number; note: string }> = {
  chiangmai: { wash: 25, dry: 20, fold: 15, note: "街边自助洗衣很常见" },
  bali: { wash: 35, dry: 25, fold: 20, note: "按公斤计费，问清是否含烘干" },
  lisbon: { wash: 45, dry: 30, fold: 25, note: "自助洗衣店遍布居民区" },
  barcelona: { wash: 50, dry: 35, fold: 25, note: "旺季可能排队" },
  mexico: { wash: 40, dry: 30, fold: 20, note: "lavandería 按公斤" },
  tokyo: { wash: 55, dry: 40, fold: 0, note: "投币洗衣，通常自折" },
};

interface Props { destinations: Destination[] }

export default function LaundryDay({ destinations }: Props) {
  const [slug, setSlug] = useState(destinations[0]?.slug || "chiangmai");
  const [kg, setKg] = useState(4);
  const [dry, setDry] = useState(true);
  const [fold, setFold] = useState(false);
  const rate = RATES[slug] || RATES.chiangmai;
  const total = useMemo(() => {
    let t = rate.wash * kg;
    if (dry) t += rate.dry * kg;
    if (fold) t += rate.fold * kg;
    return Math.round(t);
  }, [rate, kg, dry, fold]);
  return (
    <section className="section kit-section" id="laundry">
      <div className="container">
        <div className="section-header reveal">
          <span className="section-tag">👕 LAUNDRY</span>
          <h2>洗衣日预算</h2>
          <p>出差旅居最容易忘的一笔小开销</p>
        </div>
        <div className="kit-card reveal">
          <div className="kit-row">
            <label className="kit-field"><span>城市</span>
              <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>
            </label>
            <label className="kit-field"><span>重量 {kg} kg</span>
              <input type="range" min={1} max={10} value={kg} onChange={(e) => setKg(+e.target.value)} />
            </label>
          </div>
          <div className="kit-chips">
            <button type="button" className={`kit-chip${dry ? " active" : ""}`} onClick={() => setDry((v) => !v)}>烘干</button>
            <button type="button" className={`kit-chip${fold ? " active" : ""}`} onClick={() => setFold((v) => !v)}>叠衣</button>
          </div>
          <div className="kit-hero">
            <span>🧺</span>
            <div><small>预估</small><strong>¥{total}</strong><p>{rate.note}</p></div>
          </div>
        </div>
      </div>
    </section>
  );
}