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, Mail, Phone, Save, User } from "lucide-react";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

export default function EditUser() {
  const navigate = useNavigate();
  const { id } = useParams();

  const [formData, setFormData] = useState({
    username: "",
    email: "",
    phone: "+998",
  });

  const [errors, setErrors] = useState<Record<string, string>>({});

  useEffect(() => {
    setFormData({
      username: "john_doe",
      email: "john@example.com",
      phone: "+998901234567",
    });
  }, [id]);

  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 raqami kiritilishi shart";
    }

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

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

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

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

    if (validateForm()) {
      navigate("/");
    }
  };

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

          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-600 to-teal-700 flex items-center justify-center shadow-lg shadow-emerald-500/20">
              <User className="w-6 h-6 text-white" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-slate-100">Tahrirlash</h1>
              <p className="text-slate-400 text-sm">Ma'lumotlarni yangilang</p>
            </div>
          </div>
        </div>

        {/* Form Card */}
        <div className="bg-slate-900/50 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-800/50 p-6 md:p-8">
          <form onSubmit={handleSubmit} className="space-y-5">
            {/* Username */}
            <div className="space-y-2">
              <Label
                htmlFor="username"
                className="text-slate-300 font-medium text-sm"
              >
                Username <span className="text-red-400">*</span>
              </Label>
              <div className="relative">
                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 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-11 pl-10 rounded-lg border transition-colors 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-emerald-500 hover:border-slate-600/50",
                  )}
                />
              </div>
              {errors.username && (
                <p className="text-xs text-red-400">{errors.username}</p>
              )}
            </div>

            {/* Email */}
            <div className="space-y-2">
              <Label
                htmlFor="email"
                className="text-slate-300 font-medium text-sm"
              >
                Email
              </Label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 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-11 pl-10 rounded-lg border transition-colors 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-emerald-500 hover:border-slate-600/50",
                  )}
                />
              </div>
              {errors.email && (
                <p className="text-xs text-red-400">{errors.email}</p>
              )}
            </div>

            {/* Phone */}
            <div className="space-y-2">
              <Label
                htmlFor="phone"
                className="text-slate-300 font-medium text-sm"
              >
                Telefon raqami
              </Label>
              <div className="relative">
                <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 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-11 pl-10 rounded-lg border transition-colors 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-emerald-500 hover:border-slate-600/50",
                  )}
                />
              </div>
              {errors.phone && (
                <p className="text-xs text-red-400">{errors.phone}</p>
              )}
            </div>

            {/* Contact Error */}
            {errors.contact && (
              <div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3">
                <p className="text-xs text-amber-400">{errors.contact}</p>
              </div>
            )}

            {/* Action Buttons */}
            <div className="flex gap-3 pt-4">
              <Button
                type="button"
                variant="outline"
                onClick={() => navigate(-1)}
                className="flex-1 h-11 rounded-lg border-slate-700/50 bg-slate-800/50 hover:bg-slate-700/50 text-slate-300 hover:text-slate-100 font-medium cursor-pointer"
              >
                Bekor qilish
              </Button>
              <Button
                type="submit"
                className="flex-1 h-11 rounded-lg bg-gradient-to-r cursor-pointer text-md from-emerald-600 to-teal-700 hover:from-emerald-700 hover:to-teal-800 text-white font-medium shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/30 transition-all"
              >
                <Save className="!w-5 !h-5 mr-2" />
                Yangilash
              </Button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}