import formatPhone from "@/shared/lib/formatPhone";
import { Button } from "@/shared/ui/button";
import { Input } from "@/shared/ui/input";
import { Label } from "@/shared/ui/label";
import clsx from "clsx";
import {
  ArrowLeft,
  Eye,
  EyeOff,
  Lock,
  Mail,
  Phone,
  Sparkles,
  User,
} from "lucide-react";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";

export default function CreateUser() {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const [formData, setFormData] = useState({
    username: "",
    email: "",
    phone: "+998",
    password: "",
    confirmPassword: "",
  });

  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    if (!formData.username.trim()) {
      newErrors.username = "Username majburiy";
    } else if (formData.username.length < 3) {
      newErrors.username =
        "Username kamida 3 ta belgidan iborat bo'lishi kerak";
    }

    if (!formData.email.trim() && !formData.phone.trim()) {
      newErrors.contact =
        "Email yoki telefon raqamlardan kamida bittasi kiritilishi kerak";
    }

    if (
      formData.email.trim() &&
      !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)
    ) {
      newErrors.email = "Email formati noto'g'ri";
    }

    if (
      formData.phone.trim() &&
      !/^\+998\d{9}$/.test(formData.phone.replace(/\s/g, ""))
    ) {
      newErrors.phone = "Telefon raqami formati: +998901234567";
    }

    if (!formData.password) {
      newErrors.password = "Parol majburiy";
    } else if (formData.password.length < 8) {
      newErrors.password = "Parol kamida 8 ta belgidan iborat bo'lishi kerak";
    }

    if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = "Parollar mos kelmaydi";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (validateForm()) {
      // const payload = {
      //   username: formData.username,
      //   email: formData.email || null,
      //   phone: formData.phone || null,
      //   password: formData.password,
      // };
      // navigate("/");
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br w-full from-slate-950 via-slate-900 to-slate-950 p-4 md:p-8">
      <div className="w-full mx-auto">
        {/* Header */}
        <div className="mb-8">
          <Button
            variant="ghost"
            onClick={() => navigate("/")}
            className="mb-4 -ml-2 text-slate-400 hover:text-slate-100 hover:bg-slate-800/50 cursor-pointer"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            {t("Orqaga")}
          </Button>

          <div className="flex items-center gap-3 mb-2">
            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center shadow-lg shadow-blue-500/20">
              <Sparkles className="w-6 h-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-slate-100">
                {t("Yangi foydalanuvchi")}
              </h1>
              <p className="text-slate-400 mt-1">
                {t("Ma'lumotlarni to'ldiring va saqlang")}
              </p>
            </div>
          </div>
        </div>

        {/* Form Card */}
        <div className="bg-slate-900/50 backdrop-blur-sm rounded-3xl shadow-2xl border border-slate-800/50 overflow-hidden">
          <div className="p-8">
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Username */}
              <div className="space-y-2">
                <Label
                  htmlFor="username"
                  className="text-slate-300 font-medium"
                >
                  {t("Ismi")}
                </Label>
                <div className="relative">
                  <User className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
                  <Input
                    id="username"
                    value={formData.username}
                    onChange={(e) => {
                      setFormData((p) => ({ ...p, username: e.target.value }));
                      setErrors((p) => ({ ...p, username: "" }));
                    }}
                    placeholder="john_doe"
                    className={clsx(
                      "h-14 pl-12 pr-4 rounded-xl border-2 transition-all duration-200 bg-slate-800/50 text-slate-200 placeholder:text-slate-500",
                      errors.username
                        ? "border-red-500/50 focus:border-red-500 bg-red-500/10"
                        : "border-slate-700/50 focus:border-blue-500 hover:border-slate-600/50",
                    )}
                  />
                </div>
                {errors.username && (
                  <p className="text-sm text-red-400 flex items-center gap-1">
                    {t(errors.username)}
                  </p>
                )}
              </div>

              {/* Email */}
              <div className="space-y-2">
                <Label htmlFor="email" className="text-slate-300 font-medium">
                  {t("Email")}
                </Label>
                <div className="relative">
                  <Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
                  <Input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => {
                      setFormData((p) => ({ ...p, email: e.target.value }));
                      setErrors((p) => ({ ...p, email: "", contact: "" }));
                    }}
                    placeholder="email@example.com"
                    className={clsx(
                      "h-14 pl-12 pr-4 rounded-xl border-2 transition-all duration-200 bg-slate-800/50 text-slate-200 placeholder:text-slate-500",
                      errors.email
                        ? "border-red-500/50 focus:border-red-500 bg-red-500/10"
                        : "border-slate-700/50 focus:border-blue-500 hover:border-slate-600/50",
                    )}
                  />
                </div>
                {errors.email && (
                  <p className="text-sm text-red-400 flex items-center gap-1">
                    {t(errors.email)}
                  </p>
                )}
              </div>

              {/* Phone */}
              <div className="space-y-2">
                <Label htmlFor="phone" className="text-slate-300 font-medium">
                  {t("Telefon raqami")}
                </Label>
                <div className="relative">
                  <Phone className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
                  <Input
                    id="phone"
                    type="tel"
                    value={formatPhone(formData.phone)}
                    onChange={(e) => {
                      setFormData((p) => ({ ...p, phone: e.target.value }));
                      setErrors((p) => ({ ...p, phone: "", contact: "" }));
                    }}
                    placeholder="+998 90 123 45 67"
                    className={clsx(
                      "h-14 pl-12 pr-4 rounded-xl border-2 transition-all duration-200 bg-slate-800/50 text-slate-200 placeholder:text-slate-500",
                      errors.phone
                        ? "border-red-500/50 focus:border-red-500 bg-red-500/10"
                        : "border-slate-700/50 focus:border-blue-500 hover:border-slate-600/50",
                    )}
                  />
                </div>
                {errors.phone && (
                  <p className="text-sm text-red-400 flex items-center gap-1">
                    {t(errors.phone)}
                  </p>
                )}
              </div>

              {/* Contact Error */}
              {errors.contact && (
                <div className="bg-amber-500/10 border-2 border-amber-500/30 rounded-xl p-4">
                  <p className="text-sm text-amber-400 flex items-center gap-2">
                    <span className="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
                    {errors.contact}
                  </p>
                </div>
              )}

              {/* Password */}
              <div className="space-y-2">
                <Label
                  htmlFor="password"
                  className="text-slate-300 font-medium"
                >
                  {t("Parol")}
                </Label>
                <div className="relative">
                  <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
                  <Input
                    id="password"
                    type={showPassword ? "text" : "password"}
                    value={formData.password}
                    onChange={(e) => {
                      setFormData((p) => ({ ...p, password: e.target.value }));
                      setErrors((p) => ({ ...p, password: "" }));
                    }}
                    placeholder="••••••••"
                    className={clsx(
                      "h-14 pl-12 pr-12 rounded-xl border-2 transition-all duration-200 bg-slate-800/50 text-slate-200 placeholder:text-slate-500",
                      errors.password
                        ? "border-red-500/50 focus:border-red-500 bg-red-500/10"
                        : "border-slate-700/50 focus:border-blue-500 hover:border-slate-600/50",
                    )}
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="absolute right-2 top-1/2 -translate-y-1/2 h-10 w-10 hover:bg-slate-700/50 rounded-lg"
                    onClick={() => setShowPassword(!showPassword)}
                  >
                    {showPassword ? (
                      <EyeOff className="h-5 w-5 text-slate-500" />
                    ) : (
                      <Eye className="h-5 w-5 text-slate-500" />
                    )}
                  </Button>
                </div>
                {errors.password && (
                  <p className="text-sm text-red-400 flex items-center gap-1">
                    {t(errors.password)}
                  </p>
                )}
              </div>

              {/* Confirm Password */}
              <div className="space-y-2">
                <Label
                  htmlFor="confirmPassword"
                  className="text-slate-300 font-medium"
                >
                  {t("Parolni tasdiqlang")}
                </Label>
                <div className="relative">
                  <Lock className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
                  <Input
                    id="confirmPassword"
                    type={showConfirmPassword ? "text" : "password"}
                    value={formData.confirmPassword}
                    onChange={(e) => {
                      setFormData((p) => ({
                        ...p,
                        confirmPassword: e.target.value,
                      }));
                      setErrors((p) => ({ ...p, confirmPassword: "" }));
                    }}
                    placeholder="••••••••"
                    className={clsx(
                      "h-14 pl-12 pr-12 rounded-xl border-2 transition-all duration-200 bg-slate-800/50 text-slate-200 placeholder:text-slate-500",
                      errors.confirmPassword
                        ? "border-red-500/50 focus:border-red-500 bg-red-500/10"
                        : "border-slate-700/50 focus:border-blue-500 hover:border-slate-600/50",
                    )}
                  />
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="absolute right-2 top-1/2 -translate-y-1/2 h-10 w-10 hover:bg-slate-700/50 rounded-lg"
                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                  >
                    {showConfirmPassword ? (
                      <EyeOff className="h-5 w-5 text-slate-500" />
                    ) : (
                      <Eye className="h-5 w-5 text-slate-500" />
                    )}
                  </Button>
                </div>
                {errors.confirmPassword && (
                  <p className="text-sm text-red-400 flex items-center gap-1">
                    {t(errors.confirmPassword)}
                  </p>
                )}
              </div>

              {/* Action Buttons */}
              <div className="flex gap-3 pt-6">
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => navigate("/")}
                  className="flex-1 h-14 rounded-xl cursor-pointer border-2 border-slate-700/50 bg-slate-800/50 hover:bg-slate-700/50 text-slate-300 hover:text-slate-100 hover:border-slate-600/50 font-medium transition-all duration-200"
                >
                  {t("Bekor qilish")}
                </Button>
                <Button
                  type="submit"
                  className="flex-1 h-14 rounded-xl cursor-pointer bg-gradient-to-r from-blue-600 to-indigo-700 hover:from-blue-700 hover:to-indigo-800 text-white font-medium shadow-lg shadow-blue-500/20 hover:shadow-xl hover:shadow-blue-500/30 transition-all duration-200"
                >
                  {t("Saqlash")}
                </Button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}
