import styles from "./ProductVisual.module.css";

export type ProductVisualVariant = "crm" | "craftwave" | "taskflow" | "uninet";

const CHROME_TITLES: Record<ProductVisualVariant, string> = {
  crm: "Pipeline overview",
  craftwave: "Candidate screening",
  taskflow: "Sprint board",
  uninet: "Network map",
};

function CrmBody() {
  const columns: Array<{ label: string; cards: number; accented?: boolean }> = [
    { label: "New", cards: 3 },
    { label: "In progress", cards: 2 },
    { label: "Won", cards: 2, accented: true },
  ];
  const chartBars = [38, 62, 46, 78, 58, 88, 70];

  return (
    <div className={styles.crm}>
      <div className={styles.crmColumns}>
        {columns.map((column) => (
          <div key={column.label} className={styles.miniColumn}>
            <span className={styles.columnLabel}>{column.label}</span>
            {Array.from({ length: column.cards }).map((_, i) => (
              <div
                key={i}
                className={`${styles.miniCard} ${column.accented && i === 0 ? styles.miniCardAccent : ""}`}
              >
                <span className={styles.skeletonBar} style={{ width: "72%" }} />
                <span className={styles.skeletonBarDim} style={{ width: "46%" }} />
              </div>
            ))}
          </div>
        ))}
      </div>
      <div className={styles.chartStrip}>
        {chartBars.map((height, i) => (
          <span key={i} className={styles.chartBar} style={{ height: `${height}%` }} />
        ))}
      </div>
    </div>
  );
}

function CraftwaveBody() {
  const rows = [
    { score: "96%", bar: 96, name: "74%", role: "52%" },
    { score: "91%", bar: 91, name: "62%", role: "44%" },
    { score: "84%", bar: 84, name: "70%", role: "48%" },
    { score: "73%", bar: 73, name: "58%", role: "40%" },
  ];

  return (
    <div className={styles.craftwave}>
      {rows.map((row, i) => (
        <div key={i} className={styles.candidateRow}>
          <span className={styles.avatar} />
          <span className={styles.candidateInfo}>
            <span className={styles.skeletonBar} style={{ width: row.name }} />
            <span className={styles.skeletonBarDim} style={{ width: row.role }} />
          </span>
          <span className={styles.matchTrack}>
            <span className={styles.matchFill} style={{ width: `${row.bar}%` }} />
          </span>
          <span className={styles.scorePill}>{row.score}</span>
        </div>
      ))}
    </div>
  );
}

function TaskflowBody() {
  const columns: Array<{ label: string; cards: Array<{ done?: boolean; raised?: boolean }> }> = [
    { label: "Backlog", cards: [{}, {}, {}] },
    { label: "Doing", cards: [{ raised: true }, {}] },
    { label: "Done", cards: [{ done: true }, { done: true }] },
  ];

  return (
    <div className={styles.taskflow}>
      {columns.map((column) => (
        <div key={column.label} className={styles.miniColumn}>
          <span className={styles.columnLabel}>{column.label}</span>
          {column.cards.map((card, i) => (
            <div
              key={i}
              className={`${styles.taskCard} ${card.raised ? styles.taskCardRaised : ""}`}
            >
              <span className={`${styles.checkbox} ${card.done ? styles.checkboxDone : ""}`} />
              <span className={styles.taskBars}>
                <span className={styles.skeletonBar} style={{ width: "82%" }} />
                <span className={styles.skeletonBarDim} style={{ width: "55%" }} />
              </span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

function UninetBody() {
  const nodes = [
    { x: 150, y: 88, r: 13, hub: true },
    { x: 56, y: 38, r: 8 },
    { x: 244, y: 34, r: 9 },
    { x: 36, y: 128, r: 7 },
    { x: 110, y: 160, r: 8 },
    { x: 206, y: 152, r: 7 },
    { x: 262, y: 110, r: 8 },
    { x: 96, y: 22, r: 6 },
  ];
  const hub = nodes[0];

  return (
    <svg className={styles.uninet} viewBox="0 0 300 180" preserveAspectRatio="xMidYMid meet">
      {nodes.slice(1).map((node, i) => (
        <line key={i} className={styles.edge} x1={hub.x} y1={hub.y} x2={node.x} y2={node.y} />
      ))}
      <line className={styles.edgeDim} x1={56} y1={38} x2={96} y2={22} />
      <line className={styles.edgeDim} x1={244} y1={34} x2={262} y2={110} />
      <line className={styles.edgeDim} x1={36} y1={128} x2={110} y2={160} />
      {nodes.map((node, i) => (
        <g key={i}>
          <circle
            className={`${styles.halo} ${node.hub ? styles.haloHub : ""}`}
            cx={node.x}
            cy={node.y}
            r={node.r + 6}
          />
          <circle
            className={`${styles.node} ${node.hub ? styles.nodeHub : ""}`}
            cx={node.x}
            cy={node.y}
            r={node.r}
          />
        </g>
      ))}
    </svg>
  );
}

const BODIES: Record<ProductVisualVariant, () => React.ReactNode> = {
  crm: CrmBody,
  craftwave: CraftwaveBody,
  taskflow: TaskflowBody,
  uninet: UninetBody,
};

export function ProductVisual({ variant }: { variant: ProductVisualVariant }) {
  const Body = BODIES[variant];

  return (
    <div className={styles.frame} aria-hidden="true">
      <div className={styles.chrome}>
        <span className={styles.dot} />
        <span className={styles.dot} />
        <span className={styles.dot} />
        <span className={styles.chromeTitle}>{CHROME_TITLES[variant]}</span>
      </div>
      <div className={styles.body}>
        <Body />
      </div>
    </div>
  );
}