"use client";

import { useState } from "react";
import type { CSSProperties } from "react";

import { tokens } from "@/components/trade-in/v2/tokens";
import TopNav from "@/components/trade-in/v2/TopNav";
import HeroBar from "@/components/trade-in/v2/HeroBar";
import ParamsPanel from "@/components/trade-in/v2/ParamsPanel";
import ResultPanel from "@/components/trade-in/v2/ResultPanel";
import { ObjectSummary } from "@/components/trade-in/v2/ObjectSummary";
import { Footer } from "@/components/trade-in/v2/Footer";
import SectionOverlay from "@/components/trade-in/v2/SectionOverlay";
import { LocationDrawer } from "@/components/trade-in/v2/LocationDrawer";

// OUTER HUD FRAME + 4 corner brackets (design lines 31-37). Decorative,
// non-interactive overlay drawn over the artboard gradient. The frame has
// chamfered octagonal corners (clip-path polygon) + 4px radius; the brackets
// sit just outside it at the artboard corners.
const FRAME_INSET = 14;
const BRACKET_INSET = 6;
const BRACKET_ARM = 22;
const BRACKET_W = 1.5;

const FRAME_CLIP =
  "polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)";

const brackets: { key: string; style: CSSProperties }[] = [
  {
    key: "tl",
    style: {
      top: BRACKET_INSET,
      left: BRACKET_INSET,
      borderTop: `${BRACKET_W}px solid ${tokens.bracket2}`,
      borderLeft: `${BRACKET_W}px solid ${tokens.bracket2}`,
    },
  },
  {
    key: "tr",
    style: {
      top: BRACKET_INSET,
      right: BRACKET_INSET,
      borderTop: `${BRACKET_W}px solid ${tokens.bracket2}`,
      borderRight: `${BRACKET_W}px solid ${tokens.bracket2}`,
    },
  },
  {
    key: "bl",
    style: {
      bottom: BRACKET_INSET,
      left: BRACKET_INSET,
      borderBottom: `${BRACKET_W}px solid ${tokens.bracket2}`,
      borderLeft: `${BRACKET_W}px solid ${tokens.bracket2}`,
    },
  },
  {
    key: "br",
    style: {
      bottom: BRACKET_INSET,
      right: BRACKET_INSET,
      borderBottom: `${BRACKET_W}px solid ${tokens.bracket2}`,
      borderRight: `${BRACKET_W}px solid ${tokens.bracket2}`,
    },
  },
];

export default function TradeInV2Page() {
  const [nav, setNav] = useState(0);
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <div
      style={{
        position: "relative",
        width: 1536,
        height: 1024,
        overflow: "hidden",
        background: tokens.gradientBg,
        fontFamily: tokens.font.sans,
        color: tokens.ink,
      }}
    >
      {/* OUTER HUD FRAME */}
      <div
        style={{
          position: "absolute",
          inset: FRAME_INSET,
          border: `1px solid ${tokens.line}`,
          borderRadius: 4,
          clipPath: FRAME_CLIP,
          pointerEvents: "none",
        }}
      />
      {/* 4 corner brackets */}
      {brackets.map((b) => (
        <div
          key={b.key}
          style={{
            position: "absolute",
            width: BRACKET_ARM,
            height: BRACKET_ARM,
            pointerEvents: "none",
            ...b.style,
          }}
        />
      ))}

      {/* CONTENT WRAP */}
      <div
        style={{
          position: "absolute",
          inset: 14,
          padding: "16px 28px",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <TopNav active={nav} onNavigate={setNav} />
        <HeroBar onOpenInfo={() => setDrawerOpen(true)} />

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "474px 1fr 250px",
            gap: 18,
            flex: 1,
            minHeight: 0,
          }}
        >
          <ParamsPanel />
          <ResultPanel onNavigate={setNav} />
          <ObjectSummary onNavigate={setNav} />
        </div>

        <Footer />
      </div>

      {nav !== 0 && (
        <SectionOverlay
          active={nav}
          onClose={() => setNav(0)}
          onNavigate={setNav}
        />
      )}
      <LocationDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} />
    </div>
  );
}