"use client";

import { useState } from "react";
import { Mail, CheckCircle2, AlertTriangle, Send } from "lucide-react";
import { sendTransparentEmail } from "./actions";

export default function ReenvioTransparente() {
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
  const [errorMessage, setErrorMessage] = useState("");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("loading");
    setErrorMessage("");

    const formEl = e.currentTarget;
    const formData = new FormData(formEl);
    const result = await sendTransparentEmail(formData);

    if (result.success) {
      setStatus("success");
      formEl.reset();
    } else {
      setStatus("error");
      setErrorMessage(result.error || "Ocurrió un error al enviar correo.");
    }
  }

  return (
    <div className="max-w-2xl mx-auto space-y-8 mt-6">
      <div>
        <h1 className="text-3xl font-bold flex items-center gap-3">
          <Mail className="text-neon-blue" />
          Reenvío Transparente
        </h1>
        <p className="text-gray-400 mt-2 text-sm leading-relaxed">
          Usa este formulario para reenviar tickets a un cliente que escribió mal su correo al comprar. 
          Este sistema envía un correo oficial pero <strong className="text-white bg-red-900/30 px-1 rounded">no interfiere ni modifica la base de datos</strong> (por políticas de transparencia e inmutabilidad).
        </p>
      </div>

      <div className="bg-white/5 border border-white/10 p-6 sm:p-8 rounded-xl shadow-xl shadow-black/50">
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
              Correo Electrónico Correcto (Destino)
            </label>
            <input
              type="email"
              id="email"
              name="email"
              required
              placeholder="ejemplo@gmail.com"
              className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-neon-blue transition-colors placeholder:text-gray-600"
            />
          </div>

          <div>
            <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
              Nombre del Cliente
            </label>
            <input
              type="text"
              id="name"
              name="name"
              required
              placeholder="Ej: Juan Pérez"
              className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-neon-blue transition-colors placeholder:text-gray-600"
            />
          </div>

          <div>
            <label htmlFor="tickets" className="block text-sm font-medium text-gray-300 mb-2">
              Números de Ticket a Reenviar
            </label>
            <textarea
              id="tickets"
              name="tickets"
              required
              rows={3}
              placeholder="Ej: CCA-A3F9K2B, CCA-R7XM5QP"
              className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-neon-blue transition-colors resize-none placeholder:text-gray-600 font-mono text-sm"
            />
            <p className="text-xs text-gray-400 mt-2 flex items-center gap-1.5">
              <AlertTriangle size={14} className="text-yellow-500" />
              Verifica los tickets en la orden original antes de enviarlos.
            </p>
          </div>

          <div className="pt-6 mt-6 border-t border-white/10">
            {status === "error" && (
              <div className="mb-6 bg-red-500/10 border border-red-500/20 text-red-400 p-4 rounded-lg flex items-start gap-3">
                <AlertTriangle className="shrink-0 mt-0.5" size={18} />
                <p className="text-sm font-medium">{errorMessage}</p>
              </div>
            )}

            {status === "success" && (
              <div className="mb-6 bg-green-500/10 border border-green-500/20 text-green-400 p-4 rounded-lg flex items-center gap-3">
                <CheckCircle2 className="shrink-0" size={18} />
                <p className="text-sm font-medium">¡Correo de reenvío enviado correctamente!</p>
              </div>
            )}

            <button
              type="submit"
              disabled={status === "loading"}
              className="w-full bg-neon-blue hover:bg-neon-blue/90 text-white font-bold py-3.5 px-4 rounded-lg transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_15px_rgba(14,165,233,0.3)] hover:shadow-[0_0_20px_rgba(14,165,233,0.5)]"
            >
              {status === "loading" ? (
                <div className="animate-spin h-5 w-5 border-2 border-white/20 border-t-white rounded-full" />
              ) : (
                <>
                  <Send size={18} />
                  Enviar Correo Oficial
                </>
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}