import React, { useState } from 'react';
import { User } from '../../types/accounting';
import { StorageService } from '../../services/storage';
import { UserPhotoModal } from '../users/UserPhotoModal';
import {
  Lock,
  User as UserIcon,
  Mail,
  Shield,
  Eye,
  EyeOff,
  CheckCircle2,
  AlertCircle,
  Building2,
  ArrowRight,
  Camera,
  Sparkles,
  KeyRound,
  FileCheck2,
} from 'lucide-react';

interface AuthViewProps {
  onLoginSuccess: (user: User) => void;
  appName?: string;
  logoUrl?: string;
}

export const AuthView: React.FC<AuthViewProps> = ({
  onLoginSuccess,
  appName = 'PT TIO MANDIRI JAYA',
  logoUrl,
}) => {
  const [activeTab, setActiveTab] = useState<'login' | 'register'>('login');

  // Login state
  const [loginIdentifier, setLoginIdentifier] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [loginError, setLoginError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  // Register state
  const [regUsername, setRegUsername] = useState('');
  const [regName, setRegName] = useState('');
  const [regEmail, setRegEmail] = useState('');
  const [regPassword, setRegPassword] = useState('');
  const [regRole, setRegRole] = useState<User['role']>('akuntan');
  const [regAvatar, setRegAvatar] = useState<string>('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&auto=format&fit=crop&q=80');
  const [regError, setRegError] = useState<string | null>(null);
  const [isPhotoModalOpen, setIsPhotoModalOpen] = useState(false);

  // Handle Login Submit
  const handleLoginSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setLoginError(null);
    setIsLoading(true);

    setTimeout(() => {
      const res = StorageService.login(loginIdentifier, loginPassword);
      setIsLoading(false);
      if (res.success && res.user) {
        onLoginSuccess(res.user);
      } else {
        setLoginError(res.error || 'Gagal masuk. Periksa kembali username atau password Anda.');
      }
    }, 300);
  };

  // Quick Demo Login
  const handleQuickLogin = (username: string, pass: string) => {
    setLoginIdentifier(username);
    setLoginPassword(pass);
    setLoginError(null);
    const res = StorageService.login(username, pass);
    if (res.success && res.user) {
      onLoginSuccess(res.user);
    }
  };

  // Handle Register Submit
  const handleRegisterSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setRegError(null);
    setIsLoading(true);

    setTimeout(() => {
      const res = StorageService.register({
        username: regUsername,
        name: regName,
        email: regEmail,
        password: regPassword,
        role: regRole,
        avatarUrl: regAvatar,
      });
      setIsLoading(false);
      if (res.success && res.user) {
        onLoginSuccess(res.user);
      } else {
        setRegError(res.error || 'Pendaftaran gagal. Periksa kembali isian formulir.');
      }
    }, 300);
  };

  return (
    <div className="min-h-screen bg-linear-to-br from-slate-900 via-slate-800 to-indigo-950 flex flex-col justify-center items-center p-4 sm:p-6 text-slate-800">
      {/* Container Card */}
      <div className="w-full max-w-xl rounded-2xl bg-white shadow-2xl border border-slate-200 overflow-hidden">
        {/* Brand Banner */}
        <div className="bg-linear-to-r from-blue-900 via-indigo-900 to-slate-900 px-6 py-6 text-white text-center border-b border-indigo-800/40 relative">
          <div className="flex justify-center mb-2.5">
            <div className="h-14 w-14 rounded-2xl bg-white/10 backdrop-blur-xs flex items-center justify-center border border-white/20 shadow-inner">
              {logoUrl ? (
                <img src={logoUrl} alt="Logo" className="h-9 w-9 object-contain" />
              ) : (
                <Building2 className="h-8 w-8 text-blue-300" />
              )}
            </div>
          </div>
          <h1 className="text-lg sm:text-xl font-black tracking-wide uppercase">
            {appName}
          </h1>
          <p className="text-xs text-blue-200 mt-1 max-w-md mx-auto">
            Sistem Informasi Akuntansi Terintegrasi Berbasis Standar PSAK / SAK EMKM &amp; Virtual Ledger Sub-Ledger
          </p>
        </div>

        {/* Tab Switcher: Masuk vs Daftar */}
        <div className="flex border-b border-slate-200 bg-slate-50 text-xs font-bold">
          <button
            type="button"
            onClick={() => {
              setActiveTab('login');
              setLoginError(null);
            }}
            className={`flex-1 py-3 text-center border-b-2 cursor-pointer transition-colors ${
              activeTab === 'login'
                ? 'border-indigo-600 bg-white text-indigo-700 shadow-2xs'
                : 'border-transparent text-slate-500 hover:text-slate-800'
            }`}
          >
            Masuk ke Sistem (Login)
          </button>
          <button
            type="button"
            onClick={() => {
              setActiveTab('register');
              setRegError(null);
            }}
            className={`flex-1 py-3 text-center border-b-2 cursor-pointer transition-colors ${
              activeTab === 'register'
                ? 'border-indigo-600 bg-white text-indigo-700 shadow-2xs'
                : 'border-transparent text-slate-500 hover:text-slate-800'
            }`}
          >
            Daftar Akun Baru (Register)
          </button>
        </div>

        <div className="p-6 sm:p-8 space-y-6">
          {/* TAB 1: FORM LOGIN */}
          {activeTab === 'login' && (
            <form onSubmit={handleLoginSubmit} className="space-y-4">
              {loginError && (
                <div className="rounded-lg border border-rose-200 bg-rose-50 p-3 text-xs text-rose-900 flex items-start gap-2">
                  <AlertCircle className="h-4 w-4 text-rose-600 shrink-0 mt-0.5" />
                  <span>{loginError}</span>
                </div>
              )}

              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">
                  Nama Pengguna (Username) atau Alamat Email
                </label>
                <div className="relative">
                  <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                    <UserIcon className="h-4 w-4" />
                  </div>
                  <input
                    type="text"
                    required
                    value={loginIdentifier}
                    onChange={(e) => setLoginIdentifier(e.target.value)}
                    placeholder="admin atau hendra.akuntan@tiomandirijaya.co.id"
                    className="w-full rounded-lg border border-slate-300 pl-10 pr-3 py-2 text-xs text-slate-900 focus:border-indigo-600 focus:outline-hidden"
                  />
                </div>
              </div>

              <div>
                <div className="flex items-center justify-between mb-1">
                  <label className="block text-xs font-bold text-slate-700">
                    Kata Sandi (Password)
                  </label>
                  <span className="text-[11px] text-indigo-600 font-medium">
                    Default demo: <code>admin123</code> / <code>admin</code>
                  </span>
                </div>
                <div className="relative">
                  <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                    <Lock className="h-4 w-4" />
                  </div>
                  <input
                    type={showPassword ? 'text' : 'password'}
                    required
                    value={loginPassword}
                    onChange={(e) => setLoginPassword(e.target.value)}
                    placeholder="••••••••"
                    className="w-full rounded-lg border border-slate-300 pl-10 pr-10 py-2 text-xs font-mono text-slate-900 focus:border-indigo-600 focus:outline-hidden"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600 cursor-pointer"
                  >
                    {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                  </button>
                </div>
              </div>

              <button
                type="submit"
                disabled={isLoading}
                className="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-400 text-white font-bold py-2.5 px-4 text-xs shadow-md transition-all cursor-pointer"
              >
                <span>{isLoading ? 'Memverifikasi...' : 'Masuk ke Pembukuan'}</span>
                <ArrowRight className="h-4 w-4" />
              </button>

              {/* Quick Demo Switcher */}
              <div className="pt-4 border-t border-slate-200">
                <span className="text-[11px] font-bold uppercase tracking-wider text-slate-400 block mb-2 text-center">
                  Atau Masuk Cepat dengan Peran Demo (Simulasi Hak Akses CRUD VL):
                </span>
                <div className="grid grid-cols-2 gap-2 text-left">
                  <button
                    type="button"
                    onClick={() => handleQuickLogin('admin', 'admin')}
                    className="rounded-lg border border-indigo-200 bg-indigo-50/60 hover:bg-indigo-100 p-2 text-left cursor-pointer transition-colors"
                  >
                    <div className="flex items-center justify-between">
                      <span className="font-bold text-xs text-indigo-900">Super Admin</span>
                      <span className="text-[9px] bg-indigo-200 text-indigo-800 font-bold px-1.5 py-0.5 rounded">CRUD Penuh</span>
                    </div>
                    <span className="text-[10px] text-slate-500 block truncate">Tio Nugraha &bull; Akses Tanpa Batas</span>
                  </button>

                  <button
                    type="button"
                    onClick={() => handleQuickLogin('akuntan_hendra', 'akuntan123')}
                    className="rounded-lg border border-blue-200 bg-blue-50/60 hover:bg-blue-100 p-2 text-left cursor-pointer transition-colors"
                  >
                    <div className="flex items-center justify-between">
                      <span className="font-bold text-xs text-blue-900">Head Accountant</span>
                      <span className="text-[9px] bg-blue-200 text-blue-800 font-bold px-1.5 py-0.5 rounded">Create &amp; Edit</span>
                    </div>
                    <span className="text-[10px] text-slate-500 block truncate">Hendra Setiawan &bull; Input Transaksi</span>
                  </button>

                  <button
                    type="button"
                    onClick={() => handleQuickLogin('auditor_sari', 'auditor123')}
                    className="rounded-lg border border-purple-200 bg-purple-50/60 hover:bg-purple-100 p-2 text-left cursor-pointer transition-colors"
                  >
                    <div className="flex items-center justify-between">
                      <span className="font-bold text-xs text-purple-900">Auditor (CPA)</span>
                      <span className="text-[9px] bg-purple-200 text-purple-800 font-bold px-1.5 py-0.5 rounded">Read-Only</span>
                    </div>
                    <span className="text-[10px] text-slate-500 block truncate">Sari Wulandari &bull; Audit Trail</span>
                  </button>

                  <button
                    type="button"
                    onClick={() => handleQuickLogin('direksi_budi', 'direksi123')}
                    className="rounded-lg border border-amber-200 bg-amber-50/60 hover:bg-amber-100 p-2 text-left cursor-pointer transition-colors"
                  >
                    <div className="flex items-center justify-between">
                      <span className="font-bold text-xs text-amber-900">Direksi / Komisaris</span>
                      <span className="text-[9px] bg-amber-200 text-amber-800 font-bold px-1.5 py-0.5 rounded">Pengesahan</span>
                    </div>
                    <span className="text-[10px] text-slate-500 block truncate">Ir. Budi Santoso &bull; Eksekutif</span>
                  </button>
                </div>
              </div>
            </form>
          )}

          {/* TAB 2: FORM REGISTER */}
          {activeTab === 'register' && (
            <form onSubmit={handleRegisterSubmit} className="space-y-4">
              {regError && (
                <div className="rounded-lg border border-rose-200 bg-rose-50 p-3 text-xs text-rose-900 flex items-start gap-2">
                  <AlertCircle className="h-4 w-4 text-rose-600 shrink-0 mt-0.5" />
                  <span>{regError}</span>
                </div>
              )}

              {/* Photo Profile Preview & Picker */}
              <div className="flex items-center justify-between p-3 rounded-xl border border-slate-200 bg-slate-50/70">
                <div className="flex items-center gap-3">
                  <img
                    src={regAvatar}
                    alt="Foto Profil"
                    className="h-12 w-12 rounded-full object-cover border-2 border-indigo-400 shadow-2xs"
                  />
                  <div>
                    <span className="text-xs font-bold text-slate-800 block">Foto Profil Pengguna</span>
                    <span className="text-[10px] text-slate-500 block">
                      Kamera Langsung, Google Drive, atau Berkas Lokal
                    </span>
                  </div>
                </div>

                <button
                  type="button"
                  onClick={() => setIsPhotoModalOpen(true)}
                  className="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1.5 text-xs font-semibold cursor-pointer shadow-2xs"
                >
                  <Camera className="h-3.5 w-3.5" />
                  <span>Atur Foto</span>
                </button>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1">
                    Nama Pengguna (Username) *
                  </label>
                  <input
                    type="text"
                    required
                    value={regUsername}
                    onChange={(e) => setRegUsername(e.target.value)}
                    placeholder="contoh: dian_akuntan"
                    className="w-full rounded-lg border border-slate-300 px-3 py-2 text-xs font-mono text-slate-900 focus:border-indigo-600 focus:outline-hidden"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1">
                    Peran &amp; Hak Akses CRUD VL *
                  </label>
                  <select
                    value={regRole}
                    onChange={(e) => setRegRole(e.target.value as any)}
                    className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-800 focus:border-indigo-600 focus:outline-hidden"
                  >
                    <option value="superadmin">Super Administrator (CRUD Penuh)</option>
                    <option value="akuntan">Head Accountant (Create &amp; Edit VL)</option>
                    <option value="auditor">Auditor (Read-Only VL)</option>
                    <option value="direktur">Direksi / Manajemen (Read-Only)</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">
                  Nama Lengkap &amp; Gelar Resmi *
                </label>
                <input
                  type="text"
                  required
                  value={regName}
                  onChange={(e) => setRegName(e.target.value)}
                  placeholder="contoh: Dian Puspita, S.Ak., M.M."
                  className="w-full rounded-lg border border-slate-300 px-3 py-2 text-xs text-slate-900 focus:border-indigo-600 focus:outline-hidden"
                />
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">
                  Email Perusahaan *
                </label>
                <input
                  type="email"
                  required
                  value={regEmail}
                  onChange={(e) => setRegEmail(e.target.value)}
                  placeholder="dian.puspita@tiomandirijaya.co.id"
                  className="w-full rounded-lg border border-slate-300 px-3 py-2 text-xs text-slate-900 focus:border-indigo-600 focus:outline-hidden"
                />
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">
                  Kata Sandi Baru *
                </label>
                <input
                  type="password"
                  required
                  value={regPassword}
                  onChange={(e) => setRegPassword(e.target.value)}
                  placeholder="Minimal 6 karakter"
                  className="w-full rounded-lg border border-slate-300 px-3 py-2 text-xs font-mono text-slate-900 focus:border-indigo-600 focus:outline-hidden"
                />
              </div>

              <div className="rounded-lg border border-indigo-100 bg-indigo-50/60 p-3 text-[11px] text-indigo-900 space-y-1">
                <div className="flex items-center gap-1.5 font-bold">
                  <Shield className="h-3.5 w-3.5 text-indigo-600" />
                  <span>Dampak Pemilihan Peran terhadap CRUD Virtual Ledger:</span>
                </div>
                <p className="text-[10px] text-slate-600">
                  {regRole === 'superadmin' && 'Akses penuh untuk Menambah, Mengedit, Menghapus mutasi VL, Vendor, serta VA Bank.'}
                  {regRole === 'akuntan' && 'Diizinkan mencatat mutasi VL dan menerbitkan VA, namun tidak dapat menghapus catatan historis.'}
                  {regRole === 'auditor' && 'Hanya dapat melihat riwayat pembukuan dan mutasi sub-ledger tanpa izin modifikasi.'}
                  {regRole === 'direktur' && 'Akses eksekutif untuk meninjau saldo berjalan dan menandatangani dokumen via QR Code.'}
                </p>
              </div>

              <button
                type="submit"
                disabled={isLoading}
                className="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-400 text-white font-bold py-2.5 px-4 text-xs shadow-md transition-all cursor-pointer"
              >
                <span>{isLoading ? 'Mendaftarkan Akun...' : 'Daftar & Langsung Masuk'}</span>
                <CheckCircle2 className="h-4 w-4" />
              </button>
            </form>
          )}
        </div>

        {/* Footer info */}
        <div className="bg-slate-100 px-6 py-3 border-t border-slate-200 text-center text-[10px] text-slate-500 flex flex-wrap items-center justify-between gap-2">
          <span>&copy; {new Date().getFullYear()} PT Tio Mandiri Jaya &bull; SAK Indonesia</span>
          <span className="flex items-center gap-1 font-semibold text-slate-600">
            <FileCheck2 className="h-3 w-3 text-indigo-600" /> ISO-Compliant Digital QR
          </span>
        </div>
      </div>

      {/* Sub-Modal Foto untuk Form Register */}
      <UserPhotoModal
        isOpen={isPhotoModalOpen}
        onClose={() => setIsPhotoModalOpen(false)}
        currentPhotoUrl={regAvatar}
        userName={regName || 'Pengguna Baru'}
        onSavePhoto={(newPhoto) => {
          setRegAvatar(newPhoto);
          setIsPhotoModalOpen(false);
        }}
      />
    </div>
  );
};