import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { toast } from 'sonner';
import { EyeIcon, EyeSlashIcon, HeartIcon, SunIcon, MoonIcon } from '@heroicons/react/24/outline';
import { useAuthStore } from '../stores/authStore';
import { useUiStore } from '../stores/uiStore';

const schema = z.object({
  mobile: z.string().min(10, 'شماره موبایل معتبر نیست'),
  password: z.string().min(6, 'رمز عبور باید حداقل ۶ کاراکتر باشد'),
});

type FormData = z.infer<typeof schema>;

export default function LoginPage() {
  const login = useAuthStore((s) => s.login);
  const darkMode = useUiStore((s) => s.darkMode);
  const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
  const [showPass, setShowPass] = useState(false);

  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  useEffect(() => {
    document.documentElement.classList.toggle('dark', darkMode);
  }, [darkMode]);

  const onSubmit = async (data: FormData) => {
    try {
      const res = await fetch('/api/v1/user/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ mobile_number: data.mobile, password: data.password }),
      });

      if (!res.ok) {
        const err = await res.json();
        toast.error(err?.errors?.[0]?.message ?? 'خطا در ورود');
        return;
      }

      const json = await res.json();
      login(json.access_token, json.refresh_token ?? '');
      toast.success('خوش آمدید');
    } catch {
      toast.error('خطا در اتصال به سرور');
    }
  };

  return (
    <div className="min-h-screen flex bg-slate-50 dark:bg-gray-950 transition-colors duration-200">

      {/* ── Left panel: branding ───────────────── */}
      <div className="hidden lg:flex flex-col flex-1 relative overflow-hidden bg-[#100c22]">
        {/* Gradient orbs */}
        <div className="absolute top-1/4 right-1/4 w-72 h-72 bg-violet-600/30 rounded-full blur-3xl" />
        <div className="absolute bottom-1/4 left-1/4 w-96 h-96 bg-purple-800/20 rounded-full blur-3xl" />

        <div className="relative z-10 flex flex-col h-full p-12">
          {/* Logo */}
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-lg shadow-violet-900/50">
              <HeartIcon className="w-5 h-5 text-white" />
            </div>
            <span className="text-white font-bold text-xl tracking-tight">ClinicPro</span>
          </div>

          {/* Center content */}
          <div className="flex-1 flex flex-col items-center justify-center text-center px-8">
            <div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-violet-500/20 to-purple-700/20 border border-violet-500/20 flex items-center justify-center mb-8">
              <HeartIcon className="w-10 h-10 text-violet-400" />
            </div>
            <h2 className="text-3xl font-bold text-white mb-4 leading-snug">
              سیستم مدیریت<br />کلینیک هوشمند
            </h2>
            <p className="text-slate-400 text-base leading-relaxed max-w-sm">
              مدیریت نوبت‌دهی، پزشکان، کلینیک‌ها و پرداخت‌ها در یک پنل یکپارچه
            </p>

            {/* Feature pills */}
            <div className="flex flex-wrap justify-center gap-2 mt-8">
              {['نوبت‌دهی آنلاین', 'مدیریت پزشکان', 'گزارش‌گیری', 'پرداخت امن'].map((f) => (
                <span key={f} className="px-3 py-1.5 rounded-full text-xs font-medium bg-white/5 text-slate-300 border border-white/10">
                  {f}
                </span>
              ))}
            </div>
          </div>

          {/* Bottom note */}
          <p className="text-slate-600 text-xs text-center">نسخه ۱.۰.۰ — تمامی حقوق محفوظ است</p>
        </div>
      </div>

      {/* ── Right panel: form ──────────────────── */}
      <div className="flex flex-col w-full lg:w-[480px] shrink-0 relative">
        {/* Dark mode toggle */}
        <div className="absolute top-5 left-5">
          <button
            onClick={toggleDarkMode}
            className="w-9 h-9 flex items-center justify-center rounded-xl bg-slate-200/70 dark:bg-gray-800 hover:bg-slate-300 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 transition-colors"
            title={darkMode ? 'حالت روشن' : 'حالت تاریک'}
          >
            {darkMode
              ? <SunIcon className="w-5 h-5 text-amber-400" />
              : <MoonIcon className="w-5 h-5" />}
          </button>
        </div>

        <div className="flex flex-col flex-1 items-center justify-center px-8 sm:px-12 py-12">
          {/* Mobile logo */}
          <div className="lg:hidden flex items-center gap-3 mb-10">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-md">
              <HeartIcon className="w-5 h-5 text-white" />
            </div>
            <span className="text-slate-900 dark:text-white font-bold text-xl">ClinicPro</span>
          </div>

          <div className="w-full max-w-sm">
            <div className="mb-8">
              <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-50">ورود به پنل</h1>
              <p className="text-slate-500 dark:text-slate-400 text-sm mt-1.5">اطلاعات حساب مدیریتی خود را وارد کنید</p>
            </div>

            <form onSubmit={handleSubmit(onSubmit)} className="space-y-5" noValidate>
              {/* Mobile number */}
              <div>
                <label className="cp-label">شماره موبایل</label>
                <input
                  {...register('mobile')}
                  type="tel"
                  dir="ltr"
                  placeholder="09xxxxxxxxx"
                  autoComplete="username"
                  className={`cp-input text-left placeholder:text-right placeholder:dir-rtl ${errors.mobile ? 'border-red-400 dark:border-red-500 focus:ring-red-400/30' : ''}`}
                />
                {errors.mobile && (
                  <p className="text-red-500 dark:text-red-400 text-xs mt-1.5">{errors.mobile.message}</p>
                )}
              </div>

              {/* Password */}
              <div>
                <label className="cp-label">رمز عبور</label>
                <div className="relative">
                  <input
                    {...register('password')}
                    type={showPass ? 'text' : 'password'}
                    placeholder="••••••••"
                    autoComplete="current-password"
                    className={`cp-input pl-10 ${errors.password ? 'border-red-400 dark:border-red-500 focus:ring-red-400/30' : ''}`}
                  />
                  <button
                    type="button"
                    onClick={() => setShowPass((v) => !v)}
                    className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
                  >
                    {showPass ? <EyeSlashIcon className="w-4 h-4" /> : <EyeIcon className="w-4 h-4" />}
                  </button>
                </div>
                {errors.password && (
                  <p className="text-red-500 dark:text-red-400 text-xs mt-1.5">{errors.password.message}</p>
                )}
              </div>

              {/* Submit */}
              <button
                type="submit"
                disabled={isSubmitting}
                className="w-full h-11 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 disabled:opacity-60 text-white font-semibold rounded-xl transition-all duration-150 shadow-md shadow-primary-500/25 hover:shadow-lg hover:shadow-primary-500/30 mt-2"
              >
                {isSubmitting ? (
                  <span className="flex items-center justify-center gap-2">
                    <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
                    </svg>
                    در حال ورود...
                  </span>
                ) : 'ورود به سیستم'}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}