"use client";

import { useState } from "react";
import Link from "next/link";
import api from "@/lib/api";
import toast from "react-hot-toast";

import {
  User,
  Mail,
  Phone,
  Lock,
  Store,
  MapPin,
  UserPlus,
} from "lucide-react";

export default function RegisterPage() {
  const [role, setRole] = useState<"customer" | "vendor">("customer");

  const [form, setForm] = useState({
    name: "",
    email: "",
    phone: "",
    password: "",
    password_confirmation: "",

    shop_name: "",
    shop_slug: "",
    shop_phone: "",
    shop_address: "",
    shop_description: "",
  });

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

  const handleRegister = async () => {
  if (
    !form.name ||
    !form.email ||
    !form.phone ||
    !form.password ||
    !form.password_confirmation
  ) {
    toast.error("Please fill all required fields");
    return;
  }

  if (form.password !== form.password_confirmation) {
    toast.error("Password confirmation does not match");
    return;
  }

  if (
    role === "vendor" &&
    (!form.shop_name ||
      !form.shop_slug ||
      !form.shop_phone ||
      !form.shop_address)
  ) {
    toast.error("Please fill vendor shop information");
    return;
  }

  try {
    setLoading(true);

    const payload: any = {
      name: form.name,
      email: form.email,
      phone: form.phone,
      password: form.password,
      password_confirmation: form.password_confirmation,
      role,
    };

    if (role === "vendor") {
      payload.shop_name = form.shop_name;
      payload.shop_slug = form.shop_slug;
      payload.shop_phone = form.shop_phone;
      payload.shop_address = form.shop_address;
      payload.shop_description = form.shop_description;
    }

    const res = await api.post("/register", payload);

    if (res.data.token) {
      localStorage.setItem("auth_token", res.data.token);
      localStorage.setItem("user", JSON.stringify(res.data.user));
    }

    toast.success(
      role === "vendor"
        ? "Vendor registration submitted successfully"
        : "Registration successful"
    );

    window.location.href = role === "vendor" ? "/vendor/dashboard" : "/";
  } catch (error: any) {
    console.log("FULL ERROR:", error.response?.data);

    if (error.response?.status === 422) {
        const errors = error.response.data.errors;

        const message = Object.values(errors)
        .flat()
        .join("\n");

        toast.error(message);
    } else {
        toast.error("Registration failed");
    }
    } finally {
    setLoading(false);
  }
};

  return (
    <>
      

      <main className="min-h-screen bg-[#f7fff8] px-4 py-16">
        <div className="max-w-3xl mx-auto bg-white rounded-[2rem] border border-green-100 shadow-xl p-7">
          <div className="text-center mb-8">
            <div className="w-16 h-16 mx-auto bg-green-50 text-green-600 rounded-2xl flex items-center justify-center">
              <UserPlus size={30} />
            </div>

            <h1 className="text-3xl md:text-4xl font-black mt-5 text-slate-900">
              Create Account
            </h1>

            <p className="text-slate-500 mt-2">
              Register as a customer or vendor
            </p>
          </div>

          <div className="grid grid-cols-2 gap-4 mb-7">
            <button
              onClick={() => setRole("customer")}
              className={`cursor-pointer rounded-3xl p-5 border-2 font-black transition ${
                role === "customer"
                  ? "border-green-600 bg-green-50 text-green-700"
                  : "border-slate-100 bg-slate-50 text-slate-700"
              }`}
            >
              Customer
            </button>

            <button
              onClick={() => setRole("vendor")}
              className={`cursor-pointer rounded-3xl p-5 border-2 font-black transition ${
                role === "vendor"
                  ? "border-green-600 bg-green-50 text-green-700"
                  : "border-slate-100 bg-slate-50 text-slate-700"
              }`}
            >
              Vendor
            </button>
          </div>

          <div className="grid md:grid-cols-2 gap-4">
            <Input
              icon={<User size={18} />}
              type="text"
              placeholder="Full Name *"
              value={form.name}
              onChange={(v) => setForm({ ...form, name: v })}
            />

            <Input
              icon={<Phone size={18} />}
              type="text"
              placeholder="Phone Number *"
              value={form.phone}
              onChange={(v) => setForm({ ...form, phone: v })}
            />

            <Input
              icon={<Mail size={18} />}
              type="email"
              placeholder="Email Address *"
              value={form.email}
              onChange={(v) => setForm({ ...form, email: v })}
            />

            <Input
              icon={<Lock size={18} />}
              type="password"
              placeholder="Password *"
              value={form.password}
              onChange={(v) => setForm({ ...form, password: v })}
            />

            <Input
              icon={<Lock size={18} />}
              type="password"
              placeholder="Confirm Password *"
              value={form.password_confirmation}
              onChange={(v) =>
                setForm({ ...form, password_confirmation: v })
              }
            />
          </div>

          {role === "vendor" && (
            <div className="mt-8 border-t border-slate-100 pt-8">
              <h2 className="text-2xl font-black mb-5 flex items-center gap-3">
                <Store className="text-green-600" />
                Vendor Shop Information
              </h2>

              <div className="grid md:grid-cols-2 gap-4">
                <Input
                  icon={<Store size={18} />}
                  type="text"
                  placeholder="Shop Name *"
                  value={form.shop_name}
                  onChange={(v) =>
                    setForm({
                      ...form,
                      shop_name: v,
                      shop_slug: v
                        .toLowerCase()
                        .replace(/[^a-z0-9]+/g, "-")
                        .replace(/(^-|-$)/g, ""),
                    })
                  }
                />

                <Input
                  icon={<Store size={18} />}
                  type="text"
                  placeholder="Shop Slug *"
                  value={form.shop_slug}
                  onChange={(v) => setForm({ ...form, shop_slug: v })}
                />

                <Input
                  icon={<Phone size={18} />}
                  type="text"
                  placeholder="Shop Phone *"
                  value={form.shop_phone}
                  onChange={(v) => setForm({ ...form, shop_phone: v })}
                />

                <Input
                  icon={<MapPin size={18} />}
                  type="text"
                  placeholder="Shop Address *"
                  value={form.shop_address}
                  onChange={(v) => setForm({ ...form, shop_address: v })}
                />
              </div>

              <textarea
                placeholder="Shop Description"
                value={form.shop_description}
                onChange={(e) =>
                  setForm({
                    ...form,
                    shop_description: e.target.value,
                  })
                }
                className="mt-4 w-full min-h-28 bg-slate-100 border border-slate-200 rounded-2xl px-5 py-4 outline-none focus:border-green-500"
              />
            </div>
          )}

          <button
            onClick={handleRegister}
            disabled={loading}
            className="cursor-pointer mt-8 w-full bg-green-600 hover:bg-green-700 disabled:bg-slate-300 text-white py-4 rounded-2xl font-black transition"
          >
            {loading ? "Creating Account..." : "Register"}
          </button>

          <div className="text-center mt-6">
            <p className="text-slate-500 text-sm">
              Already have an account?
            </p>

            <Link
              href="/login"
              className="cursor-pointer inline-flex mt-3 text-green-600 font-black"
            >
              Login Now
            </Link>
          </div>
        </div>
      </main>

   
    </>
  );
}

function Input({
  icon,
  type,
  placeholder,
  value,
  onChange,
}: {
  icon: React.ReactNode;
  type: string;
  placeholder: string;
  value: string;
  onChange: (value: string) => void;
}) {
  return (
    <div className="relative">
      <div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
        {icon}
      </div>

      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="w-full bg-slate-100 border border-slate-200 rounded-2xl py-4 pl-12 pr-4 outline-none focus:border-green-500"
      />
    </div>
  );
}