'use client';

import { Label } from '@/components/ui/primitives/Label';
import { Textarea } from '@/components/ui/primitives/Textarea';
import { Button } from '@/components/ui/primitives/Button';
import { getCsrfToken } from '@/lib/csrf';
import {
  ActionDrawer,
  ActionDrawerContent,
  ActionDrawerTitle,
} from '@/components/ui/overlays/ActionDrawer';
import type { UserRow } from './UsersMgmt';
import { userDisplayLabel } from './usersMgmt.shared';

interface UsersMgmtActionDrawerProps {
  t: (key: string) => string;
  tD: (key: string) => string;
  drawerOpen: boolean;
  setDrawerOpen: (open: boolean) => void;
  drawerUser: UserRow | null;
  freezeReason: string;
  setFreezeReason: (value: string) => void;
  actionError: string | null;
  actionSuccess: string | null;
  actionLoading: string | null;
  onFreeze: () => void | Promise<void>;
  onUnfreeze: () => void | Promise<void>;
  onOpenAdminConfirm: () => void;
}

export function UsersMgmtActionDrawer({
  t,
  tD,
  drawerOpen,
  setDrawerOpen,
  drawerUser,
  freezeReason,
  setFreezeReason,
  actionError,
  actionSuccess,
  actionLoading,
  onFreeze,
  onUnfreeze,
  onOpenAdminConfirm,
}: UsersMgmtActionDrawerProps) {
  return (
    <ActionDrawer open={drawerOpen} onOpenChange={setDrawerOpen}>
      <ActionDrawerContent
        title={tD('user_title')}
        description={drawerUser ? userDisplayLabel(drawerUser) : tD('user_title')}
        csrfToken={getCsrfToken()}
      >
        <ActionDrawerTitle className="text-text-primary text-lg font-semibold">
          {tD('user_title')}
          {drawerUser && (
            <span className="text-text-secondary ms-2 text-sm font-normal">
              {userDisplayLabel(drawerUser)}
            </span>
          )}
        </ActionDrawerTitle>

        {actionError && (
          <p role="alert" className="bg-danger-50 text-danger-700 rounded-md p-2 text-sm">
            {actionError}
          </p>
        )}
        {actionSuccess && (
          <p role="status" className="bg-success-50 text-success-700 rounded-md p-2 text-sm">
            {actionSuccess}
          </p>
        )}

        {drawerUser && drawerUser.accountState !== 'FROZEN' && (
          <section className="flex flex-col gap-3">
            <h3 className="text-text-primary text-sm font-semibold">{tD('freeze')}</h3>
            <div className="flex flex-col gap-1">
              <Label htmlFor="user-freeze-reason">{tD('freeze_reason_label')}</Label>
              <Textarea
                id="user-freeze-reason"
                rows={3}
                placeholder={tD('freeze_reason_placeholder')}
                value={freezeReason}
                onChange={(e) => setFreezeReason(e.target.value)}
              />
            </div>
            <Button
              variant="danger"
              size="sm"
              loading={actionLoading === 'freeze'}
              disabled={!freezeReason.trim()}
              onClick={() => void onFreeze()}
            >
              {tD('freeze')}
            </Button>
          </section>
        )}

        {drawerUser && drawerUser.accountState === 'FROZEN' && (
          <section className="flex flex-col gap-3">
            <p className="text-text-secondary text-sm">{tD('confirm_user_unfreeze')}</p>
            <Button
              variant="primary"
              size="sm"
              loading={actionLoading === 'unfreeze'}
              onClick={() => void onUnfreeze()}
            >
              {tD('unfreeze')}
            </Button>
          </section>
        )}

        {drawerUser && (
          <section className="flex flex-col gap-2 border-t pt-4">
            <h3 className="text-text-primary text-sm font-semibold">{t('filter_role')}</h3>
            <Button
              variant={drawerUser.isAdmin ? 'danger' : 'secondary'}
              size="sm"
              loading={actionLoading === 'admin-flag'}
              onClick={onOpenAdminConfirm}
            >
              {drawerUser.isAdmin ? tD('revoke_admin') : tD('grant_admin')}
            </Button>
          </section>
        )}
      </ActionDrawerContent>
    </ActionDrawer>
  );
}