"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { Loader2, Check } from "lucide-react";

export default function RegisterForm() {
  const router = useRouter();
  const [step, setStep] = useState(1);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const [form, setForm] = useState({
    companyName: "",
    industry: "retail",
    name: "",
    email: "",
    phone: "",
    password: "",
    confirmPassword: "",
    plan: "TRIAL",
  });

  function update(k: string, v: string) { setForm((f) => ({ ...f, [k]: v })); }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError("");

    const trimmedForm = {
      ...form,
      companyName: form.companyName.trim(),
      name: form.name.trim(),
      email: form.email.trim(),
      phone: form.phone.trim(),
    };

    if (!trimmedForm.companyName) {
      setError("يرجى إدخال اسم الشركة");
      setStep(1);
      return;
    }
    if (trimmedForm.password !== trimmedForm.confirmPassword) {
      setError("كلمة المرور غير متطابقة");
      return;
    }
    if (trimmedForm.password.length < 8) {
      setError("كلمة المرور 8 أحرف على الأقل");
      return;
    }

    setLoading(true);
    try {
      const res = await fetch("/api/auth/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(trimmedForm),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "فشل إنشاء الحساب");
        return;
      }
      router.push("/app");
      router.refresh();
    } catch {
      setError("حدث خطأ في الاتصال بالخادم، يرجى المحاولة لاحقاً");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-brand-50 p-4 py-10">
      <div className="w-full max-w-lg">
        <div className="text-center mb-6">
          <Link href="/" className="inline-flex items-center gap-2">
            <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500 to-brand-700 flex items-center justify-center text-white font-bold text-xl">ر</div>
          </Link>
          <h1 className="mt-4 text-2xl font-bold text-slate-900">إنشاء حساب جديد</h1>
          <p className="mt-1 text-sm text-slate-600">14 يوم تجربة مجانية - بدون بطاقة ائتمان</p>
        </div>

        <div className="card p-7">
          {/* Stepper */}
          <div className="flex items-center gap-2 mb-6">
            {[1, 2].map((n) => (
              <div key={n} className={`flex-1 h-1.5 rounded-full ${step >= n ? "bg-brand-600" : "bg-slate-200"}`} />
            ))}
          </div>

          <form onSubmit={onSubmit} className="space-y-4">
            {error && <div className="p-3 rounded-lg bg-red-50 text-red-700 text-sm">{error}</div>}

            {step === 1 && (
              <>
                <h2 className="font-semibold text-slate-900">معلومات الشركة</h2>
                <div>
                  <label className="label">اسم الشركة / المحل</label>
                  <input className="input" value={form.companyName} onChange={(e) => update("companyName", e.target.value)} required />
                </div>
                <div>
                  <label className="label">نوع النشاط</label>
                  <select className="input" value={form.industry} onChange={(e) => update("industry", e.target.value)}>
                    <option value="retail">تجارة / محل تجزئة</option>
                    <option value="supermarket">سوبر ماركت</option>
                    <option value="wholesale">جملة</option>
                    <option value="pharmacy">صيدلية</option>
                    <option value="restaurant">مطعم / كافيه</option>
                    <option value="other">أخرى</option>
                  </select>
                </div>
                <button type="button" onClick={() => setStep(2)} disabled={!form.companyName} className="btn-primary w-full">
                  التالي
                </button>
              </>
            )}

            {step === 2 && (
              <>
                <h2 className="font-semibold text-slate-900">بياناتك كمدير</h2>
                <div>
                  <label className="label">الاسم الكامل</label>
                  <input className="input" value={form.name} onChange={(e) => update("name", e.target.value)} required />
                </div>
                <div>
                  <label className="label">البريد الإلكتروني</label>
                  <input type="email" className="input" value={form.email} onChange={(e) => update("email", e.target.value)} required />
                </div>
                <div>
                  <label className="label">رقم الهاتف</label>
                  <input className="input" value={form.phone} onChange={(e) => update("phone", e.target.value)} required />
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="label">كلمة المرور</label>
                    <input type="password" className="input" value={form.password} onChange={(e) => update("password", e.target.value)} required minLength={8} />
                  </div>
                  <div>
                    <label className="label">تأكيد</label>
                    <input type="password" className="input" value={form.confirmPassword} onChange={(e) => update("confirmPassword", e.target.value)} required minLength={8} />
                  </div>
                </div>
                <div className="flex items-start gap-2 text-xs text-slate-600 bg-slate-50 p-3 rounded-lg">
                  <Check className="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0" />
                  <span>بإنشاء حساب، أنت توافق على شروط الاستخدام. ستبدأ بـ 14 يوم تجربة مجانية.</span>
                </div>
                <div className="flex gap-2">
                  <button type="button" onClick={() => setStep(1)} className="btn-secondary flex-1">رجوع</button>
                  <button type="submit" disabled={loading} className="btn-primary flex-1">
                    {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : "إنشاء الحساب"}
                  </button>
                </div>
              </>
            )}
          </form>

          <div className="mt-5 pt-5 border-t border-slate-200 text-center text-sm text-slate-600">
            لديك حساب؟{" "}
            <Link href="/login" className="text-brand-600 font-medium hover:underline">دخول</Link>
          </div>
        </div>
      </div>
    </div>
  );
}