"use client"

import { useState } from "react"
import { X, Eye, EyeOff, Loader2 } from "lucide-react"

export interface UserFormData {
  name: string
  email: string
  password: string
  role: "admin" | "employee"
  status: "active" | "inactive"
}

interface CreateUserModalProps {
  open: boolean
  onClose: () => void
  onSubmit: (data: UserFormData) => void
}

export function CreateUserModal({ open, onClose, onSubmit }: CreateUserModalProps) {
  const [form, setForm] = useState<UserFormData>({
    name: "",
    email: "",
    password: "",
    role: "employee",
    status: "active",
  })
  const [showPassword, setShowPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)

  if (!open) return null

  function handleChange(field: keyof UserFormData, value: string) {
    setForm((prev) => ({ ...prev, [field]: value }))
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setIsLoading(true)
    await new Promise((r) => setTimeout(r, 1000))
    setIsLoading(false)
    onSubmit(form)
    setForm({ name: "", email: "", password: "", role: "employee" })
  }

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
    >
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onClose}
        aria-hidden="true"
      />

      {/* Modal */}
      <div className="relative w-full max-w-md bg-card rounded-2xl shadow-2xl border border-border overflow-hidden">
        {/* Header */}
        <div
          className="flex items-center justify-between px-6 py-5 border-b border-border"
          style={{ background: "var(--brand-navy)" }}
        >
          <div>
            <h2 id="modal-title" className="text-white font-bold text-lg font-sans">
              Create New User
            </h2>
            <p className="text-white/50 text-xs font-sans mt-0.5">
              Add a new user to the system
            </p>
          </div>
          <button
            onClick={onClose}
            className="p-2 rounded-xl text-white/50 hover:text-white hover:bg-white/10 transition-colors"
            aria-label="Close"
          >
            <X className="w-4 h-4" aria-hidden="true" />
          </button>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} className="px-6 py-6 flex flex-col gap-4">
          {/* Name */}
          <div className="flex flex-col gap-1.5">
            <label className="text-sm font-semibold text-foreground font-sans" htmlFor="new-name">
              Full Name
            </label>
            <input
              id="new-name"
              type="text"
              required
              value={form.name}
              onChange={(e) => handleChange("name", e.target.value)}
              placeholder="Dr. Ahmet Yilmaz"
              disabled={isLoading}
              className="w-full px-4 py-2.5 rounded-xl border border-border bg-background text-foreground placeholder:text-muted-foreground text-sm font-sans outline-none transition-all focus:border-[var(--brand-green)] focus:ring-2 focus:ring-[var(--brand-green)]/20 disabled:opacity-60"
            />
          </div>

          {/* Email */}
          <div className="flex flex-col gap-1.5">
            <label className="text-sm font-semibold text-foreground font-sans" htmlFor="new-email">
              Email Address
            </label>
            <input
              id="new-email"
              type="email"
              required
              value={form.email}
              onChange={(e) => handleChange("email", e.target.value)}
              placeholder="user@livist.com"
              disabled={isLoading}
              className="w-full px-4 py-2.5 rounded-xl border border-border bg-background text-foreground placeholder:text-muted-foreground text-sm font-sans outline-none transition-all focus:border-[var(--brand-green)] focus:ring-2 focus:ring-[var(--brand-green)]/20 disabled:opacity-60"
            />
          </div>

          {/* Password */}
          <div className="flex flex-col gap-1.5">
            <label className="text-sm font-semibold text-foreground font-sans" htmlFor="new-password">
              Password
            </label>
            <div className="relative">
              <input
                id="new-password"
                type={showPassword ? "text" : "password"}
                required
                minLength={8}
                value={form.password}
                onChange={(e) => handleChange("password", e.target.value)}
                placeholder="At least 8 characters"
                disabled={isLoading}
                className="w-full px-4 py-2.5 pr-11 rounded-xl border border-border bg-background text-foreground placeholder:text-muted-foreground text-sm font-sans outline-none transition-all focus:border-[var(--brand-green)] focus:ring-2 focus:ring-[var(--brand-green)]/20 disabled:opacity-60"
              />
              <button
                type="button"
                onClick={() => setShowPassword((v) => !v)}
                className="absolute cursor-pointer right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
                aria-label={showPassword ? "Hide password" : "Show password"}
              >
                {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
              </button>
            </div>
          </div>

          {/* Role */}
          <div className="flex flex-col gap-1.5">
            <label className="text-sm font-semibold text-foreground font-sans" htmlFor="new-role">
              Role
            </label>
            <div className="flex gap-3 ">
              {(["admin", "employee"] as const).map((role) => (
                <button
                  key={role}
                  type="button"
                  onClick={() => handleChange("role", role)}
                  className="flex-1 py-2.5 rounded-xl text-sm font-semibold font-sans border transition-all duration-150"
                  style={
                    form.role === role
                      ? {
                          background: role === "admin" ? "var(--brand-navy)" : "var(--brand-green)",
                          color: "white",
                          border: `2px solid ${role === "admin" ? "var(--brand-navy)" : "var(--brand-green)"}`,
                        }
                      : {
                          background: "transparent",
                          color: "var(--muted-foreground)",
                          border: "2px solid var(--border)",
                        }
                  }
                >
                  {role === "admin" ? "Admin" : "Staff"}
                </button>
              ))}
            </div>
          </div>

          {/* Status */}
          <div className="flex flex-col gap-1.5">
            <label className="text-sm font-semibold text-foreground font-sans" htmlFor="new-status">
              Status
            </label>
            <div className="flex gap-3">
              {(["active", "inactive"] as const).map((s) => (
                <button
                  key={s}
                  type="button"
                  onClick={() => handleChange("status", s)}
                  className="flex-1 py-2.5 rounded-xl text-sm font-semibold font-sans border transition-all duration-150"
                  style={
                    form.status === s
                      ? {
                          background: s === "active" ? "var(--brand-green)" : "#6B7280",
                          color: "white",
                          border: `2px solid ${s === "active" ? "var(--brand-green)" : "#6B7280"}`,
                        }
                      : {
                          background: "transparent",
                          color: "var(--muted-foreground)",
                          border: "2px solid var(--border)",
                        }
                  }
                >
                  {s === "active" ? "Active" : "Inactive"}
                </button>
              ))}
            </div>
          </div>

          {/* Actions */}
          <div className="flex gap-3 mt-2">
            <button
              type="button"
              onClick={onClose}
              disabled={isLoading}
              className="flex-1 py-2.5 rounded-xl text-sm font-semibold font-sans border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-all disabled:opacity-50"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isLoading}
              className="flex-1 py-2.5 rounded-xl text-white text-sm font-semibold font-sans transition-all duration-150 flex items-center justify-center gap-2 disabled:opacity-70 hover:brightness-105"
              style={{ background: "var(--brand-green)" }}
            >
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  Creating...
                </>
              ) : (
                "Create User"
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}