'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { UtensilsCrossed, Eye, EyeOff, Loader2, QrCode, GitBranch, BarChart3, Shield, CheckCircle2 } from 'lucide-react'
import toast from 'react-hot-toast'

function RegisterForm() {
  const router = useRouter()
  const [showPassword, setShowPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [form, setForm] = useState({
    name: '',
    email: '',
    phone: '',
    address: '',
    city: '',
    province: '',
    password: '',
    restaurantName: '',
    referralCode: '',
  })

  useEffect(() => {
    const params = new URLSearchParams(window.location.search)
    const ref = params.get('ref')
    if (ref) {
      setForm(prev => ({ ...prev, referralCode: ref.toUpperCase() }))
    }
  }, [])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (form.password.length < 6) {
      toast.error('Password minimal 6 karakter')
      return
    }
    setLoading(true)
    try {
      const res = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      const data = await res.json()
      if (!res.ok) throw new Error(data.error)
      if (data.requiresVerification) {
        toast.success('Registrasi berhasil! Cek email Anda untuk verifikasi.')
        router.push('/verify-email')
        return
      }
      toast.success('Registrasi berhasil!')
      router.push('/dashboard')
    } catch (err: any) {
      toast.error(err.message || 'Registrasi gagal')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen flex flex-col lg:flex-row">
      {/* Left Branding Panel */}
      <div className="lg:w-1/2 bg-gradient-to-br from-orange-600 via-orange-500 to-amber-500 relative overflow-hidden flex flex-col justify-center px-8 py-12 lg:px-16 lg:py-20">
        {/* Decorative circles */}
        <div className="absolute top-[-80px] left-[-80px] w-64 h-64 bg-white/10 rounded-full" />
        <div className="absolute bottom-[-120px] right-[-60px] w-96 h-96 bg-white/5 rounded-full" />
        <div className="absolute top-1/2 right-[-40px] w-48 h-48 bg-white/10 rounded-full" />

        <div className="relative z-10">
          {/* Logo */}
          <Link href="/" className="inline-flex items-center gap-3 mb-10">
            <div className="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
              <UtensilsCrossed className="w-7 h-7 text-white" />
            </div>
            <span className="text-3xl font-bold text-white">RestoMenu</span>
          </Link>

          {/* Headline */}
          <h1 className="text-3xl lg:text-4xl font-bold text-white mb-4 leading-tight">
            Mulai Digitalisasi<br />Restoran Anda Hari Ini
          </h1>
          <p className="text-orange-100 text-lg mb-10 max-w-md">
            Bergabung dengan ratusan restoran yang sudah meningkatkan efisiensi operasional mereka.
          </p>

          {/* Feature highlights */}
          <div className="space-y-4 mb-12">
            {[
              { icon: QrCode, text: 'QR Menu Ordering - Pesan langsung dari meja' },
              { icon: GitBranch, text: 'Multi Cabang - Kelola semua cabang dalam satu dashboard' },
              { icon: BarChart3, text: 'Laporan Real-time - Pantau penjualan kapan saja' },
              { icon: Shield, text: 'Aman & Terpercaya - Data terenkripsi dan aman' },
            ].map((feature, i) => (
              <div key={i} className="flex items-center gap-3">
                <div className="w-8 h-8 bg-white/20 backdrop-blur-sm rounded-lg flex items-center justify-center flex-shrink-0">
                  <feature.icon className="w-4 h-4 text-white" />
                </div>
                <span className="text-white/90 text-sm lg:text-base">{feature.text}</span>
              </div>
            ))}
          </div>

          {/* Benefits */}
          <div className="space-y-2 mb-8">
            {[
              'Gratis 14 hari trial, tanpa kartu kredit',
              'Setup dalam 5 menit',
              'Support WhatsApp 24/7',
            ].map((benefit, i) => (
              <div key={i} className="flex items-center gap-2">
                <CheckCircle2 className="w-4 h-4 text-white/80 flex-shrink-0" />
                <span className="text-white/80 text-sm">{benefit}</span>
              </div>
            ))}
          </div>

          {/* Trust indicator */}
          <div className="flex items-center gap-2">
            <div className="flex -space-x-2">
              {[...Array(4)].map((_, i) => (
                <div
                  key={i}
                  className="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm border-2 border-white/30 flex items-center justify-center"
                >
                  <span className="text-white text-xs font-medium">
                    {['R', 'W', 'C', 'B'][i]}
                  </span>
                </div>
              ))}
            </div>
            <p className="text-white/80 text-sm ml-1">
              Dipercaya <span className="font-semibold text-white">500+</span> restoran di Indonesia
            </p>
          </div>
        </div>
      </div>

      {/* Right Form Panel */}
      <div className="lg:w-1/2 bg-white flex flex-col justify-center px-8 py-12 lg:px-16 lg:py-20">
        <div className="w-full max-w-md mx-auto">
          {/* Mobile logo (shown only on small screens) */}
          <div className="lg:hidden flex items-center gap-2 mb-8 justify-center">
            <UtensilsCrossed className="w-8 h-8 text-primary-600" />
            <span className="text-xl font-bold text-gray-900">RestoMenu</span>
          </div>

          <div className="mb-8">
            <h2 className="text-2xl lg:text-3xl font-bold text-gray-900">Buat Akun Baru</h2>
            <p className="text-gray-500 mt-2">Mulai kelola restoran Anda secara digital</p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Nama Restoran</label>
              <input
                type="text"
                className="input-field"
                placeholder="Contoh: Warung Nasi Goreng Jaya"
                value={form.restaurantName}
                onChange={(e) => setForm({ ...form, restaurantName: e.target.value })}
                required
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Nama Lengkap</label>
              <input
                type="text"
                className="input-field"
                placeholder="Nama pemilik / admin"
                value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })}
                required
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Email</label>
              <input
                type="email"
                className="input-field"
                placeholder="nama@restoran.com"
                value={form.email}
                onChange={(e) => setForm({ ...form, email: e.target.value })}
                required
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">No. Telepon</label>
              <input
                type="tel"
                className="input-field"
                placeholder="08xxxxxxxxxx"
                value={form.phone}
                onChange={(e) => setForm({ ...form, phone: e.target.value })}
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Alamat</label>
              <input
                type="text"
                className="input-field"
                placeholder="Alamat lengkap"
                value={form.address}
                onChange={(e) => setForm({ ...form, address: e.target.value })}
              />
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1.5">Kota</label>
                <input
                  type="text"
                  className="input-field"
                  placeholder="Nama kota"
                  value={form.city}
                  onChange={(e) => setForm({ ...form, city: e.target.value })}
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1.5">Provinsi</label>
                <select
                  className="input-field"
                  value={form.province}
                  onChange={(e) => setForm({ ...form, province: e.target.value })}
                >
                  <option value="">Pilih Provinsi</option>
                  <option value="Aceh">Aceh</option>
                  <option value="Sumatera Utara">Sumatera Utara</option>
                  <option value="Sumatera Barat">Sumatera Barat</option>
                  <option value="Riau">Riau</option>
                  <option value="Jambi">Jambi</option>
                  <option value="Sumatera Selatan">Sumatera Selatan</option>
                  <option value="Bengkulu">Bengkulu</option>
                  <option value="Lampung">Lampung</option>
                  <option value="Kep. Bangka Belitung">Kep. Bangka Belitung</option>
                  <option value="Kep. Riau">Kep. Riau</option>
                  <option value="DKI Jakarta">DKI Jakarta</option>
                  <option value="Jawa Barat">Jawa Barat</option>
                  <option value="Jawa Tengah">Jawa Tengah</option>
                  <option value="DI Yogyakarta">DI Yogyakarta</option>
                  <option value="Jawa Timur">Jawa Timur</option>
                  <option value="Banten">Banten</option>
                  <option value="Bali">Bali</option>
                  <option value="Nusa Tenggara Barat">Nusa Tenggara Barat</option>
                  <option value="Nusa Tenggara Timur">Nusa Tenggara Timur</option>
                  <option value="Kalimantan Barat">Kalimantan Barat</option>
                  <option value="Kalimantan Tengah">Kalimantan Tengah</option>
                  <option value="Kalimantan Selatan">Kalimantan Selatan</option>
                  <option value="Kalimantan Timur">Kalimantan Timur</option>
                  <option value="Kalimantan Utara">Kalimantan Utara</option>
                  <option value="Sulawesi Utara">Sulawesi Utara</option>
                  <option value="Sulawesi Tengah">Sulawesi Tengah</option>
                  <option value="Sulawesi Selatan">Sulawesi Selatan</option>
                  <option value="Sulawesi Tenggara">Sulawesi Tenggara</option>
                  <option value="Gorontalo">Gorontalo</option>
                  <option value="Sulawesi Barat">Sulawesi Barat</option>
                  <option value="Maluku">Maluku</option>
                  <option value="Maluku Utara">Maluku Utara</option>
                  <option value="Papua Barat">Papua Barat</option>
                  <option value="Papua">Papua</option>
                </select>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Password</label>
              <div className="relative">
                <input
                  type={showPassword ? 'text' : 'password'}
                  className="input-field pr-10"
                  placeholder="Minimal 6 karakter"
                  value={form.password}
                  onChange={(e) => setForm({ ...form, password: e.target.value })}
                  required
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                >
                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                </button>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1.5">Kode Referral (opsional)</label>
              <input
                type="text"
                className="input-field uppercase"
                placeholder="Masukkan kode referral jika ada"
                value={form.referralCode}
                onChange={(e) => setForm({ ...form, referralCode: e.target.value.toUpperCase() })}
              />
            </div>

            <button
              type="submit"
              disabled={loading}
              className="btn-primary w-full flex items-center justify-center gap-2 !py-2.5 text-base"
            >
              {loading && <Loader2 className="w-4 h-4 animate-spin" />}
              {loading ? 'Memproses...' : 'Daftar Sekarang'}
            </button>
          </form>

          <p className="text-center text-gray-600 mt-8">
            Sudah punya akun?{' '}
            <Link href="/login" className="text-primary-600 font-semibold hover:underline">
              Masuk
            </Link>
          </p>

          {/* Footer */}
          <div className="mt-12 pt-6 border-t border-gray-100 text-center">
            <p className="text-xs text-gray-400">Powered by restomenu.id</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default function RegisterPage() {
  return <RegisterForm />
}