"use client";

import { useState } from "react";
import { BorderBeam } from "border-beam";

/* ─── Icons (Hugeicon-style inline SVG) ─── */

function AtIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <path
        d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10c1.727 0 3.36-.438 4.781-1.21"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
      <path
        d="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm0 0v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.5 7.13"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function ChevronDownIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <path
        d="M6 9l6 6 6-6"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function ArrowUpIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path
        d="M12 19V5m0 0l-6 6m6-6l6 6"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export default function BeamingComposer() {
  const [text, setText] = useState("");

  return (
    <div
      style={{
        position: "relative",
        width: 520,
        minHeight: 280,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "#0a0a0a",
        borderRadius: 20,
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif',
      }}
    >
      <BorderBeam
        size="line"
        colorVariant="colorful"
        duration={2.4}
        strength={0.7}
      >
        {/* ▼ Glass composer body */}
        <div
          style={{
            borderRadius: 20,
            background: "rgba(255,255,255,0.04)",
            backdropFilter: "blur(40px)",
            WebkitBackdropFilter: "blur(40px)",
            border: "1px solid rgba(255,255,255,0.08)",
            boxShadow:
              "0 0 0 0.5px rgba(255,255,255,0.06) inset, 0 4px 24px rgba(0,0,0,0.4)",
            padding: "16px 18px 14px",
            display: "flex",
            flexDirection: "column" as const,
            gap: 14,
            width: 460,
          }}
        >
          {/* Row 1: @ button + textarea */}
          <div style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
            <button
              aria-label="Mention"
              style={{
                flexShrink: 0,
                width: 36,
                height: 36,
                borderRadius: 9999,
                border: "1px solid rgba(255,255,255,0.1)",
                background: "rgba(255,255,255,0.06)",
                color: "rgba(255,255,255,0.5)",
                cursor: "pointer",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                padding: 0,
              }}
            >
              <AtIcon />
            </button>
            <textarea
              value={text}
              onChange={(e) => setText(e.target.value)}
              placeholder="Build anything..."
              rows={2}
              style={{
                flex: 1,
                background: "transparent",
                border: "none",
                outline: "none",
                resize: "none",
                color: "rgba(255,255,255,0.85)",
                fontSize: 15,
                lineHeight: 1.5,
                fontFamily: "inherit",
                padding: "6px 0",
              }}
            />
          </div>

          {/* Row 2: chips + send */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <div style={{ display: "flex", gap: 8 }}>
              {["Agent", "Auto"].map((label) => (
                <button
                  key={label}
                  style={{
                    height: 32,
                    padding: "0 12px",
                    borderRadius: 9999,
                    border: "1px solid rgba(255,255,255,0.1)",
                    background: "rgba(255,255,255,0.06)",
                    color: "rgba(255,255,255,0.6)",
                    fontSize: 13,
                    fontWeight: 500,
                    cursor: "pointer",
                    display: "flex",
                    alignItems: "center",
                    gap: 4,
                    fontFamily: "inherit",
                  }}
                >
                  {label}
                  <ChevronDownIcon />
                </button>
              ))}
            </div>
            <button
              aria-label="Send"
              style={{
                width: 36,
                height: 36,
                borderRadius: 9999,
                border: "1px solid rgba(255,255,255,0.1)",
                background: "rgba(255,255,255,0.06)",
                color: "rgba(255,255,255,0.4)",
                cursor: "pointer",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                padding: 0,
              }}
            >
              <ArrowUpIcon />
            </button>
          </div>
        </div>
      </BorderBeam>
    </div>
  );
}
Beaming Composer
