"use client";

import { useState } from "react";
import { Save, Eye, EyeOff, CheckCircle } from "lucide-react";

export default function SettingsForm() {
  const [showPass, setShowPass] = useState(false);
  const [saved, setSaved] = useState(false);

  const handleSave = (e: React.FormEvent) => {
    e.preventDefault();
    setSaved(true);
    setTimeout(() => setSaved(false), 3000);
  };

  return (
    <>
      {saved && (
        <div className="bg-green-50 border border-green-200 text-green-700 p-4 rounded-xl mb-6 flex items-center gap-2 font-semibold">
          <CheckCircle className="w-5 h-5" /> Cambios guardados correctamente.
        </div>
      )}

      <form onSubmit={handleSave} className="space-y-8">
        {/* Datos personales */}
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-7">
          <h2 className="text-lg font-bold text-gray-700 mb-5">Datos Personales</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
            <Field label="Nombre completo" name="name" defaultValue="Administrador" />
            <Field label="Correo electrónico" name="email" type="email" defaultValue="admin@cursos.nirgua.com.ve" />
            <Field label="Teléfono / WhatsApp" name="telefono" defaultValue="0414-4399278" />
          </div>
        </div>

        {/* Seguridad */}
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-7">
          <h2 className="text-lg font-bold text-gray-700 mb-5">Cambiar Contraseña</h2>
          <div className="space-y-4">
            <Field label="Contraseña actual" name="currentPassword" type="password" />
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">Nueva contraseña</label>
              <div className="relative">
                <input name="newPassword" type={showPass ? "text" : "password"}
                  className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none pr-12" />
                <button type="button" onClick={() => setShowPass(v => !v)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                  {showPass ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                </button>
              </div>
            </div>
            <Field label="Confirmar nueva contraseña" name="confirmPassword" type="password" />
          </div>
        </div>

        <div className="flex justify-end">
          <button type="submit"
            className="flex items-center gap-2 bg-[#1e2a47] hover:bg-black text-white font-bold px-8 py-3 rounded-xl transition-colors shadow-sm">
            <Save className="w-4 h-4" /> Guardar cambios
          </button>
        </div>
      </form>
    </>
  );
}

function Field({ label, name, type = "text", defaultValue = "" }: {
  label: string; name: string; type?: string; defaultValue?: string;
}) {
  return (
    <div>
      <label className="block text-sm font-semibold text-gray-700 mb-1">{label}</label>
      <input name={name} type={type} defaultValue={defaultValue}
        className="w-full border border-gray-200 p-3 rounded-lg focus:ring-2 focus:ring-[#0066ff] outline-none" />
    </div>
  );
}