// Trip input panel — origin, destination, dates, schedule, chronotype.
// All controls share a single muted styling language; values feed the plan.

const { useState: useStateInp } = React;
const { fmtHM } = window.JL;

function TripInputs({
  origin, setOrigin,
  dest, setDest,
  departure, setDeparture,
  arrival, setArrival,
  tripDays, setTripDays,
  bedtime, setBedtime,
  waketime, setWaketime,
  chronotype, setChronotype,
  caffeineCutoff, setCaffeineCutoff,
}) {
  return (
    <div className="jl-stagger" style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
      gap: 14,
      padding: '0 28px 18px',
    }}>
      <CityField label="ORIGIN"      value={origin} setValue={setOrigin} accent="#7df9ff" />
      <CityField label="DESTINATION" value={dest}   setValue={setDest}   accent="#ffd166" />

      <DateField label="DEPART" value={departure} setValue={setDeparture} />
      <DateField label="ARRIVE" value={arrival}   setValue={setArrival} />

      <NumberField label="TRIP DAYS" value={tripDays} setValue={setTripDays} min={1} max={60} unit="days" />

      <TimeField label="USUAL BEDTIME" value={bedtime}  setValue={setBedtime} />
      <TimeField label="USUAL WAKE"    value={waketime} setValue={setWaketime} />

      <SelectField label="CHRONOTYPE" value={chronotype} setValue={setChronotype}
        options={[
          { value: 'lark',    label: '🌅 Morning lark' },
          { value: 'neutral', label: '⚖️ Neutral' },
          { value: 'owl',     label: '🦉 Night owl' },
        ]} />

      <NumberField label="CAFFEINE CUTOFF" value={caffeineCutoff} setValue={setCaffeineCutoff}
        min={0} max={12} step={0.5} unit="h before bed" />
    </div>
  );
}

function FieldShell({ label, accent = 'rgba(255,255,255,0.5)', children }) {
  return (
    <div>
      <div style={{
        fontSize: 9, color: accent, letterSpacing: '0.3em',
        textTransform: 'uppercase', fontWeight: 700, marginBottom: 6,
      }}>{label}</div>
      {children}
    </div>
  );
}

function CityField({ label, value, setValue, accent }) {
  return <CityCombo value={value} onChange={setValue} label={label} accent={accent} />;
}

const INPUT_STYLE = {
  width: '100%', boxSizing: 'border-box',
  background: 'rgba(255,255,255,0.04)',
  border: '1px solid rgba(255,255,255,0.14)',
  borderRadius: 10, padding: '10px 12px',
  color: '#fafafa', fontSize: 14, fontFamily: 'inherit',
  outline: 'none', cursor: 'text',
  transition: 'border-color .15s, box-shadow .15s, background .15s',
};

function DateField({ label, value, setValue }) {
  return (
    <FieldShell label={label}>
      <input type="datetime-local"
        value={toLocalInput(value)}
        onChange={(e) => setValue(fromLocalInput(e.target.value))}
        style={{ ...INPUT_STYLE, colorScheme: 'dark' }} />
    </FieldShell>
  );
}

function TimeField({ label, value, setValue }) {
  return (
    <FieldShell label={label}>
      <input type="time" value={value} onChange={(e) => setValue(e.target.value)}
        style={{ ...INPUT_STYLE, colorScheme: 'dark' }} />
    </FieldShell>
  );
}

function NumberField({ label, value, setValue, min, max, step = 1, unit }) {
  return (
    <FieldShell label={label}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, ...INPUT_STYLE, padding: '6px 12px' }}>
        <button type="button" onClick={() => setValue(Math.max(min, value - step))}
          style={stepperBtn}>−</button>
        <input type="number" value={value} min={min} max={max} step={step}
          onChange={(e) => setValue(Math.max(min, Math.min(max, +e.target.value || min)))}
          style={{
            flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none',
            color: '#fafafa', fontSize: 14, fontFamily: 'inherit', textAlign: 'center',
            fontVariantNumeric: 'tabular-nums', MozAppearance: 'textfield',
          }} />
        {unit && <span style={{ fontSize: 10, color: 'rgba(255,255,255,.5)', letterSpacing: '0.05em' }}>{unit}</span>}
        <button type="button" onClick={() => setValue(Math.min(max, value + step))}
          style={stepperBtn}>+</button>
      </div>
    </FieldShell>
  );
}

const stepperBtn = {
  background: 'rgba(255,255,255,0.07)', border: 'none',
  color: '#fafafa', width: 22, height: 22, borderRadius: 6,
  cursor: 'pointer', fontSize: 14, lineHeight: 1, fontFamily: 'inherit',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
};

function SelectField({ label, value, setValue, options }) {
  return (
    <FieldShell label={label}>
      <select value={value} onChange={(e) => setValue(e.target.value)}
        style={{
          ...INPUT_STYLE, appearance: 'none', cursor: 'pointer',
          backgroundImage: `linear-gradient(45deg, transparent 50%, rgba(255,255,255,.5) 50%), linear-gradient(135deg, rgba(255,255,255,.5) 50%, transparent 50%)`,
          backgroundPosition: 'calc(100% - 16px) center, calc(100% - 11px) center',
          backgroundSize: '5px 5px, 5px 5px',
          backgroundRepeat: 'no-repeat',
        }}>
        {options.map(o => <option key={o.value} value={o.value} style={{ background: '#14131c' }}>{o.label}</option>)}
      </select>
    </FieldShell>
  );
}

function toLocalInput(d) {
  if (!d) return '';
  const z = (n) => String(n).padStart(2, '0');
  return `${d.getFullYear()}-${z(d.getMonth()+1)}-${z(d.getDate())}T${z(d.getHours())}:${z(d.getMinutes())}`;
}
function fromLocalInput(s) {
  if (!s) return new Date();
  return new Date(s);
}

window.TripInputs = TripInputs;