"use client";

import type { StarterKitDefinition } from "@/lib/design-kits/types";
import { JM } from "./modal-theme";

/**
 * Lightweight faux UI chrome so users can compare starters without loading each stack.
 */
export function DesignKitPreviewPane({ kit }: { kit: StarterKitDefinition }) {
  const accent = kit.defaults.accentHex ?? "#6366f1";
  const r = kit.defaults.radiusMdPx ?? 8;
  const dense = kit.defaults.density === "compact";
  const ff =
    kit.defaults.fontPreset === "system"
      ? 'ui-sans-serif, system-ui, sans-serif'
      : '"Inter", ui-sans-serif, sans-serif';

  const foundation = kit.uiFoundation;
  const btnFlat = foundation === "mui-material";
  const btnGhostBorder = foundation === "shadcn-ui";
  const pillChrome = foundation === "heroui";

  return (
    <div
      style={{
        fontFamily: ff,
        height: "100%",
        minHeight: 280,
        display: "flex",
        flexDirection: "column",
        borderRadius: r + 4,
        overflow: "hidden",
        border: `1px solid ${JM.border}`,
        background: "#fff",
        boxShadow: "0 10px 40px rgba(15,23,42,0.06)",
      }}
    >
      <div
        style={{
          height: dense ? 38 : 44,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "0 14px",
          borderBottom: `1px solid ${JM.border}`,
          background: "linear-gradient(180deg,#fafafa 0%,#f4f4f5 100%)",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: 999, background: accent }} />
          <span style={{ fontSize: 11.5, fontWeight: 600, color: JM.ink }}>Preview</span>
        </div>
        <div style={{ display: "flex", gap: 5 }}>
          {["#e11d48", "#f59e0b", "#22c55e"].map((c) => (
            <span key={c} style={{ width: 9, height: 9, borderRadius: 999, background: c, opacity: 0.55 }} />
          ))}
        </div>
      </div>

      <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
        <div
          style={{
            width: 72,
            flexShrink: 0,
            borderRight: `1px solid ${JM.border}`,
            background: "#fafafa",
            padding: "12px 8px",
            display: "flex",
            flexDirection: "column",
            gap: 8,
          }}
        >
          {[1, 2, 3].map((i) => (
            <div
              key={i}
              style={{
                height: 8,
                borderRadius: 4,
                background: i === 1 ? `${accent}35` : "#e4e4e7",
              }}
            />
          ))}
        </div>

        <div style={{ flex: 1, padding: dense ? 14 : 18, display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ fontSize: 16, fontWeight: 700, color: JM.ink, letterSpacing: "-0.02em" }}>
            Welcome back
          </div>
          <p style={{ fontSize: 12.5, color: JM.mid, margin: 0, lineHeight: 1.5 }}>
            {kit.tagline}
          </p>

          <div
            style={{
              padding: dense ? 12 : 14,
              borderRadius: pillChrome ? r + 6 : r,
              border: btnGhostBorder ? `1px solid ${JM.border}` : "none",
              background: btnGhostBorder ? "#fafafa" : `${accent}08`,
              boxShadow: btnFlat ? "none" : "0 1px 2px rgba(0,0,0,0.04)",
            }}
          >
            <div style={{ fontSize: 11.5, fontWeight: 600, color: JM.ink, marginBottom: 10 }}>
              Quick action
            </div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              <button
                type="button"
                style={{
                  padding: dense ? "7px 14px" : "9px 16px",
                  borderRadius: btnFlat ? 4 : pillChrome ? 999 : r,
                  border: "none",
                  background: accent,
                  color: "#fff",
                  fontSize: 12.5,
                  fontWeight: 600,
                  cursor: "default",
                  boxShadow: btnFlat ? "none" : "0 2px 8px rgba(0,0,0,0.12)",
                  fontFamily: ff,
                }}
              >
                Primary
              </button>
              <button
                type="button"
                style={{
                  padding: dense ? "7px 14px" : "9px 16px",
                  borderRadius: btnFlat ? 4 : pillChrome ? 999 : r,
                  border: `1px solid ${JM.border}`,
                  background: "#fff",
                  color: JM.mid,
                  fontSize: 12.5,
                  fontWeight: 600,
                  cursor: "default",
                  fontFamily: ff,
                }}
              >
                Secondary
              </button>
            </div>
          </div>

          <div style={{ display: "flex", gap: 8, marginTop: "auto" }}>
            <div style={{ flex: 1, height: 40, borderRadius: r, background: "#f4f4f5" }} />
            <div style={{ flex: 1, height: 40, borderRadius: r, background: "#f4f4f5" }} />
          </div>
        </div>
      </div>
    </div>
  );
}
