"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

interface UserFormProps {
  initialData?: {
    id?: string
    name: string
    email: string
    isActive: boolean
    roleIds: string[]
  }
  availableRoles: { id: string; name: string }[]
  onSuccess?: () => void
}

export default function UserForm({ initialData, availableRoles, onSuccess }: UserFormProps) {
  const router = useRouter()
  const [name, setName] = useState(initialData?.name || "")
  const [email, setEmail] = useState(initialData?.email || "")
  const [password, setPassword] = useState("")
  const [isActive, setIsActive] = useState(initialData?.isActive ?? true)
  const [selectedRoles, setSelectedRoles] = useState<string[]>(initialData?.roleIds || [])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError("")

    try {
      const url = initialData?.id ? `/api/users/${initialData.id}` : "/api/users"
      const method = initialData?.id ? "PUT" : "POST"

      const body: Record<string, unknown> = {
        name,
        email,
        isActive,
        roleIds: selectedRoles,
        ...(password ? { password } : {}),
      }

      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      })

      if (!res.ok) {
        const data = await res.json()
        throw new Error(data.error || "Failed to save user")
      }

      if (onSuccess) {
        onSuccess()
      } else {
        router.push("/users")
        router.refresh()
      }
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "Failed to save user")
    } finally {
      setLoading(false)
    }
  }

  function toggleRole(roleId: string) {
    setSelectedRoles((prev) =>
      prev.includes(roleId) ? prev.filter((id) => id !== roleId) : [...prev, roleId]
    )
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {error && (
        <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
          {error}
        </div>
      )}

      <div className="grid gap-6 md:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor="user-name">Full Name</Label>
          <Input
            id="user-name"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
            placeholder="e.g. John Doe"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="user-email">Email</Label>
          <Input
            id="user-email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            placeholder="e.g. john@company.com"
          />
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="user-password">
          Password {initialData?.id ? "(leave blank to keep unchanged)" : ""}
        </Label>
        <Input
          id="user-password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required={!initialData?.id}
          placeholder="••••••••"
        />
      </div>

      <div className="space-y-2">
        <Label>Roles</Label>
        <div className="flex flex-wrap gap-2">
          {availableRoles.map((role) => (
            <label
              key={role.id}
              className={
                selectedRoles.includes(role.id)
                  ? "flex cursor-pointer items-center gap-2 rounded-md border border-primary/30 bg-primary/10 px-3 py-2 text-sm"
                  : "flex cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm hover:bg-muted/50"
              }
            >
              <input
                type="checkbox"
                checked={selectedRoles.includes(role.id)}
                onChange={() => toggleRole(role.id)}
              />
              {role.name}
            </label>
          ))}
        </div>
      </div>

      <div>
        <label className="flex cursor-pointer items-center gap-2 text-sm">
          <input
            type="checkbox"
            checked={isActive}
            onChange={(e) => setIsActive(e.target.checked)}
          />
          <span>Active user</span>
        </label>
      </div>

      <div className="flex items-center justify-end gap-2">
        <Button
          type="submit"
          disabled={loading}
        >
          {loading ? "Saving..." : initialData?.id ? "Update User" : "Create User"}
        </Button>
        {onSuccess ? (
          <Button
            type="button"
            variant="secondary"
            onClick={() => onSuccess()}
          >
            Cancel
          </Button>
        ) : (
          <a
            href="/users"
            className="inline-flex h-10 items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground hover:bg-secondary/80"
          >
            Cancel
          </a>
        )}
      </div>
    </form>
  )
}