/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState } from 'react';
import { X, User, Key, Mail, Phone, ShieldCheck } from 'lucide-react';
import { User as UserType } from '../types';

interface AuthModalProps {
  onClose: () => void;
  onLoginSuccess: (user: UserType) => void;
  initialIsRegistering?: boolean;
  pendingBookingNotice?: string;
}

export default function AuthModal({
  onClose,
  onLoginSuccess,
  initialIsRegistering = false,
  pendingBookingNotice,
}: AuthModalProps) {
  const [isRegistering, setIsRegistering] = useState(initialIsRegistering);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');
  const [fullName, setFullName] = useState('');
  const [phone, setPhone] = useState('');
  const [role, setRole] = useState<'owner' | 'guest'>('guest');

  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  // Suggestions for quick-testing logins
  const quickLogins = [
    { label: 'Login Tamu (Ani)', username: 'ani_guest' },
    { label: 'Login Pemilik (Budi)', username: 'budi_owner' },
    { label: 'Super Admin', username: 'admin_hub' },
  ];

  const handleAuth = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    const endpoint = isRegistering ? '/api/auth/register' : '/api/auth/login';
    const payload = isRegistering
      ? { username, email, fullName, phone, role, password: password || 'password123' }
      : { username, password: password || 'password123' };

    try {
      const response = await fetch(endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      const data = await response.json();
      if (!response.ok) {
        throw new Error(data.error || 'Terjadi kesalahan pada server!');
      }

      onLoginSuccess(data.user);
      onClose();
    } catch (err: any) {
      setError(err.message || 'Koneksi ke server gagal!');
    } finally {
      setLoading(false);
    }
  };

  const triggerQuickLogin = async (usr: string) => {
    setError('');
    setLoading(true);
    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username: usr, password: 'password123' }),
      });
      const data = await response.json();
      if (!response.ok) {
        throw new Error(data.error || 'Login gagal!');
      }
      onLoginSuccess(data.user);
      onClose();
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs">
      <div className="bg-white rounded-2xl w-full max-w-md overflow-hidden shadow-2xl border border-gray-100 relative">
        {/* Header */}
        <div className="px-6 py-5 border-b border-gray-100 flex justify-between items-center bg-gray-50">
          <div>
            <h3 className="font-sans font-bold text-lg text-gray-900">
              {isRegistering ? 'Daftar Akun Baru' : 'Masuk Ke Platform'}
            </h3>
            <p className="text-xs text-gray-500">
              {isRegistering ? 'Daftar sebagai penyewa atau pemilik properti.' : 'Akses dashboard pencarian & sewa beli.'}
            </p>
          </div>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 p-1 rounded-full hover:bg-gray-100 transition-colors cursor-pointer"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Content Body */}
        <div className="p-6 space-y-4">
          {pendingBookingNotice && isRegistering && (
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50/70 border border-blue-100 p-4 rounded-xl text-xs space-y-3.5 shadow-xs">
              <div className="flex items-start space-x-2.5">
                <div className="p-1.5 bg-blue-500 rounded-lg text-white">
                  <ShieldCheck className="h-4.5 w-4.5 animate-pulse" />
                </div>
                <div>
                  <span className="font-bold text-xs text-blue-950 block">Pemesanan & Registrasi Instan Terintegrasi</span>
                  <p className="text-gray-600 mt-0.5 leading-relaxed">{pendingBookingNotice}</p>
                </div>
              </div>
              
              {/* Elegant Stepper Flow */}
              <div className="pt-2 border-t border-blue-100/40">
                <div className="flex items-center justify-between text-[10px] font-semibold text-gray-400">
                  <div className="flex items-center space-x-1.5 text-blue-600">
                    <span className="w-4 h-4 rounded-full bg-blue-100 flex items-center justify-center text-[9px] font-extrabold">1</span>
                    <span className="font-bold">Pilih Unit</span>
                  </div>
                  <div className="h-0.5 flex-1 bg-blue-100 mx-2"></div>
                  <div className="flex items-center space-x-1.5 text-indigo-600 font-bold">
                    <span className="w-4 h-4 rounded-full bg-indigo-600 text-white flex items-center justify-center text-[9px] font-extrabold">2</span>
                    <span className="font-extrabold">Daftar Akun</span>
                  </div>
                  <div className="h-0.5 flex-1 bg-gray-100 mx-2"></div>
                  <div className="flex items-center space-x-1.5">
                    <span className="w-4 h-4 rounded-full bg-gray-100 flex items-center justify-center text-[9px] font-bold">3</span>
                    <span>Selesai</span>
                  </div>
                </div>
              </div>
            </div>
          )}

          {error && (
            <div className="bg-red-50 border border-red-100 text-red-700 p-3 rounded-lg text-xs font-semibold">
              {error}
            </div>
          )}

          <form onSubmit={handleAuth} className="space-y-3.5">
            {/* Common Username Input */}
            <div>
              <label className="block text-xs font-semibold text-gray-600 mb-1">Username</label>
              <div className="relative">
                <input
                  type="text"
                  required
                  placeholder="Contoh: budi_owner, ani_guest"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  className="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm bg-white focus:outline-hidden focus:border-blue-500"
                />
                <User className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
              </div>
            </div>

            {/* Password Input */}
            <div>
              <label className="block text-xs font-semibold text-gray-600 mb-1">
                {isRegistering ? 'Kata Sandi Baru' : 'Kata Sandi'}
              </label>
              <div className="relative">
                <input
                  type="password"
                  required
                  placeholder={isRegistering ? "Masukkan kata sandi baru" : "Masukkan kata sandi (default: password123)"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm bg-white focus:outline-hidden focus:border-blue-500"
                />
                <Key className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
              </div>
            </div>

            {isRegistering && (
              <>
                {/* Full Name */}
                <div>
                  <label className="block text-xs font-semibold text-gray-600 mb-1">Nama Lengkap</label>
                  <input
                    type="text"
                    required
                    placeholder="Contoh: Budi Hartono"
                    value={fullName}
                    onChange={(e) => setFullName(e.target.value)}
                    className="w-full p-2.5 border border-gray-200 rounded-lg text-sm bg-white focus:outline-hidden focus:border-blue-500"
                  />
                </div>

                {/* Email */}
                <div>
                  <label className="block text-xs font-semibold text-gray-600 mb-1">Email</label>
                  <div className="relative">
                    <input
                      type="email"
                      required
                      placeholder="budi@owner.com"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm bg-white focus:outline-hidden focus:border-blue-500"
                    />
                    <Mail className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                  </div>
                </div>

                {/* Phone */}
                <div>
                  <label className="block text-xs font-semibold text-gray-600 mb-1">Nomor Telepon</label>
                  <div className="relative">
                    <input
                      type="tel"
                      required
                      placeholder="08123456789"
                      value={phone}
                      onChange={(e) => setPhone(e.target.value)}
                      className="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm bg-white focus:outline-hidden focus:border-blue-500"
                    />
                    <Phone className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                  </div>
                </div>

                {/* Role selection */}
                <div>
                  <label className="block text-xs font-semibold text-gray-600 mb-1.5">Mendaftar Sebagai</label>
                  <div className="grid grid-cols-2 gap-3">
                    <button
                      type="button"
                      onClick={() => setRole('guest')}
                      className={`p-3 rounded-xl border text-xs font-bold text-center transition-all cursor-pointer ${
                        role === 'guest'
                          ? 'border-blue-600 bg-blue-50/50 text-blue-700 shadow-xs'
                          : 'border-gray-200 text-gray-500 hover:border-gray-300'
                      }`}
                    >
                      Tamu (Booking/Sewa/Beli)
                    </button>
                    <button
                      type="button"
                      onClick={() => setRole('owner')}
                      className={`p-3 rounded-xl border text-xs font-bold text-center transition-all cursor-pointer ${
                        role === 'owner'
                          ? 'border-blue-600 bg-blue-50/50 text-blue-700 shadow-xs'
                          : 'border-gray-200 text-gray-500 hover:border-gray-300'
                      }`}
                    >
                      Pemilik (Menyewakan/Menjual)
                    </button>
                  </div>
                </div>
              </>
            )}

            <button
              type="submit"
              disabled={loading}
              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-bold py-2.5 rounded-xl shadow-xs transition-colors cursor-pointer text-sm"
            >
              {loading ? 'Memproses...' : isRegistering ? 'Daftar Sekarang' : 'Masuk'}
            </button>
          </form>

          {/* Quick Logins for Seeding verification */}
          {!isRegistering && (
            <div className="pt-4 border-t border-gray-100">
              <span className="text-[10px] font-bold tracking-widest text-gray-400 block uppercase mb-2">Simulasi Cepat (Seeded Accounts)</span>
              <div className="grid grid-cols-2 gap-2">
                {quickLogins.map((ql) => (
                  <button
                    key={ql.username}
                    onClick={() => triggerQuickLogin(ql.username)}
                    className="text-[11px] font-semibold p-2 border border-gray-200 rounded-lg hover:border-blue-600 hover:text-blue-600 bg-gray-50 hover:bg-white text-gray-600 transition-all text-center cursor-pointer"
                  >
                    {ql.label}
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* Toggle register/login */}
          <div className="text-center pt-2">
            <button
              type="button"
              onClick={() => setIsRegistering(!isRegistering)}
              className="text-xs font-semibold text-blue-600 hover:text-blue-700 hover:underline cursor-pointer"
            >
              {isRegistering ? 'Sudah punya akun? Masuk disini' : 'Belum punya akun? Daftar disini'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}