"use client";

import Image from "next/image";

import { tokens } from "./tokens";
import { object, report } from "./fixtures";

interface HeroBarProps {
  onOpenInfo: () => void;
}

export default function HeroBar({ onOpenInfo }: HeroBarProps) {
  return (
    <div
      style={{
        display: "flex",
        gap: 30,
        padding: "14px 2px 12px",
        flex: "0 0 auto",
      }}
    >
      <style>{`
        .hero-pdf-btn:hover { border-color: ${tokens.accent}; background: rgba(46,139,255,.07); }
        .hero-pdf-btn:active { transform: translateY(1px); }
        .hero-calc-btn:hover { border-color: ${tokens.accent}; color: ${tokens.accent}; }
        .hero-coef-row:hover { background: rgba(46,139,255,.09); }
        @keyframes hero-scanv { 0% { transform: translateY(-100%); } 100% { transform: translateY(900%); } }
      `}</style>

      {/* LEFT: meta + buttons */}
      <div
        style={{
          flex: 1,
          minWidth: 0,
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          gap: 22,
        }}
      >
        <div style={{ display: "flex", gap: 26, alignItems: "flex-start" }}>
          <div>
            <div
              style={{
                fontSize: 9,
                letterSpacing: "2px",
                color: tokens.muted2,
                marginBottom: 6,
              }}
            >
              ОТЧЁТ
            </div>
            <div
              style={{
                fontFamily: tokens.font.mono,
                fontSize: 14,
                color: tokens.ink,
              }}
            >
              {report.id}
            </div>
          </div>
          <div
            style={{
              borderLeft: `1px solid ${tokens.lineSoft}`,
              paddingLeft: 26,
            }}
          >
            <div
              style={{
                fontSize: 9,
                letterSpacing: "2px",
                color: tokens.muted2,
                marginBottom: 6,
              }}
            >
              ДАТА
            </div>
            <div
              style={{
                fontFamily: tokens.font.mono,
                fontSize: 14,
                color: tokens.ink,
              }}
            >
              {report.date}
            </div>
          </div>
          <div
            style={{
              borderLeft: `1px solid ${tokens.lineSoft}`,
              paddingLeft: 26,
            }}
          >
            <div
              style={{
                fontSize: 9,
                letterSpacing: "2px",
                color: tokens.muted2,
                marginBottom: 6,
              }}
            >
              ДЕЙСТВИТЕЛЕН ДО
            </div>
            <div
              style={{
                fontFamily: tokens.font.mono,
                fontSize: 14,
                color: tokens.ink,
              }}
            >
              {report.validUntil}
            </div>
          </div>
        </div>

        <div style={{ display: "flex", gap: 12, width: "100%", maxWidth: 440 }}>
          <button
            type="button"
            className="hero-pdf-btn"
            style={{
              flex: 1,
              height: 50,
              background: tokens.surface.w55,
              border: `1px solid ${tokens.line}`,
              borderRadius: 7,
              display: "flex",
              alignItems: "center",
              gap: 11,
              padding: "0 16px",
              cursor: "pointer",
              fontFamily: tokens.font.sans,
              color: tokens.ink,
              transition: "all .15s",
            }}
          >
            <svg width="18" height="20" viewBox="0 0 18 20" fill="none">
              <path d="M2 1h9l5 5v13H2z" stroke="#2e8bff" strokeWidth="1.2" />
              <path d="M11 1v5h5" stroke="#2e8bff" strokeWidth="1.2" />
              <line x1="5" y1="11" x2="13" y2="11" stroke="#6f8195" />
              <line x1="5" y1="14" x2="13" y2="14" stroke="#6f8195" />
            </svg>
            <span
              style={{ fontSize: 11, fontWeight: 600, letterSpacing: "1px" }}
            >
              СКАЧАТЬ PDF-ОТЧЁТ
            </span>
          </button>
          <button
            type="button"
            className="hero-calc-btn"
            style={{
              flex: 1,
              height: 50,
              background: tokens.surface.w40,
              border: `1px solid ${tokens.line}`,
              borderRadius: 7,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              cursor: "pointer",
              fontFamily: tokens.font.sans,
              color: tokens.muted,
              fontSize: 11,
              fontWeight: 600,
              letterSpacing: "1.5px",
              transition: "all .15s",
            }}
          >
            КАК РАССЧИТАНО
          </button>
        </div>
      </div>

      {/* RIGHT: photo + overlays */}
      <div
        style={{
          position: "relative",
          width: 560,
          height: 152,
          flex: "0 0 auto",
          border: `1px solid ${tokens.line3}`,
          borderRadius: 6,
          overflow: "hidden",
          background: tokens.photoBg,
          boxShadow: "0 6px 26px rgba(40,80,130,.10)",
        }}
      >
        <Image
          src="/trade-in-v2/building.png"
          alt=""
          fill
          sizes="560px"
          style={{
            objectFit: "contain",
            objectPosition: "right center",
            filter: "saturate(.9) brightness(1.04)",
          }}
        />
        <div
          style={{
            position: "absolute",
            inset: 0,
            background:
              "linear-gradient(90deg,rgba(238,244,250,.96) 0%,rgba(238,244,250,.5) 22%,transparent 40%)",
          }}
        />
        <div
          style={{
            position: "absolute",
            inset: 0,
            background:
              "linear-gradient(0deg,rgba(230,240,250,.45),transparent 40%)",
          }}
        />
        <div
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            top: "34%",
            height: 1,
            background:
              "linear-gradient(90deg,transparent,rgba(46,139,255,.5),transparent)",
            animation: "hero-scanv 6s linear infinite",
          }}
        />

        {/* address card */}
        <div
          style={{
            position: "absolute",
            left: 16,
            top: "50%",
            transform: "translateY(-50%)",
            width: 182,
            background: tokens.surface.w72,
            backdropFilter: "blur(5px)",
            border: `1px solid ${tokens.line}`,
            borderRadius: 5,
            padding: "11px 13px",
          }}
        >
          <div
            style={{
              fontSize: 9,
              letterSpacing: "2.5px",
              color: tokens.muted2,
              marginBottom: 3,
            }}
          >
            АДРЕС
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3 }}>
            {object.address}
            <br />
            <span
              style={{ fontSize: 11, fontWeight: 400, color: tokens.muted }}
            >
              {object.city}
            </span>
          </div>
          <div
            style={{ height: 1, background: tokens.lineSoft, margin: "8px 0" }}
          />
          <div
            style={{
              fontFamily: tokens.font.mono,
              fontSize: 9,
              color: tokens.muted,
              lineHeight: 1.55,
            }}
          >
            {object.streetView}
          </div>
          <div
            style={{ height: 1, background: tokens.lineSoft, margin: "8px 0" }}
          />
          <div
            className="hero-coef-row"
            onClick={onOpenInfo}
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              cursor: "pointer",
              borderRadius: 4,
              margin: "-3px -5px",
              padding: "3px 5px",
              transition: "background .15s",
            }}
          >
            <span
              style={{
                fontSize: "8.5px",
                letterSpacing: "1.5px",
                color: tokens.muted2,
              }}
            >
              КОЭФ. ЛОКАЦИИ
            </span>
            <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span
                style={{
                  fontFamily: tokens.font.mono,
                  fontSize: 15,
                  fontWeight: 500,
                  color: tokens.accent,
                }}
              >
                {object.locationCoef}
              </span>
              <span
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  width: 14,
                  height: 14,
                  border: `1px solid ${tokens.accent}`,
                  borderRadius: "50%",
                  fontSize: "8.5px",
                  color: tokens.accent,
                  fontWeight: 600,
                }}
              >
                ?
              </span>
            </span>
          </div>
        </div>

        {/* compass */}
        <div
          style={{
            position: "absolute",
            right: 16,
            top: 14,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 2,
            color: tokens.accent,
          }}
        >
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            <circle cx="11" cy="11" r="10" stroke="#2e8bff" strokeWidth="1" />
            <path d="M11 3 L13 11 L11 9 L9 11 Z" fill="#2e8bff" />
          </svg>
          <span
            style={{
              fontFamily: tokens.font.mono,
              fontSize: 8,
              letterSpacing: ".5px",
              color: tokens.muted,
              whiteSpace: "nowrap",
            }}
          >
            {object.compass}
          </span>
        </div>

        {/* distance scale */}
        <div
          style={{
            position: "absolute",
            left: "50%",
            transform: "translateX(-50%)",
            bottom: 16,
            width: 170,
            fontFamily: tokens.font.mono,
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "flex-end",
              height: 8,
              borderBottom: "1px solid rgba(46,139,255,.55)",
            }}
          >
            <span
              style={{
                width: 1,
                height: 8,
                background: "rgba(46,139,255,.55)",
              }}
            />
            <span
              style={{
                width: 1,
                height: 5,
                background: "rgba(46,139,255,.45)",
              }}
            />
            <span
              style={{
                width: 1,
                height: 5,
                background: "rgba(46,139,255,.45)",
              }}
            />
            <span
              style={{
                width: 1,
                height: 5,
                background: "rgba(46,139,255,.45)",
              }}
            />
            <span
              style={{
                width: 1,
                height: 8,
                background: "rgba(46,139,255,.55)",
              }}
            />
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              fontSize: "7.5px",
              color: tokens.muted,
              marginTop: 3,
            }}
          >
            <span>0</span>
            <span>25</span>
            <span>50</span>
            <span>75</span>
            <span>100м</span>
          </div>
        </div>

        {/* corner brackets */}
        <div
          style={{
            position: "absolute",
            left: 8,
            top: 8,
            width: 14,
            height: 14,
            borderLeft: `1.5px solid ${tokens.accent}`,
            borderTop: `1.5px solid ${tokens.accent}`,
          }}
        />
        <div
          style={{
            position: "absolute",
            right: 8,
            top: 8,
            width: 14,
            height: 14,
            borderRight: `1.5px solid ${tokens.accent}`,
            borderTop: `1.5px solid ${tokens.accent}`,
          }}
        />
        <div
          style={{
            position: "absolute",
            left: 8,
            bottom: 8,
            width: 14,
            height: 14,
            borderLeft: `1.5px solid ${tokens.accent}`,
            borderBottom: `1.5px solid ${tokens.accent}`,
          }}
        />
        <div
          style={{
            position: "absolute",
            right: 8,
            bottom: 8,
            width: 14,
            height: 14,
            borderRight: `1.5px solid ${tokens.accent}`,
            borderBottom: `1.5px solid ${tokens.accent}`,
          }}
        />
      </div>
    </div>
  );
}