"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth";

export default function LoginPage() {
  const [idUsuario, setIdUsuario] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const { login } = useAuth();
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setLoading(true);
    try {
      await login(idUsuario, password);
      router.push("/");
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "Credenciales inválidas");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="auth-page d-flex">
      {/* Left Panel */}
      <div className="auth-panel-left d-none d-md-flex col-md-5">
        <div>
          <i className="bi bi-headset display-1 mb-3"></i>
          <h2>HelpDesk ICHN</h2>
          <p>
            Sistema de gestión de tickets de soporte técnico. Gestiona incidencias,
            solicitudes y consultas de manera eficiente.
          </p>
          <div className="mt-4">
            <div className="d-flex align-items-center gap-2 mb-3">
              <i className="bi bi-check-circle-fill"></i>
              <span>Gestión centralizada de tickets</span>
            </div>
            <div className="d-flex align-items-center gap-2 mb-3">
              <i className="bi bi-check-circle-fill"></i>
              <span>Base de conocimiento integrada</span>
            </div>
            <div className="d-flex align-items-center gap-2 mb-3">
              <i className="bi bi-check-circle-fill"></i>
              <span>SLA y métricas de rendimiento</span>
            </div>
          </div>
        </div>
      </div>

      {/* Right Panel - Form */}
      <div className="auth-panel-right col-md-7 col-12">
        <div className="auth-form">
          <div className="d-md-none text-center mb-4">
            <i className="bi bi-headset display-4" style={{ color: "var(--primary)" }}></i>
            <h4 className="mt-2" style={{ color: "var(--primary)" }}>HelpDesk ICHN</h4>
          </div>

          <h3>Iniciar Sesión</h3>
          <p className="subtitle">Ingresa tus credenciales para acceder al sistema</p>

          {error && (
            <div className="alert alert-danger py-2" role="alert">
              <i className="bi bi-exclamation-circle me-2"></i>
              {error}
            </div>
          )}

          <form onSubmit={handleSubmit}>
            <div className="mb-3">
              <label className="form-label">Usuario</label>
              <input
                type="text"
                className="form-control"
                placeholder="Tu ID de usuario"
                value={idUsuario}
                onChange={(e) => setIdUsuario(e.target.value)}
                required
                autoFocus
              />
            </div>

            <div className="mb-4">
              <label className="form-label">Contraseña</label>
              <input
                type="password"
                className="form-control"
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>

            <button
              type="submit"
              className="btn btn-primary w-100 py-2"
              disabled={loading}
            >
              {loading ? (
                <>
                  <span className="spinner-border spinner-border-sm me-2" role="status"></span>
                  Ingresando...
                </>
              ) : (
                <>
                  <i className="bi bi-box-arrow-in-right me-2"></i>
                  Iniciar Sesión
                </>
              )}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}