import { useEffect, useMemo, useState, type CSSProperties } from "react";
import HexLattice, { type HexNode } from "./HexLattice";

export type CurrentWarmth = "hot" | "warm" | "cool";
export type ResonancePattern = "hearts" | "stars" | "moons" | "hourglasses" | "balloons";

export interface CurrentRotationPerson {
  id: string;
  name: string;
  warmth: CurrentWarmth;
  floatLevel: "Rising" | "Airy" | "Drifting" | "Cloud Walking";
  resonanceScore: number;
  primarySignal: ResonancePattern;
  featuredItems: string[];
  daysInCurrent: number;
  heartsAvailable: number;
}

export interface CurrentRotationProps {
  title?: string;
  subtitle?: string;
  people?: CurrentRotationPerson[];
}

const DEFAULT_PEOPLE: CurrentRotationPerson[] = [
  {
    id: "mira",
    name: "Mira",
    warmth: "hot",
    floatLevel: "Cloud Walking",
    resonanceScore: 88,
    primarySignal: "hearts",
    featuredItems: ["Ramen Bar X", "Bike rides after sunset", "Ceramic mugs"],
    daysInCurrent: 11,
    heartsAvailable: 4,
  },
  {
    id: "sol",
    name: "Sol",
    warmth: "warm",
    floatLevel: "Airy",
    resonanceScore: 69,
    primarySignal: "stars",
    featuredItems: ["Jazz vinyl listening", "Indie film nights", "Espresso at 4pm"],
    daysInCurrent: 8,
    heartsAvailable: 2,
  },
  {
    id: "nadia",
    name: "Nadia",
    warmth: "cool",
    floatLevel: "Drifting",
    resonanceScore: 36,
    primarySignal: "moons",
    featuredItems: ["My own cooking", "Secondhand sofa", "Sunday hikes"],
    daysInCurrent: 4,
    heartsAvailable: 1,
  },
  {
    id: "iris",
    name: "Iris",
    warmth: "warm",
    floatLevel: "Rising",
    resonanceScore: 74,
    primarySignal: "hourglasses",
    featuredItems: ["Farmers market on Saturdays", "Language learning apps", "Composting"],
    daysInCurrent: 17,
    heartsAvailable: 3,
  },
  {
    id: "jun",
    name: "Jun",
    warmth: "hot",
    floatLevel: "Cloud Walking",
    resonanceScore: 92,
    primarySignal: "balloons",
    featuredItems: ["Hiking with my dog", "Gallery openings", "Meal-prepped weekdays"],
    daysInCurrent: 12,
    heartsAvailable: 5,
  },
  {
    id: "wren",
    name: "Wren",
    warmth: "cool",
    floatLevel: "Drifting",
    resonanceScore: 28,
    primarySignal: "stars",
    featuredItems: ["Bookshelf I actually use", "Train rides", "Climbing chalk"],
    daysInCurrent: 2,
    heartsAvailable: 0,
  },
  {
    id: "luca",
    name: "Luca",
    warmth: "warm",
    floatLevel: "Airy",
    resonanceScore: 61,
    primarySignal: "moons",
    featuredItems: ["Late breakfast", "Weekend markets", "A record player"],
    daysInCurrent: 9,
    heartsAvailable: 2,
  },
  {
    id: "aya",
    name: "Aya",
    warmth: "hot",
    floatLevel: "Drifting",
    resonanceScore: 81,
    primarySignal: "hourglasses",
    featuredItems: ["Shared dinners", "Museum afternoons", "Plants near every window"],
    daysInCurrent: 21,
    heartsAvailable: 3,
  },
];

const PATTERN_LABELS: Record<ResonancePattern, string> = {
  hearts: "Hearts",
  stars: "Stars",
  moons: "Moons",
  hourglasses: "Hourglasses",
  balloons: "Balloons",
};

const WARMTH_META: Record<CurrentWarmth, { label: string; icon: string; color: string }> = {
  hot: { label: "Hot", icon: "🔥", color: "#fb7185" },
  warm: { label: "Warm", icon: "🌡️", color: "#f59e0b" },
  cool: { label: "Cool", icon: "🌿", color: "#94a3b8" },
};

function hashString(value: string) {
  let hash = 0;
  for (let index = 0; index < value.length; index += 1) {
    hash = (hash * 31 + value.charCodeAt(index)) >>> 0;
  }
  return hash;
}

function initials(name: string) {
  return name
    .split(/\s+/)
    .filter(Boolean)
    .map((part) => part[0]?.toUpperCase())
    .slice(0, 2)
    .join("");
}

function warmthWeight(warmth: CurrentWarmth) {
  if (warmth === "hot") return 3;
  if (warmth === "warm") return 2;
  return 1;
}

function formatHourFraction(hours: number) {
  if (hours <= 0) return "0h";
  if (hours < 1) return `${Math.max(1, Math.round(hours * 60))}m`;
  return `${hours.toFixed(1)}h`;
}

function formatUntilNextHour(now: number) {
  const minutes = 60 - (Math.floor(now / 60000) % 60);
  return `${minutes === 60 ? 0 : minutes}m`;
}

function formatClock(now: number) {
  return new Intl.DateTimeFormat("en-US", {
    hour: "numeric",
    minute: "2-digit",
    hour12: false,
    timeZone: "America/Chicago",
  }).format(now);
}

function statusLabel(hoursInCurrent: number, dismissed: boolean) {
  if (dismissed) return "dismissed";
  if (hoursInCurrent >= 5.5) return "leaving soon";
  return "active";
}

export default function CurrentRotation({
  title = "The Current",
  subtitle = "Hourly ambient field, 36 hexes wide, with a six-hour rotation window and local dismissal controls.",
  people = DEFAULT_PEOPLE,
}: CurrentRotationProps) {
  const [now, setNow] = useState(() => Date.now());
  const [selectedId, setSelectedId] = useState(people[0]?.id ?? "");
  const [dismissedIds, setDismissedIds] = useState<string[]>([]);

  useEffect(() => {
    const interval = setInterval(() => setNow(Date.now()), 60_000);
    return () => clearInterval(interval);
  }, []);

  const dismissedSet = useMemo(() => new Set(dismissedIds), [dismissedIds]);
  const hourSeed = Math.floor(now / 3_600_000);

  const rotationRows = useMemo(
    () =>
      people.map((person, index) => {
        const seed = hashString(person.id) + hourSeed * 17 + index * 13;
        const ageMinutes = seed % (8 * 60);
        const hoursInCurrent = ageMinutes / 60;
        const hoursRemaining = Math.max(0, 6 - hoursInCurrent);
        const autoExpired = ageMinutes >= 6 * 60;

        return {
          ...person,
          hoursInCurrent,
          hoursRemaining,
          autoExpired,
          status: statusLabel(hoursInCurrent, dismissedSet.has(person.id)),
          slotRank: warmthWeight(person.warmth) * 1000 - hoursInCurrent * 100 - person.resonanceScore,
        };
      }),
    [dismissedSet, hourSeed, people],
  );

  const visiblePeople = useMemo(
    () =>
      rotationRows
        .filter((person) => !person.autoExpired && !dismissedSet.has(person.id))
        .sort((a, b) => b.slotRank - a.slotRank),
    [dismissedSet, rotationRows],
  );

  const circulatingPeople = useMemo(
    () =>
      rotationRows
        .filter((person) => person.autoExpired || dismissedSet.has(person.id))
        .sort((a, b) => a.hoursRemaining - b.hoursRemaining),
    [dismissedSet, rotationRows],
  );

  const selectedPerson =
    rotationRows.find((person) => person.id === selectedId) ??
    visiblePeople[0] ??
    rotationRows[0];

  const activeCount = visiblePeople.length;
  const circulatingCount = circulatingPeople.length;
  const averageWarmth =
    activeCount === 0
      ? 0
      : Math.round(
          visiblePeople.reduce((sum, person) => sum + person.resonanceScore, 0) / activeCount,
        );

  const currentNodes = useMemo<HexNode[]>(() => {
    const nodes: HexNode[] = [
      { id: "center-you", ring: 0, position: 0, label: "YOU", type: "you" },
    ];

    visiblePeople.slice(0, 36).forEach((person, index) => {
      nodes.push({
        id: person.id,
        ring: 6,
        position: index,
        label: initials(person.name),
        type:
          person.warmth === "hot"
            ? "resonance-hot"
            : person.warmth === "warm"
              ? "resonance-warm"
              : "resonance-cool",
        resonanceSignal: person.primarySignal,
      });
    });

    return nodes;
  }, [visiblePeople]);

  const selectedDismissed = selectedPerson ? dismissedSet.has(selectedPerson.id) : false;
  const selectedAutoExpired = selectedPerson ? selectedPerson.autoExpired : false;
  const selectedWarmth = selectedPerson ? WARMTH_META[selectedPerson.warmth] : WARMTH_META.cool;
  const nextTurn = formatUntilNextHour(now);
  const localClock = formatClock(now);

  const toggleDismiss = () => {
    if (!selectedPerson) return;
    setDismissedIds((current) =>
      current.includes(selectedPerson.id)
        ? current.filter((id) => id !== selectedPerson.id)
        : [...current, selectedPerson.id],
    );
  };

  const rootStyle: CSSProperties = {
    minHeight: "100%",
    padding: 24,
    background:
      "radial-gradient(circle at top, rgba(145, 160, 255, 0.12), transparent 32%), radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.10), transparent 28%), linear-gradient(180deg, #09090d 0%, #111117 100%)",
    color: "#efe7db",
    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
  };

  const cardStyle: CSSProperties = {
    background: "rgba(21, 22, 28, 0.92)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 22,
    boxShadow: "0 20px 50px rgba(0,0,0,0.24)",
  };

  return (
    <div style={rootStyle}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gap: 18 }}>
        <section style={{ ...cardStyle, padding: 22 }}>
          <div style={{ display: "flex", justifyContent: "space-between", gap: 18, flexWrap: "wrap", alignItems: "flex-start" }}>
            <div style={{ flex: 1, minWidth: 300 }}>
              <div style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "#9ca3af" }}>Cascade / R6</div>
              <h1 style={{ margin: "8px 0 8px", fontSize: 34, lineHeight: 1.05, color: "#f6d9b3" }}>{title}</h1>
              <p style={{ margin: 0, color: "#aca7b6", maxWidth: 820, fontSize: 15, lineHeight: 1.55 }}>{subtitle}</p>
            </div>

            <div style={{ minWidth: 300, maxWidth: 390, flex: 1, padding: 16, borderRadius: 18, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline" }}>
                <div>
                  <div style={{ fontSize: 12, color: "#9ca3af", letterSpacing: "0.12em", textTransform: "uppercase" }}>Hourly turn</div>
                  <div style={{ fontSize: 22, fontWeight: 700 }}>{localClock} · {nextTurn}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>Average warmth</div>
                  <div style={{ fontSize: 22, fontWeight: 700, color: averageWarmth >= 80 ? "#ffdca2" : "#f5c16c" }}>{averageWarmth}</div>
                </div>
              </div>
              <div style={{ height: 10, borderRadius: 999, background: "rgba(255,255,255,0.08)", overflow: "hidden", marginTop: 14 }}>
                <div style={{ width: `${averageWarmth}%`, height: "100%", borderRadius: 999, background: "linear-gradient(90deg, #94a3b8 0%, #f59e0b 50%, #fb7185 100%)", transition: "width 240ms ease" }} />
              </div>
              <div style={{ marginTop: 10, color: "#c3b8a9", fontSize: 13 }}>
                The field refreshes hourly. Hexes without interaction fall out after roughly six hours unless the resonance stays active.
              </div>
            </div>
          </div>
        </section>

        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.15fr) minmax(340px, 0.85fr)", gap: 18, alignItems: "start" }}>
          <div style={{ display: "grid", gap: 18 }}>
            <section style={{ ...cardStyle, padding: 18 }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap", alignItems: "center", marginBottom: 14 }}>
                <div>
                  <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>The living surface</div>
                  <h2 style={{ margin: "6px 0 0", fontSize: 22 }}>Who is in your world right now?</h2>
                </div>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap", color: "#d8d0c2", fontSize: 12 }}>
                  <LegendChip color="#fb7185" icon="🔥" label="Hot" />
                  <LegendChip color="#f59e0b" icon="🌡️" label="Warm" />
                  <LegendChip color="#94a3b8" icon="🌿" label="Cool" />
                </div>
              </div>

              <div style={{ borderRadius: 18, overflow: "hidden", border: "1px solid rgba(255,255,255,0.08)", background: "rgba(10, 10, 14, 0.72)" }}>
                <HexLattice
                  nodes={currentNodes}
                  showLabels
                  activeNodeId={selectedPerson?.id}
                  size="medium"
                  centerLabel="CURRENT"
                  focusRing={6}
                  onNodeClick={(node) => setSelectedId(node.id)}
                />
              </div>

              <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 10 }}>
                <StatTile label="Visible slots" value={`${activeCount}/36`} detail="People currently inside the hourly field." />
                <StatTile label="Circulating" value={`${circulatingCount}`} detail="Dismissed locally or rotated out by the six-hour window." />
                <StatTile label="Next refresh" value={nextTurn} detail="The Current recalculates on the next hour." />
              </div>
            </section>

            <section style={{ ...cardStyle, padding: 18 }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap", alignItems: "center", marginBottom: 12 }}>
                <div>
                  <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>Rotation queue</div>
                  <h3 style={{ margin: "6px 0 0", fontSize: 22 }}>Active now and moving back to circulation</h3>
                </div>
                <div style={{ color: "#bdb3a5", fontSize: 12 }}>Tap a hex to inspect it, or dismiss it from the field.</div>
              </div>

              <div style={{ display: "grid", gap: 12 }}>
                <QueueColumn
                  title="Active in Current"
                  hint="These people are still inside the hourly field."
                  items={visiblePeople.slice(0, 6).map((person) => ({
                    id: person.id,
                    name: person.name,
                    warmth: person.warmth,
                    note: `${formatHourFraction(person.hoursInCurrent)} in field · ${person.status}`,
                  }))}
                  activeId={selectedPerson?.id}
                  onSelect={(id) => setSelectedId(id)}
                />
                <QueueColumn
                  title="Circulating"
                  hint="These people rotated out or were dismissed locally."
                  items={circulatingPeople.slice(0, 6).map((person) => ({
                    id: person.id,
                    name: person.name,
                    warmth: person.warmth,
                    note: person.autoExpired ? `${formatHourFraction(person.hoursInCurrent)} since entry · hourly exit` : "dismissed locally",
                  }))}
                  activeId={selectedPerson?.id}
                  onSelect={(id) => setSelectedId(id)}
                  subdued
                />
              </div>
            </section>
          </div>

          <aside style={{ display: "grid", gap: 18 }}>
            <section style={{ ...cardStyle, padding: 18 }}>
              <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>Selected hex</div>
              <div style={{ marginTop: 12, display: "flex", gap: 14, alignItems: "center" }}>
                <div style={{ width: 60, height: 60, borderRadius: 18, display: "grid", placeItems: "center", background: `${selectedWarmth.color}22`, border: `1px solid ${selectedWarmth.color}55`, color: selectedWarmth.color, fontSize: 20, fontWeight: 800 }}>{initials(selectedPerson?.name ?? "")}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 24, fontWeight: 800, lineHeight: 1.05 }}>{selectedPerson?.name ?? "—"}</div>
                  <div style={{ color: "#a6a0b1", fontSize: 13, marginTop: 4 }}>{selectedWarmth.label.toLowerCase()} ambient field</div>
                </div>
              </div>

              <div style={{ display: "grid", gap: 10, marginTop: 16 }}>
                <InfoRow label="Warmth" value={`${selectedWarmth.icon} ${selectedWarmth.label}`} tone={selectedWarmth.color} />
                <InfoRow label="Float level" value={selectedPerson?.floatLevel ?? "—"} tone="#f5d79b" />
                <InfoRow label="Resonance score" value={String(selectedPerson?.resonanceScore ?? 0)} tone="#f5c16c" />
                <InfoRow label="Hearts available" value={`${selectedPerson?.heartsAvailable ?? 0}`} tone="#fb7185" />
                <InfoRow label="Time in Current" value={selectedPerson ? formatHourFraction(selectedPerson.hoursInCurrent) : "—"} tone="#9ac18a" />
                <InfoRow label="Rotation status" value={selectedPerson ? selectedPerson.status : "—"} tone={selectedDismissed || selectedAutoExpired ? "#f59e0b" : "#94a3b8"} />
              </div>

              <div style={{ marginTop: 16, display: "grid", gap: 10 }}>
                <ActionButton
                  label={selectedDismissed ? "Return to Current" : "Dismiss from Current"}
                  helper={
                    selectedDismissed
                      ? "Put this hex back into the active field if it still has room."
                      : selectedAutoExpired
                        ? "This one already rotated out. It can reappear on the next refresh if resonance returns."
                        : "Move this hex back to circulation for the rest of the session."
                  }
                  onClick={toggleDismiss}
                  disabled={!selectedPerson || selectedAutoExpired}
                />
              </div>
            </section>

            <section style={{ ...cardStyle, padding: 18 }}>
              <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>Selected hex details</div>
              <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
                <DetailCard title="Featured items" text={selectedPerson ? selectedPerson.featuredItems.join(" · ") : "—"} />
                <DetailCard
                  title="Why it matters"
                  text={
                    selectedPerson
                      ? selectedDismissed
                        ? "You dismissed this hex locally, but its resonance still belongs to the atmosphere."
                        : selectedAutoExpired
                          ? "It reached the six-hour rotation limit without enough new interaction to stay pinned."
                          : "This hex is still in the living surface: warmth first, deeper detail only when you investigate."
                      : "—"
                  }
                />
              </div>
            </section>

            <section style={{ ...cardStyle, padding: 18 }}>
              <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>At a glance</div>
              <div style={{ display: "grid", gap: 10, marginTop: 12 }}>
                <DetailCard title="Who enters" text="R5 drop-downs, circulation entries, and new users whose carts resonate right now." />
                <DetailCard title="Who leaves" text="People whose resonance fades below threshold, or who rotate out after 6+ hours without interaction." />
                <DetailCard title="What you see" text="Ambient warmth first. Tap deeper only when the signal justifies it." />
              </div>
            </section>
          </aside>
        </div>
      </div>
    </div>
  );
}

function LegendChip({ color, icon, label }: { color: string; icon: string; label: string }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "8px 10px", borderRadius: 999, background: `${color}18`, border: `1px solid ${color}44` }}>
      <span style={{ color, fontSize: 14 }}>{icon}</span>
      <span>{label}</span>
    </div>
  );
}

function StatTile({ label, value, detail }: { label: string; value: string; detail: string }) {
  return (
    <div style={{ borderRadius: 16, padding: 14, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)" }}>
      <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>{label}</div>
      <div style={{ marginTop: 6, fontSize: 22, fontWeight: 800, color: "#f5d79b" }}>{value}</div>
      <div style={{ marginTop: 6, color: "#b6ac9d", fontSize: 13, lineHeight: 1.45 }}>{detail}</div>
    </div>
  );
}

function QueueColumn({
  title,
  hint,
  items,
  activeId,
  onSelect,
  subdued = false,
}: {
  title: string;
  hint: string;
  items: Array<{ id: string; name: string; warmth: CurrentWarmth; note: string }>;
  activeId?: string;
  onSelect: (id: string) => void;
  subdued?: boolean;
}) {
  return (
    <div style={{ borderRadius: 18, padding: 14, background: subdued ? "rgba(255,255,255,0.02)" : "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline" }}>
        <div style={{ fontWeight: 700 }}>{title}</div>
        <div style={{ color: "#a7a1b3", fontSize: 12 }}>{items.length} shown</div>
      </div>
      <div style={{ marginTop: 4, color: "#b6ac9d", fontSize: 12, lineHeight: 1.5 }}>{hint}</div>
      <div style={{ marginTop: 10, display: "grid", gap: 8 }}>
        {items.length > 0 ? (
          items.map((item) => {
            const meta = WARMTH_META[item.warmth];
            const isActive = activeId === item.id;
            return (
              <button
                key={item.id}
                type="button"
                onClick={() => onSelect(item.id)}
                style={{
                  borderRadius: 14,
                  border: isActive ? `1px solid ${meta.color}` : "1px solid rgba(255,255,255,0.08)",
                  background: isActive ? `${meta.color}14` : "rgba(255,255,255,0.03)",
                  color: "#efe7db",
                  textAlign: "left",
                  padding: 10,
                  cursor: "pointer",
                }}
              >
                <div style={{ display: "flex", justifyContent: "space-between", gap: 10, alignItems: "center" }}>
                  <div style={{ fontWeight: 700 }}>{item.name}</div>
                  <div style={{ color: meta.color, fontSize: 14 }}>{meta.icon}</div>
                </div>
                <div style={{ marginTop: 4, color: "#a7a1b3", fontSize: 12, lineHeight: 1.45 }}>{item.note}</div>
              </button>
            );
          })
        ) : (
          <div style={{ borderRadius: 14, padding: 12, background: "rgba(255,255,255,0.02)", border: "1px dashed rgba(255,255,255,0.10)", color: "#a7a1b3", fontSize: 12, lineHeight: 1.5 }}>
            No one is circulating here yet.
          </div>
        )}
      </div>
    </div>
  );
}

function InfoRow({ label, value, tone }: { label: string; value: string; tone: string }) {
  return (
    <div style={{ borderRadius: 16, padding: 12, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)", display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center" }}>
      <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>{label}</div>
      <div style={{ fontWeight: 700, color: tone, textAlign: "right" }}>{value}</div>
    </div>
  );
}

function DetailCard({ title, text }: { title: string; text: string }) {
  return (
    <div style={{ borderRadius: 16, padding: 12, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)" }}>
      <div style={{ fontSize: 12, color: "#9ca3af", textTransform: "uppercase", letterSpacing: "0.12em" }}>{title}</div>
      <div style={{ marginTop: 6, color: "#d8d0c2", fontSize: 14, lineHeight: 1.55 }}>{text}</div>
    </div>
  );
}

function ActionButton({
  label,
  helper,
  onClick,
  disabled = false,
}: {
  label: string;
  helper: string;
  onClick: () => void;
  disabled?: boolean;
}) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={onClick}
      style={{
        width: "100%",
        borderRadius: 14,
        border: "1px solid rgba(255,255,255,0.12)",
        background: disabled ? "rgba(255,255,255,0.02)" : "rgba(245, 193, 108, 0.12)",
        color: disabled ? "#87909f" : "#f7efe2",
        textAlign: "left",
        padding: 12,
        cursor: disabled ? "not-allowed" : "pointer",
      }}
    >
      <div style={{ fontWeight: 700 }}>{label}</div>
      <div style={{ marginTop: 4, color: disabled ? "#7e8794" : "#b6ac9d", fontSize: 12, lineHeight: 1.45 }}>{helper}</div>
    </button>
  );
}