import React from "react";
import { FaUser, FaCheck, FaTimes } from "react-icons/fa";
import type { AdminUser, PermissionKey } from "../types";
import { useAdminStore } from "../store/useAdminStore";

interface UserCardProps {
  user: AdminUser;
}

const permissions: { key: PermissionKey; label: string }[] = [
  { key: "permission_view", label: "View" },
  { key: "permission_manage_agent", label: "Manage Agent" },
  { key: "permission_admin", label: "Admin" },
];

export const UserCard: React.FC<UserCardProps> = ({ user }) => {
  const toggleActive = useAdminStore((s) => s.toggleActive);
  const togglePermission = useAdminStore((s) => s.togglePermission);

  return (
    <div
      style={{
        padding: "16px",
        backgroundColor: "var(--card-bg)",
        border: "1px solid var(--border)",
        borderRadius: "8px",
        transition: "all 0.2s",
        opacity: user.is_active ? 1 : 0.6,
      }}
    >
      {/* Header: User info + Active toggle */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          marginBottom: "16px",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
          <div
            style={{
              width: "40px",
              height: "40px",
              borderRadius: "50%",
              backgroundColor: user.is_active
                ? "var(--accent)"
                : "var(--text-muted)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <FaUser size={16} style={{ color: "var(--card-bg)" }} />
          </div>
          <div>
            <div
              style={{
                fontSize: "14px",
                fontWeight: 600,
                color: "var(--text-primary)",
              }}
            >
              {user.name} {user.last_name}
            </div>
            <div
              style={{
                fontSize: "12px",
                color: "var(--text-secondary)",
              }}
            >
              {user.login}
            </div>
          </div>
        </div>

        {/* Active toggle */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "8px",
          }}
        >
          <span
            style={{
              fontSize: "11px",
              color: user.is_active
                ? "var(--success-text, #22c55e)"
                : "var(--error-text, #ef4444)",
            }}
          >
            {user.is_active ? "Active" : "Inactive"}
          </span>
          <button
            onClick={() => toggleActive(user.id)}
            style={{
              width: "40px",
              height: "22px",
              borderRadius: "11px",
              border: "none",
              backgroundColor: user.is_active ? "#22c55e" : "#6b7280",
              cursor: "pointer",
              position: "relative",
              transition: "background-color 0.2s",
            }}
          >
            <div
              style={{
                width: "16px",
                height: "16px",
                borderRadius: "50%",
                backgroundColor: "#fff",
                position: "absolute",
                top: "3px",
                left: user.is_active ? "21px" : "3px",
                transition: "left 0.2s",
              }}
            />
          </button>
        </div>
      </div>

      {/* Permissions */}
      <div
        style={{
          display: "flex",
          gap: "16px",
          paddingTop: "12px",
          borderTop: "1px solid var(--border)",
        }}
      >
        {permissions.map(({ key, label }) => (
          <label
            key={key}
            style={{
              display: "flex",
              alignItems: "center",
              gap: "6px",
              cursor: "pointer",
              fontSize: "12px",
              color: "var(--text-secondary)",
              userSelect: "none",
            }}
          >
            <div
              onClick={() => togglePermission(user.id, key)}
              style={{
                width: "18px",
                height: "18px",
                borderRadius: "4px",
                border: "1px solid",
                borderColor: user[key] ? "var(--accent)" : "var(--border)",
                backgroundColor: user[key] ? "var(--accent)" : "transparent",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                transition: "all 0.15s",
                cursor: "pointer",
              }}
            >
              {user[key] && (
                <FaCheck size={10} style={{ color: "var(--accent-text, #fff)" }} />
              )}
            </div>
            {label}
          </label>
        ))}
      </div>
    </div>
  );
};