"use client";

import Badge from "@/components/ui/Badge";
import { useDevMode } from "@/components/providers/DevModeProvider";

interface DashboardAccountCardProps {
  title: string;
  name: string;
  username: string;
  email: string;
  userId: string;
  roleName: string;
  permissions: string[];
  permissionsGrantedLabel: string;
  activePermissionsLabel: string;
  moreLabel: string;
}

export default function DashboardAccountCard({
  title,
  name,
  username,
  email,
  userId,
  roleName,
  permissions,
  permissionsGrantedLabel,
  activePermissionsLabel,
  moreLabel,
}: DashboardAccountCardProps) {
  const devMode = useDevMode();
  const initial = name?.[0]?.toUpperCase() ?? "?";

  return (
    <div className="rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-4 sm:p-6">
      <h2 className="mb-4 text-base font-semibold sm:mb-5">{title}</h2>
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-5">
        <div className="w-14 h-14 rounded-xl bg-[var(--accent-muted)] border border-[var(--accent)]/20 flex items-center justify-center text-xl font-bold text-[var(--accent)] shrink-0">
          {initial}
        </div>
        <div className="flex-1 min-w-0">
          <p className="font-semibold text-lg">{name}</p>
          {username && (
            <p className="text-sm text-[var(--text-muted)]">@{username}</p>
          )}
          <p className="text-sm text-[var(--text-muted)]">{email}</p>
          {devMode && (
            <p className="mt-1 font-mono text-[11px] text-emerald-400 select-all break-all">
              {userId}
            </p>
          )}
        </div>
        <div className="flex flex-col items-start sm:items-end gap-2">
          <Badge variant="role" role={roleName}>
            {roleName.replace(/_/g, " ")}
          </Badge>
          <p className="text-xs text-[var(--text-faint)]">{permissionsGrantedLabel}</p>
        </div>
      </div>

      {permissions.length > 0 && (
        <div className="mt-5 pt-5 border-t border-[var(--border)]">
          <p className="text-xs font-medium text-[var(--text-faint)] uppercase tracking-wider mb-3">
            {activePermissionsLabel}
          </p>
          <div className="flex flex-wrap gap-2">
            {permissions.slice(0, 8).map((perm) => (
              <Badge key={perm}>{perm}</Badge>
            ))}
            {permissions.length > 8 && <Badge>{moreLabel}</Badge>}
          </div>
        </div>
      )}
    </div>
  );
}