// screens-history.jsx — recent parking log per car (timeline).

function HistoryScreen({ state, store, units, onGoFind }) {
  const car = state.cars.find((c) => c.id === state.selectedCarId) || state.cars[0];
  if (!car) {
    return <div className="wmc-screen"><ScreenHeader title="History" /><EmptyState icon={<IconClock size={30} />} title="No car selected" body="Add a car first." /></div>;
  }

  const entries = [];
  if (car.current) entries.push({ ...car.current, kind: "current" });
  car.history.forEach((h) => entries.push({ ...h, kind: "past" }));

  return (
    <div className="wmc-screen">
      <ScreenHeader title="History" subtitle="Recent parking spots" />
      <CarSelector cars={state.cars} selectedId={car.id} onSelect={store.selectCar} />
      <div style={{ height: 18 }} />

      {entries.length === 0 ? (
        <EmptyState icon={<IconClock size={30} />} title="No history yet"
          body={`Once you park the ${car.name}, your recent spots will collect here.`} />
      ) : (
        <div style={{ position: "relative", paddingLeft: 4 }}>
          {/* timeline rail */}
          <div style={{ position: "absolute", left: 13, top: 18, bottom: 18, width: 2, background: "var(--hairline)" }} />
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {entries.map((e, i) => (
              <HistoryItem key={e.timestamp + "" + i} entry={e} car={car} store={store} units={units} onGoFind={onGoFind} />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function HistoryItem({ entry, car, store, units, onGoFind }) {
  const isCurrent = entry.kind === "current";
  return (
    <div style={{ display: "flex", gap: 14, alignItems: "stretch" }}>
      {/* node */}
      <div style={{ position: "relative", width: 24, flexShrink: 0, display: "flex", justifyContent: "center", paddingTop: 18 }}>
        <span style={{
          width: isCurrent ? 18 : 12, height: isCurrent ? 18 : 12, borderRadius: 999, marginTop: isCurrent ? 0 : 3,
          background: isCurrent ? "var(--accent)" : "var(--surface)",
          border: isCurrent ? "none" : "2px solid var(--border-strong)",
          boxShadow: isCurrent ? "0 0 0 4px var(--accent-glow)" : "none", zIndex: 1,
        }} />
      </div>

      <Card pad={14} style={{ flex: 1, marginBottom: 8, ...(isCurrent ? { border: "1px solid var(--accent-soft)" } : {}) }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 10 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ fontSize: 15.5, fontWeight: 750, color: "var(--text)" }}>{relativeTime(entry.timestamp)}</span>
              {isCurrent && <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.5, textTransform: "uppercase", color: "var(--accent-ink)", background: "var(--accent-soft)", padding: "2px 7px", borderRadius: 999 }}>Current</span>}
            </div>
            <div style={{ fontSize: 12.5, color: "var(--text-3)", marginTop: 3 }}>{dateLabel(entry.timestamp)} · {clockTime(entry.timestamp)}</div>
          </div>
          {!isCurrent && (
            <IconButton label="Remove" size={32} onClick={() => { store.removeHistory(car.id, entry.timestamp); toast("Removed from history"); }} style={{ color: "var(--text-3)", background: "transparent" }}>
              <IconTrash size={16} />
            </IconButton>
          )}
        </div>

        {entry.note && (
          <div style={{ fontSize: 14, color: "var(--text)", marginTop: 9, display: "flex", gap: 7, alignItems: "flex-start" }}>
            <span style={{ color: "var(--text-3)", flexShrink: 0, marginTop: 1 }}><IconNote size={15} /></span>
            {entry.note}
          </div>
        )}

        <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
          {isCurrent && <button className="wmc-btn wmc-link" onClick={onGoFind} style={linkBtn("var(--accent-ink)")}><IconCompass size={15} /> Find</button>}
          <button className="wmc-btn wmc-link" onClick={() => window.open(mapsUrl(entry), "_blank")} style={linkBtn("var(--text-2)")}><IconExternal size={15} /> Open in Maps</button>
        </div>
      </Card>
    </div>
  );
}

function linkBtn(color) {
  return {
    display: "inline-flex", alignItems: "center", gap: 6, cursor: "pointer",
    background: "var(--surface-2)", border: "none", borderRadius: 999, padding: "7px 13px",
    font: "inherit", fontSize: 13, fontWeight: 650, color,
  };
}

Object.assign(window, { HistoryScreen });