// packing.jsx — Personal packing checklist with localStorage persistence.

const PACKING_GROUPS = [
  {
    id: "buy",
    eyebrow: "Buy or confirm",
    title: "Pre-trip shopping",
    items: [
      "Soft duffel (no rolling suitcase for river)",
      "Secure river shoes — Chacos, Tevas, Astrals",
      "Rain jacket + rain pants",
      "UPF sun hoodie or quick-dry long sleeve",
      "Sunglasses + retainer + spare",
      "Waterproof phone or camera case",
      "Idaho fishing license (if fishing)",
    ],
  },
  {
    id: "river",
    eyebrow: "On the water",
    title: "River clothes",
    items: [
      "1–2 swimsuits or quick-dry base layers",
      "Quick-dry shorts, pants, or leggings",
      "Fleece or synthetic puffy",
      "Wool/synthetic long underwear",
      "Sun hat, cap, buff",
      "Optional neoprene socks for cold mornings",
    ],
  },
  {
    id: "camp",
    eyebrow: "Off the water",
    title: "Camp clothes",
    items: [
      "2–3 cotton tees or tanks",
      "Camp pants, shorts, or skirt",
      "5–6 underwear, 2–3 socks",
      "Warm pajamas",
      "Warm hat + gloves",
      "Camp shoes + small towel or sarong",
    ],
  },
  {
    id: "essentials",
    eyebrow: "Day bag",
    title: "Small essentials",
    items: [
      "Water-resistant sunscreen + SPF lip balm",
      "Reusable water bottle",
      "Daily meds in the day bag",
      "Headlamp + extra batteries",
      "Wet wipes + toiletries",
      "Bug spray + personal first-aid",
    ],
  },
];

const INFO_GROUPS = [
  {
    eyebrow: "MFA provides",
    title: "Don't bring — already covered",
    dark: true,
    items: [
      "Wetsuits + splash gear",
      "PFD / life jacket + helmet",
      "Large camp dry bag + day dry bag",
      "Tent, sleeping bag, pillow, pad, cot",
      "Camp chair, cup, meals, kitchen",
    ],
  },
  {
    eyebrow: "Leave at home",
    title: "Don't even pack it",
    items: [
      "Rolling suitcases on the river",
      "Fancy jewelry, wedding rings, nice watches",
      "Anything you'd hate to soak, lose, scratch, or sandblast",
      "Duplicate clothes beyond the 30 lb limit",
      "Work expectations — assume no Wi-Fi",
    ],
  },
];

function PackingChecklist() {
  // Persist each group separately so we don't blow away the whole list
  // when a new group is added. Key namespaced to the trip.
  const STORAGE_KEY = "middlefork2026.packing.v1";
  const [checked, setChecked] = React.useState(() => {
    try {
      return JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
    } catch {
      return {};
    }
  });

  React.useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(checked));
  }, [checked]);

  const toggle = (key) => {
    setChecked((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  const groupProgress = (group) => {
    const total = group.items.length;
    const done = group.items.filter((_, i) => checked[`${group.id}:${i}`]).length;
    return { done, total, pct: total === 0 ? 0 : Math.round((done / total) * 100) };
  };

  return (
    <div className="packing-grid">
      {PACKING_GROUPS.map((group) => {
        const prog = groupProgress(group);
        return (
          <div className="pack-card" key={group.id}>
            <div className="mono-label">{group.eyebrow}</div>
            <h3>{group.title}</h3>
            <ul className="pack-list">
              {group.items.map((item, i) => {
                const key = `${group.id}:${i}`;
                const isChecked = !!checked[key];
                return (
                  <li className="pack-item" key={i}>
                    <label>
                      <input
                        type="checkbox"
                        checked={isChecked}
                        onChange={() => toggle(key)}
                      />
                      <span className="check"></span>
                      <span className="text">{item}</span>
                    </label>
                  </li>
                );
              })}
            </ul>
            <div className="pack-progress">
              <div className="pack-progress-fill" style={{ width: `${prog.pct}%` }} />
            </div>
            <div className="pack-progress-label">
              <span>{prog.done} / {prog.total} packed</span>
              <span>{prog.pct}%</span>
            </div>
          </div>
        );
      })}

      {INFO_GROUPS.map((group, i) => (
        <div className={`pack-card info ${group.dark ? "dark" : ""}`} key={`info-${i}`}>
          <div className="mono-label">{group.eyebrow}</div>
          <h3>{group.title}</h3>
          <ul className="pack-list">
            {group.items.map((item, j) => (
              <li key={j}>{item}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

window.PackingChecklist = PackingChecklist;