// itrymo — Eat-bucket specific filter sections
// Companions, occasion, included-by-default inclusions, then tag inputs.

const COMPANIONS = [
  { id: 'large', label: 'Large group',  tip: '5+ people' },
];
const COMPANION_EXTRAS = [
  { id: 'elderly', label: 'With elderly' },
  { id: 'kids',    label: 'With kids' },
  { id: 'pet',     label: 'With pet' },
];
const OCCASIONS = [
  { id: 'none', label: 'No occasion' },
  { id: 'with', label: 'With occasion' },
];
const INCLUSIONS = [
  { id: 'noExtraCharges',  label: 'No extra charges' },
  { id: 'noDrinkRequired', label: 'No drink required' },
  { id: 'noTableCharge',   label: 'No table charge' },
];

// Do-bucket specific
const BUDGETS = [
  { id: 'free',    label: 'Free',        tip: 'No entry fee · parks, temples, beaches' },
  { id: 'mid',     label: '¥ Budget',    tip: '¥1k–3k / ticket · museums, tea ceremony, tours' },
  { id: 'high',    label: '¥¥ Mid',      tip: '¥3k–8k / ticket · surfing, ATV, kayaking' },
  { id: 'splurge', label: '¥¥¥ Splurge', tip: '¥8k+ / ticket · skydiving, helicopter, bungee' },
];
const ENVS = [
  { id: 'indoor',  label: 'Indoor'  },
  { id: 'outdoor', label: 'Outdoor' },
];
const ENERGY_TIERS = [
  { id: 't1', label: 'Just chill',          tip: 'Workshops, cruises, museums' },
  { id: 't2', label: 'Active but safe',     tip: 'Safaris, ziplines, hikes' },
  { id: 't3', label: 'Give me action',      tip: 'ATVs, surfing, kayaking' },
  { id: 't4', label: 'Bucket-list thrill',  tip: 'Skydiving, bungee, canyoning' },
];
const ENV_TYPES = [
  { id: 'water', label: 'Water' },
  { id: 'land',  label: 'Land'  },
  { id: 'air',   label: 'Air'   },
];

// Stay-bucket specific
const STAY_TIERS = [
  { id: 'savings', label: '¥ Budget',    tip: '¥3k–8k / night · hostels, capsules, value picks' },
  { id: 'safe',    label: '¥¥ Mid',      tip: '¥8k–20k / night · reliable mid-range brands' },
  { id: 'premium', label: '¥¥¥ Splurge', tip: '¥20k+ / night · boutique, ryokan, luxury' },
];
const STAY_PROXIMITY = [
  { id: 'center',  label: 'Near center', tip: '< 2 km from city core' },
  { id: 'midway',  label: 'Mid-way',     tip: '2–6 km out' },
  { id: 'distant', label: 'Distant',     tip: '6+ km, retreat-style' },
];
const STAY_MUST_HAVES = [
  { id: 'privateBath',  label: 'Private bath' },
  { id: 'wifi',         label: 'Wi-Fi' },
  { id: 'elevator',     label: 'Elevator' },
  { id: 'aircon',       label: 'Aircon' },
  { id: 'frontDesk247', label: '24/7 front desk' },
  { id: 'freeCancel',   label: 'Free cancellation' },
  { id: 'noExtraFees',  label: 'No extra charges' },
  { id: 'parking',      label: 'Parking' },
  { id: 'petsAllowed',  label: 'Pets allowed' },
];
const STAY_NICE_TO_HAVES = [
  { id: 'pool',      label: 'Pool' },
  { id: 'sauna',     label: 'Sauna' },
  { id: 'massage',   label: 'Massage' },
  { id: 'gym',       label: 'Gym' },
  { id: 'breakfast', label: 'With breakfast' },
];

const EAT_BUDGETS = [
  { id: 'budget',  label: '¥ Budget',    tip: 'Under ¥1,500 / person · ramen, conveyor sushi, street food' },
  { id: 'mid',     label: '¥¥ Mid',      tip: '¥1,500–¥3,000 / person · casual sit-down, izakayas' },
  { id: 'splurge', label: '¥¥¥ Splurge', tip: '¥3,000+ / person · wagyu, omakase, fine dining' },
];

const DEFAULT_FOOD_FILTERS = {
  companions: null,
  withFlags: [],
  occasion: null,
  inclusions: ['noExtraCharges', 'noDrinkRequired', 'noTableCharge'],
  eatBudget: null,
};
const DEFAULT_DO_FILTERS = {
  companions: null,
  withFlags: [],
  budget: null,
  env: null,         // indoor | outdoor
  energy: null,      // t1..t4
  envTypes: [],      // water/land/air
};
const DEFAULT_STAY_FILTERS = {
  tiers: [],
  proximity: [],
  mustHaves: [],
  niceToHaves: [],
};

// ─────────────────────────────────────────────────────────────
// RadioChips — single-select pills (exclusive)
// ─────────────────────────────────────────────────────────────
function RadioChips({ options, value, onChange }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
      {options.map((o) => (
        <Pill key={o.id} small active={value === o.id} onClick={() => onChange(o.id)}>
          {o.label}
        </Pill>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CheckChips — multi-select pills with leading check/plus icon
// ─────────────────────────────────────────────────────────────
function CheckChips({ options, value, onToggle }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
      {options.map((o) => {
        const on = value.includes(o.id);
        return (
          <Pill key={o.id} small active={on} onClick={() => onToggle(o.id)}
                leading={<Icon name={on ? 'check' : 'plus'} size={10} />}>
            {o.label}
          </Pill>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Eat filter sections — three pieces that can be placed independently:
//   <FoodWhoSection>      — Travelling With (large group + with kids/pet)
//   <FoodOccasionSection> — Occasion
//   <FoodInclusionsSection> — Included by default
// ─────────────────────────────────────────────────────────────
function FoodWhoSection({ filters, setFilters, bucket }) {
  const set = (patch) => setFilters((f) => ({ ...f, ...patch }));
  const toggleArr = (key, id) => setFilters((f) => ({
    ...f, [key]: f[key].includes(id) ? f[key].filter((x) => x !== id) : [...f[key], id],
  }));
  return (
    <div>
      <div style={sectionLabelStyle}>Travelling With</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {COMPANIONS.map((o) => (
          <Pill key={o.id} small title={o.tip}
                active={filters.companions === o.id}
                onClick={() => set({ companions: filters.companions === o.id ? null : o.id })}>
            {o.label}
          </Pill>
        ))}
        {COMPANION_EXTRAS.filter((o) => o.id !== 'elderly' || bucket === 'do').map((o) => {
          const on = filters.withFlags.includes(o.id);
          return (
            <Pill key={o.id} small active={on} onClick={() => toggleArr('withFlags', o.id)}>
              {o.label}
            </Pill>
          );
        })}
      </div>
    </div>
  );
}

function FoodOccasionSection({ filters, setFilters }) {
  return (
    <div>
      <div style={sectionLabelStyle}>Occasion</div>
      <RadioChips options={OCCASIONS}
                  value={filters.occasion}
                  onChange={(id) => setFilters((f) => ({ ...f, occasion: id }))} />
    </div>
  );
}

function FoodInclusionsSection({ filters, setFilters }) {
  const toggleArr = (key, id) => setFilters((f) => ({
    ...f, [key]: f[key].includes(id) ? f[key].filter((x) => x !== id) : [...f[key], id],
  }));
  return (
    <div>
      <div style={{ ...sectionLabelStyle, display: 'flex', alignItems: 'center', gap: 6 }}>
        Included by default
        <span style={{
          fontSize: 9, padding: '1px 6px', borderRadius: 999,
          background: T.bg, color: T.muted, fontWeight: 600, letterSpacing: 0,
          textTransform: 'none', border: `1px solid ${T.borderSoft}`,
        }}>uncheck to allow</span>
      </div>
      <CheckChips options={INCLUSIONS}
                  value={filters.inclusions}
                  onToggle={(id) => toggleArr('inclusions', id)} />
    </div>
  );
}

const sectionLabelStyle = {
  fontSize: 10, color: T.muted, letterSpacing: 0.6,
  textTransform: 'uppercase', fontWeight: 700, marginBottom: 6,
};

// Keep the combined component for backwards-compat (web v3 still uses it).
function FoodExtraFilters({ filters, setFilters }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <FoodWhoSection filters={filters} setFilters={setFilters} />
      <FoodOccasionSection filters={filters} setFilters={setFilters} />
      <FoodInclusionsSection filters={filters} setFilters={setFilters} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Do-bucket sections
// ─────────────────────────────────────────────────────────────
function DoBudgetSection({ filters, setFilters }) {
  return (
    <div>
      <div style={sectionLabelStyle}>Price range</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {BUDGETS.map((o) => (
          <Pill key={o.id} small title={o.tip}
                active={filters.budget === o.id}
                onClick={() => setFilters((f) => ({ ...f, budget: f.budget === o.id ? null : o.id }))}>
            {o.label}
          </Pill>
        ))}
      </div>
    </div>
  );
}

function DoEnvSection({ filters, setFilters }) {
  return (
    <div>
      <div style={sectionLabelStyle}>Indoor / Outdoor</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {ENVS.map((o) => (
          <Pill key={o.id} small
                active={filters.env === o.id}
                onClick={() => setFilters((f) => ({ ...f, env: f.env === o.id ? null : o.id }))}>
            {o.label}
          </Pill>
        ))}
      </div>
    </div>
  );
}

function DoEnergySection({ filters, setFilters }) {
  return (
    <div>
      <div style={{ ...sectionLabelStyle, display: 'flex', alignItems: 'center', gap: 6 }}>
        Energy level
        {filters.energy && (
          <span style={{
            fontSize: 9, padding: '1px 6px', borderRadius: 999,
            background: T.accentBg, color: T.accent, fontWeight: 700, letterSpacing: 0,
            textTransform: 'none', border: `1px solid ${T.accentBd}`,
          }}>
            {(ENERGY_TIERS.find((t) => t.id === filters.energy) || {}).tip}
          </span>
        )}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {ENERGY_TIERS.map((o) => (
          <Pill key={o.id} small title={o.tip}
                active={filters.energy === o.id}
                onClick={() => setFilters((f) => ({ ...f, energy: f.energy === o.id ? null : o.id }))}>
            {o.label}
          </Pill>
        ))}
      </div>
    </div>
  );
}

function DoEnvTypesSection({ filters, setFilters }) {
  const toggle = (id) => setFilters((f) => ({
    ...f, envTypes: f.envTypes.includes(id) ? f.envTypes.filter((x) => x !== id) : [...f.envTypes, id],
  }));
  return (
    <div>
      <div style={sectionLabelStyle}>Water · Land · Air</div>
      <CheckChips options={ENV_TYPES} value={filters.envTypes} onToggle={toggle} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Stay-bucket sections
// ─────────────────────────────────────────────────────────────
function StayTierSection({ filters, setFilters }) {
  const toggle = (id) => setFilters((f) => ({
    ...f, tiers: f.tiers.includes(id) ? f.tiers.filter((x) => x !== id) : [...f.tiers, id],
  }));
  return (
    <div>
      <div style={sectionLabelStyle}>Price range</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {STAY_TIERS.map((o) => {
          const on = filters.tiers.includes(o.id);
          return (
            <Pill key={o.id} small title={o.tip} active={on}
                  onClick={() => toggle(o.id)}
                  leading={<Icon name={on ? 'check' : 'plus'} size={10} />}>
              {o.label}
            </Pill>
          );
        })}
      </div>
    </div>
  );
}

function StayProximitySection({ filters, setFilters }) {
  const toggle = (id) => setFilters((f) => ({
    ...f, proximity: f.proximity.includes(id) ? f.proximity.filter((x) => x !== id) : [...f.proximity, id],
  }));
  return (
    <div>
      <div style={sectionLabelStyle}>Proximity</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {STAY_PROXIMITY.map((o) => {
          const on = filters.proximity.includes(o.id);
          return (
            <Pill key={o.id} small title={o.tip} active={on}
                  onClick={() => toggle(o.id)}
                  leading={<Icon name={on ? 'check' : 'plus'} size={10} />}>
              {o.label}
            </Pill>
          );
        })}
      </div>
    </div>
  );
}

function StayMustHavesSection({ filters, setFilters }) {
  const toggle = (id) => setFilters((f) => ({
    ...f, mustHaves: f.mustHaves.includes(id) ? f.mustHaves.filter((x) => x !== id) : [...f.mustHaves, id],
  }));
  return (
    <div>
      <div style={sectionLabelStyle}>Must-haves</div>
      <CheckChips options={STAY_MUST_HAVES} value={filters.mustHaves} onToggle={toggle} />
    </div>
  );
}

function StayNiceToHavesSection({ filters, setFilters }) {
  const toggle = (id) => setFilters((f) => ({
    ...f, niceToHaves: f.niceToHaves.includes(id) ? f.niceToHaves.filter((x) => x !== id) : [...f.niceToHaves, id],
  }));
  return (
    <div>
      <div style={sectionLabelStyle}>Nice-to-haves</div>
      <CheckChips options={STAY_NICE_TO_HAVES} value={filters.niceToHaves} onToggle={toggle} />
    </div>
  );
}

function EatBudgetSection({ filters, setFilters }) {
  return (
    <div>
      <div style={sectionLabelStyle}>Price range</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {EAT_BUDGETS.map((o) => (
          <Pill key={o.id} small title={o.tip}
                active={filters.eatBudget === o.id}
                onClick={() => setFilters((f) => ({ ...f, eatBudget: f.eatBudget === o.id ? null : o.id }))}>
            {o.label}
          </Pill>
        ))}
      </div>
      {filters.eatBudget && (
        <div style={{ fontSize: 11, color: '#888', marginTop: 4 }}>
          {(EAT_BUDGETS.find(b => b.id === filters.eatBudget) || {}).tip}
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  COMPANIONS, COMPANION_EXTRAS, OCCASIONS, INCLUSIONS, DEFAULT_FOOD_FILTERS,
  EAT_BUDGETS, EatBudgetSection,
  BUDGETS, ENVS, ENERGY_TIERS, ENV_TYPES, DEFAULT_DO_FILTERS,
  STAY_TIERS, STAY_PROXIMITY, STAY_MUST_HAVES, STAY_NICE_TO_HAVES, DEFAULT_STAY_FILTERS,
  RadioChips, CheckChips, FoodExtraFilters,
  FoodWhoSection, FoodOccasionSection, FoodInclusionsSection,
  DoBudgetSection, DoEnvSection, DoEnergySection, DoEnvTypesSection,
  StayTierSection, StayProximitySection, StayMustHavesSection, StayNiceToHavesSection,
});