import { eligibleBaseUnits, formatAmount, type V2Position } from "../data/simulation";
import { Badge } from "./ui";

export function PositionCard({
  position,
  selected,
  blocked,
  onToggle,
}: {
  position: V2Position;
  selected: boolean;
  blocked: boolean;
  onToggle: (id: string) => void;
}) {
  const noV3 = position.v3 === null;
  const disabled = noV3 || blocked;
  const eligible = eligibleBaseUnits(position);
  const capped =
    position.v3 !== null &&
    BigInt(position.amountBaseUnits) > BigInt(position.v3.capBaseUnits);

  return (
    <article
      className="position"
      data-selected={selected}
      data-testid={`position-${position.id}`}
    >
      <div className="position-head">
        <div>
          <div className="position-title">{position.label}</div>
          <div className="small mono">
            {position.v2Contract} · {position.chainLabel} ({position.chainId}) ·{" "}
            {formatAmount(position.amountBaseUnits, position.assetDecimals)}{" "}
            {position.assetSymbol}
          </div>
        </div>
        <div className="position-badges">
          <Badge>{position.contractStatus === "legacy" ? "legacy v2" : "legacy v2 · active"}</Badge>
          {noV3 ? (
            <Badge tone="warn" testId={`no-v3-${position.id}`}>
              stays in V2
            </Badge>
          ) : (
            <Badge tone={selected ? "accent" : "neutral"} testId={`decision-${position.id}`}>
              {selected ? "opted in to V3" : "keeping V2"}
            </Badge>
          )}
          {position.v3 && !position.v3.reversible && (
            <Badge tone="danger">irreversible in pilot</Badge>
          )}
        </div>
      </div>

      <p className="position-note">{position.v2Note}</p>

      {position.v3 && (
        <dl className="kv" style={{ marginTop: 12 }}>
          <dt>V3 target</dt>
          <dd>
            {position.v3.contract}{" "}
            <span className="small">({position.v3.address} — simulated)</span>
          </dd>
          <dt>Pilot cap</dt>
          <dd>{position.v3.capLabel}</dd>
          <dt>Eligible now</dt>
          <dd>
            {formatAmount(eligible, position.assetDecimals)} {position.assetSymbol}
            {capped && (
              <span className="small">
                {" "}
                — capped, remainder stays in V2
              </span>
            )}
          </dd>
          <dt>How it moves</dt>
          <dd style={{ fontFamily: "var(--font-sans)" }}>{position.v3.mechanics}</dd>
        </dl>
      )}

      <label
        className="optin"
        data-disabled={disabled}
        htmlFor={`optin-${position.id}`}
      >
        <input
          id={`optin-${position.id}`}
          type="checkbox"
          checked={selected}
          disabled={disabled}
          onChange={() => onToggle(position.id)}
          data-testid={`optin-${position.id}`}
          aria-describedby={`optin-hint-${position.id}`}
        />
        <span>
          <span className="optin-label">
            Migrate this position to V3 (optional)
          </span>
          <span className="optin-hint" id={`optin-hint-${position.id}`}>
            {noV3
              ? "No V3 equivalent during the Base pilot — this position stays in V2."
              : blocked
                ? "Disabled: solvency data source is failing."
                : "Unchecked means keep this position exactly as it is in V2. That is the default."}
          </span>
        </span>
      </label>
    </article>
  );
}
