"use client";

import type { CreationMode } from "./CreateProjectFlow";
import { JM } from "./modal-theme";

interface TypeSelectorProps {
  onSelect: (mode: CreationMode) => void;
  onClose: () => void;
}

const FLOW_TYPES: {
  id: CreationMode;
  icon: string;
  label: string;
  desc: string;
  accent: string;
}[] = [
  {
    id: "build",
    icon: "✦",
    label: "Build your own idea",
    desc: "Tell Vibn what you want to make. We'll scaffold the codebase and you'll guide it from there.",
    accent: "#4338CA",
  },
  {
    id: "oss",
    icon: "◇",
    label: "Run an open source tool",
    desc: "Install something ready-made — like a CRM, automation, or analytics — and we'll host it for you.",
    accent: "#059669",
  },
  {
    id: "import",
    icon: "⌘",
    label: "Import existing code",
    desc: "Bring a project you already have on GitHub. We'll mirror it, host it, and pick up where you left off.",
    accent: "#1D4ED8",
  },
];

export function TypeSelector({ onSelect, onClose }: TypeSelectorProps) {
  return (
    <div style={{ padding: 28 }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 22 }}>
        <div>
          <h2 style={{
            fontFamily: JM.fontDisplay, fontSize: 18, fontWeight: 700,
            color: JM.ink, margin: 0, marginBottom: 4, letterSpacing: "-0.02em",
          }}>
            Start a new project
          </h2>
          <p style={{ fontSize: 13, color: JM.mid, margin: 0, fontFamily: JM.fontSans, lineHeight: 1.45 }}>
            How would you like to begin?
          </p>
        </div>
        <button
          type="button"
          onClick={onClose}
          style={{
            background: "none", border: "none", cursor: "pointer",
            color: JM.muted, fontSize: 20, lineHeight: 1,
            padding: 4, fontFamily: JM.fontSans,
          }}
          onMouseEnter={e => (e.currentTarget.style.color = JM.mid)}
          onMouseLeave={e => (e.currentTarget.style.color = JM.muted)}
        >
          ×
        </button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 8 }}>
        {FLOW_TYPES.map(type => (
          <button
            key={type.id}
            type="button"
            onClick={() => onSelect(type.id)}
            style={{
              display: "flex", alignItems: "center",
              gap: 14, padding: 14, borderRadius: 12, textAlign: "left",
              border: `1px solid ${JM.border}`,
              background: JM.inputBg,
              cursor: "pointer",
              transition: "border-color 0.15s, background 0.15s, box-shadow 0.15s",
              fontFamily: JM.fontSans,
              position: "relative",
            }}
            onMouseEnter={e => {
              e.currentTarget.style.borderColor = type.accent;
              e.currentTarget.style.background = "#fff";
              e.currentTarget.style.boxShadow = `0 2px 12px ${type.accent}1a`;
            }}
            onMouseLeave={e => {
              e.currentTarget.style.borderColor = JM.border;
              e.currentTarget.style.background = JM.inputBg;
              e.currentTarget.style.boxShadow = "none";
            }}
          >
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: `${type.accent}1a`,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: "1.15rem", color: type.accent, flexShrink: 0,
            }}>
              {type.icon}
            </div>

            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: JM.ink, marginBottom: 2 }}>
                {type.label}
              </div>
              <div style={{ fontSize: 12.5, color: JM.mid, lineHeight: 1.45 }}>
                {type.desc}
              </div>
            </div>

            <div style={{ fontSize: 14, color: JM.muted, flexShrink: 0 }}>→</div>
          </button>
        ))}
      </div>
    </div>
  );
}
