"use client";

import { useState } from "react";

type Props = {
  open: boolean;
  onClose: () => void;
  onCreate: (data: { name: string; emoji: string; price: string; priceFrom: string }) => Promise<void>;
};

export default function NewProductModal({ open, onClose, onCreate }: Props) {
  const [name, setName] = useState("");
  const [emoji, setEmoji] = useState("📈");
  const [price, setPrice] = useState("19,90");
  const [priceFrom, setPriceFrom] = useState("97,00");
  const [loading, setLoading] = useState(false);

  if (!open) return null;

  async function submit() {
    if (!name.trim()) return;
    setLoading(true);
    try {
      await onCreate({ name: name.trim(), emoji, price, priceFrom });
      setName("");
      onClose();
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="ov open" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal">
        <button type="button" className="x" onClick={onClose}>
          ×
        </button>
        <h3>Novo produto</h3>
        <p style={{ color: "var(--mut)", marginBottom: 20, fontSize: ".92rem" }}>
          Cria o produto e já gera uma landing pronta pra editar.
        </p>
        <div className="af">
          <label>Nome do produto</label>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Ex.: Curso de Tráfego Pago"
          />
        </div>
        <div className="af">
          <label>Emoji / ícone</label>
          <input value={emoji} onChange={(e) => setEmoji(e.target.value)} placeholder="📈" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <div className="af">
            <label>Preço (R$)</label>
            <input value={price} onChange={(e) => setPrice(e.target.value)} placeholder="19,90" />
          </div>
          <div className="af">
            <label>De (R$)</label>
            <input value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)} placeholder="97,00" />
          </div>
        </div>
        <button type="button" className="b lime" style={{ width: "100%", justifyContent: "center" }} onClick={submit} disabled={loading}>
          {loading ? "Criando…" : "Criar produto e landing →"}
        </button>
      </div>
    </div>
  );
}