// Report footer for the /trade-in/v2 "МЕРА Оценка" design port.
// Faithful markup port of the design footer (МЕРА Оценка.dc.html, lines 426-439):
// report id / date / valid-until on the left, a decorative centre line, and the
// МЕРА v2.0.6 wordmark on the right. Static markup, data from fixtures.

import { tokens } from "./tokens";
import { report, version } from "./fixtures";
import type { Report } from "./types";

interface FooterProps {
  data?: Report;
  // M4: hide the «ДЕЙСТВИТЕЛЕН ДО» validity line when there is no real estimate
  // (mirrors HeroBar). Optional → unwired/fixture usage keeps showing it.
  hasEstimate?: boolean;
}

export function Footer({ data = report, hasEstimate }: FooterProps) {
  return (
    <div
      style={{
        height: 36,
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        borderTop: "1px solid rgba(150,175,200,.4)",
        marginTop: 14,
        flex: "0 0 auto",
        fontFamily: tokens.font.mono,
        fontSize: 10,
        letterSpacing: ".5px",
        color: tokens.muted2,
      }}
    >
      <div style={{ display: "flex", gap: 22 }}>
        <span>
          ОТЧЁТ <span style={{ color: tokens.muted }}>{data.id}</span>
        </span>
        <span>
          ДАТА <span style={{ color: tokens.muted }}>{data.date}</span>
        </span>
        {hasEstimate !== false && (
          <span>
            ДЕЙСТВИТЕЛЕН ДО{" "}
            <span style={{ color: tokens.muted }}>{data.validUntil}</span>
          </span>
        )}
      </div>

      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 6,
          flex: 1,
          justifyContent: "center",
          maxWidth: 420,
        }}
      >
        <span
          style={{
            width: 3,
            height: 3,
            borderRadius: "50%",
            background: tokens.muted4,
          }}
        />
        <span
          style={{
            width: 3,
            height: 3,
            borderRadius: "50%",
            background: tokens.muted4,
          }}
        />
        <div
          style={{
            flex: 1,
            height: 1,
            background: `linear-gradient(90deg,transparent,${tokens.lineGradient} 30%,${tokens.accent} 50%,${tokens.lineGradient} 70%,transparent)`,
          }}
        />
        <span
          style={{
            width: 3,
            height: 3,
            borderRadius: "50%",
            background: tokens.muted4,
          }}
        />
        <span
          style={{
            width: 3,
            height: 3,
            borderRadius: "50%",
            background: tokens.muted4,
          }}
        />
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
        <span
          style={{
            width: 5,
            height: 5,
            borderRadius: "50%",
            background: tokens.accent,
          }}
        />
        <span
          style={{
            fontFamily: tokens.font.sans,
            fontSize: 12,
            fontWeight: 600,
            letterSpacing: "4px",
            // C1: primary brand label — body2 (#46586c) reads as the most
            // prominent footer text, above the secondary id/date metadata.
            color: tokens.body2,
          }}
        >
          МЕРА
        </span>
        <span
          style={{
            fontFamily: tokens.font.mono,
            fontSize: 9,
            letterSpacing: "1px",
            color: tokens.muted4,
          }}
        >
          {version}
        </span>
      </div>
    </div>
  );
}
