'use client';

import { useState, useTransition } from 'react';
import { setUserActive, setUserRole } from '@/app/actions/users';
import { ROLES, type Role } from '@/lib/auth/roles';
import { INTL_LOCALE } from '@/i18n/config';
import { useLocale, useMessages } from '@/i18n/client';
import { initials } from '@/lib/initials';
import { cn } from '@/lib/cn';

export interface UserRowData {
  id: string;
  name: string;
  email: string;
  role: Role;
  isActive: boolean;
  reports: number;
  lastLoginAt: string | null;
}

export function UserRow({ user, isSelf }: { user: UserRowData; isSelf: boolean }) {
  const m = useMessages();
  const t = m.admin.users;
  const dateFmt = new Intl.DateTimeFormat(INTL_LOCALE[useLocale()], { day: 'numeric', month: 'short', year: 'numeric' });
  const [pending, start] = useTransition();
  const [error, setError] = useState<string | null>(null);

  const run = (fn: () => Promise<{ ok: boolean; error?: string }>) =>
    start(async () => {
      const res = await fn();
      setError(res.ok ? null : (res.error ?? t.saveFailed));
    });

  return (
    <li className={cn('flex flex-col gap-4 px-5 py-4 sm:flex-row sm:items-center', !user.isActive && 'opacity-60')}>
      <div className="flex min-w-0 flex-1 items-center gap-3">
        <span className="inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-canvas text-[13px] font-semibold text-ink-soft ring-1 ring-line">
          {initials(user.name)}
        </span>
        <div className="min-w-0">
          <p className="truncate text-sm font-semibold text-ink">
            {user.name}
            {isSelf && <span className="ml-2 text-xs font-normal text-subtle">{t.you}</span>}
            {!user.isActive && <span className="ml-2 text-xs font-medium text-fire">{t.inactive}</span>}
          </p>
          <p className="truncate text-[13px] text-muted">
            {user.email} · {t.reports(user.reports)}
            {user.lastLoginAt && ` · ${t.lastLogin(dateFmt.format(new Date(user.lastLoginAt)))}`}
          </p>
          {error && (
            <p role="alert" className="mt-1 text-[13px] text-fire">
              {error}
            </p>
          )}
        </div>
      </div>

      <div className="flex items-center gap-2 sm:shrink-0">
        <label className="sr-only" htmlFor={`role-${user.id}`}>
          {t.roleOf(user.name)}
        </label>
        <select
          id={`role-${user.id}`}
          value={user.role}
          disabled={isSelf || pending}
          onChange={(e) => run(() => setUserRole(user.id, e.target.value as Role))}
          className="h-9 rounded-full bg-surface px-3 text-[13px] font-medium text-ink ring-1 ring-line focus:ring-2 focus:ring-ink/70 focus:outline-none disabled:opacity-50"
        >
          {ROLES.map((r) => (
            <option key={r} value={r}>
              {m.layout.roles[r]}
            </option>
          ))}
        </select>
        <button
          type="button"
          disabled={isSelf || pending}
          onClick={() => run(() => setUserActive(user.id, !user.isActive))}
          className="h-9 rounded-full px-3 text-[13px] font-medium text-ink-soft ring-1 ring-line transition-colors hover:bg-canvas disabled:opacity-50"
        >
          {user.isActive ? t.deactivate : t.activate}
        </button>
      </div>
    </li>
  );
}