"use client";

import { useEffect, useState } from "react";
import { useToast } from "@/lib/toast";

const QUESTIONS = [
  { id: "wifi", emoji: "📶", q: "实际上网速度能到多少？有无高峰限速？" },
  { id: "noise", emoji: "🔊", q: "晚上安静吗？隔壁会开会/派对吗？" },
  { id: "desk", emoji: "🪑", q: "是否有独立工位与显示器外接？" },
  { id: "deposit", emoji: "🔐", q: "押金多久退？扣款条件写清楚了吗？" },
  { id: "clean", emoji: "🧹", q: "公共区域清洁频率？谁负责厨余？" },
  { id: "guest", emoji: "👥", q: "访客政策？能否短住朋友？" },
  { id: "contract", emoji: "📄", q: "最短租期与提前退租违约金？" },
  { id: "bills", emoji: "💡", q: "水电网是否包？超额怎么算？" },
];

export default function ColivingQuestions() {
  const { toast } = useToast();
  const [checked, setChecked] = useState<string[]>([]);
  useEffect(() => {
    try {
      const raw = localStorage.getItem("nomadro-coliving-q");
      if (raw) setChecked(JSON.parse(raw));
    } catch { /* ignore */ }
  }, []);
  useEffect(() => {
    localStorage.setItem("nomadro-coliving-q", JSON.stringify(checked));
  }, [checked]);
  const toggle = (id: string) => setChecked((p) => (p.includes(id) ? p.filter((x) => x !== id) : [...p, id]));
  const copy = async () => {
    const text = QUESTIONS.filter((q) => checked.includes(q.id) || checked.length === 0)
      .map((q, i) => `${i + 1}. ${q.q}`)
      .join("\n");
    await navigator.clipboard.writeText(`Coliving 看房问题：\n${text}`);
    toast("问题清单已复制 📋");
  };
  return (
    <section className="section kit-section" id="coliving-qa">
      <div className="container">
        <div className="section-header reveal">
          <span className="section-tag">🏠 COLIVING Q&A</span>
          <h2>合租看房问题单</h2>
          <p>勾选你要问的，一键复制发给房东/管家</p>
        </div>
        <div className="kit-card reveal">
          <div className="kit-list">
            {QUESTIONS.map((q) => {
              const on = checked.includes(q.id);
              return (
                <button key={q.id} type="button" className={`kit-list-item btnish${on ? " on" : ""}`} onClick={() => toggle(q.id)}>
                  <span>{q.emoji}</span>
                  <div><strong>{q.q}</strong></div>
                  <i>{on ? "✓" : "+"}</i>
                </button>
              );
            })}
          </div>
          <div className="kit-actions">
            <button type="button" className="btn btn-primary" onClick={copy}>复制问题单</button>
            <button type="button" className="btn btn-ghost" onClick={() => setChecked([])}>清空</button>
          </div>
        </div>
      </div>
    </section>
  );
}