userDetails.tsx

import React, { useState } from "react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Icons } from "@/components/icons";

interface UserDetailsDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  user: {
    firstName: string;
    lastName: string;
    email: string;
    isAdmin: boolean;
    active: boolean;
    createdAt: string;
  };
  onSave: (updatedUser: Partial<typeof user>) => void; // Callback for saving changes
  onDeactivate: () => void; // Callback for deactivation
}

export function UserDetailsDialog({
  open,
  onOpenChange,
  user,
  onSave,
  onDeactivate,
}: UserDetailsDialogProps) {
  const [isEditing, setIsEditing] = useState({
    firstName: false,
    lastName: false,
    email: false,
    isAdmin: false,
  });

  const [editedUser, setEditedUser] = useState({ ...user });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setEditedUser((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSave = (field: keyof typeof isEditing) => {
    onSave({ [field]: editedUser[field] });
    setIsEditing((prev) => ({ ...prev, [field]: false }));
  };

  return (
    <div
      className={`fixed inset-0 z-50 flex items-center justify-center ${
        open ? "block" : "hidden"
      }`}
    >
      <div className="bg-white w-[400px] p-6 rounded-lg shadow-lg relative">
        {/* Close button */}
        <button
          className="absolute top-4 right-4 text-gray-600 hover:text-gray-800"
          onClick={() => onOpenChange(false)}
        >
          Close
        </button>

        {/* Avatar */}
        <div className="flex flex-col items-center mb-6">
          <Avatar className="h-16 w-16 bg-red-500">
            <AvatarFallback>
              {user.firstName.charAt(0)}
              {user.lastName.charAt(0)}
            </AvatarFallback>
          </Avatar>

          {/* Name */}
          <div className="text-center mt-4">
            {isEditing.firstName || isEditing.lastName ? (
              <div className="flex justify-center space-x-2">
                <input
                  className="border rounded px-2 py-1"
                  name="firstName"
                  value={editedUser.firstName}
                  onChange={handleInputChange}
                />
                <input
                  className="border rounded px-2 py-1"
                  name="lastName"
                  value={editedUser.lastName}
                  onChange={handleInputChange}
                />
                <button
                  onClick={() => {
                    handleSave("firstName");
                    handleSave("lastName");
                  }}
                  className="text-green-600 hover:underline"
                >
                  Save
                </button>
              </div>
            ) : (
              <h2 className="text-xl font-bold">
                {user.firstName} {user.lastName}{" "}
                <button
                  onClick={() => setIsEditing((prev) => ({ ...prev, firstName: true, lastName: true }))}
                >
                  <Icons.Pencil className="inline-block w-4 h-4 ml-2 text-gray-500" />
                </button>
              </h2>
            )}
          </div>
        </div>

        {/* Role */}
        <div className="text-center mb-4">
          {isEditing.isAdmin ? (
            <div className="flex justify-center space-x-2">
              <select
                className="border rounded px-2 py-1"
                name="isAdmin"
                value={editedUser.isAdmin ? "true" : "false"}
                onChange={handleInputChange}
              >
                <option value="false">User</option>
                <option value="true">Admin</option>
              </select>
              <button
                onClick={() => handleSave("isAdmin")}
                className="text-green-600 hover:underline"
              >
                Save
              </button>
            </div>
          ) : (
            <p className="italic">
              {user.isAdmin ? "Admin" : "User"}{" "}
              <button
                onClick={() => setIsEditing((prev) => ({ ...prev, isAdmin: true }))}
              >
                <Icons.Pencil className="inline-block w-4 h-4 ml-2 text-gray-500" />
              </button>
            </p>
          )}
        </div>

        {/* Email */}
        <div className="text-center mb-4">
          <p className="text-sm font-semibold">Email address:</p>
          {isEditing.email ? (
            <div className="flex justify-center space-x-2">
              <input
                className="border rounded px-2 py-1"
                name="email"
                value={editedUser.email}
                onChange={handleInputChange}
              />
              <button
                onClick={() => handleSave("email")}
                className="text-green-600 hover:underline"
              >
                Save
              </button>
            </div>
          ) : (
            <p>
              {user.email}{" "}
              <button
                onClick={() => setIsEditing((prev) => ({ ...prev, email: true }))}
              >
                <Icons.Pencil className="inline-block w-4 h-4 ml-2 text-gray-500" />
              </button>
            </p>
          )}
        </div>

        {/* Status */}
        <div className="text-center mb-4">
          <p className="text-sm font-semibold">Status:</p>
          <p className="italic">{user.active ? "Active" : "Inactive"}</p>
        </div>

        {/* Date Created */}
        <div className="text-center mb-6">
          <p className="text-sm font-semibold">Date created:</p>
          <p className="italic">{user.createdAt}</p>
        </div>

        {/* Action buttons */}
        <div className="flex justify-between">
          <a
            href={`mailto:${user.email}`}
            className="flex items-center bg-black text-white py-2 px-4 rounded-md hover:bg-gray-800"
          >
            Contact
          </a>
          <button
            onClick={onDeactivate}
            className="flex items-center bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700"
          >
            Deactivate
          </button>
        </div>
      </div>
    </div>
  );
}