veza/apps/web/src/components/admin/modals/BanUserModal.tsx

import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { X, Calendar, ShieldBan } from 'lucide-react';

interface BanUserModalProps {
  username: string;
  onClose: () => void;
  onConfirm: (reason: string, details: string, duration: string) => void;
}

export const BanUserModal: React.FC<BanUserModalProps> = ({
  username,
  onClose,
  onConfirm,
}) => {
  const [reason, setReason] = useState('Terms of Service Violation');
  const [details, setDetails] = useState('');
  const [isPermanent, setIsPermanent] = useState(false);
  const [duration, setDuration] = useState('7'); // days

  return (
    <div className="fixed inset-0 z-[var(--sumi-z-modal)] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-background/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-md bg-muted rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        <div className="p-4 border-b border-destructive/30 bg-destructive/10 flex justify-between items-center">
          <h3 className="font-bold text-destructive flex items-center gap-2">
            <ShieldBan className="w-5 h-5 fill-current" /> Suspend User
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
          </button>
        </div>

        <div className="p-6 space-y-4">
          <p className="text-foreground text-sm">
            You are about to suspend{' '}
            <span className="font-bold text-foreground">{username}</span>. This will
            restrict their access to the platform.
          </p>

          <div>
            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
              Reason
            </label>
            <select
              className="w-full bg-background border border-border rounded p-2 text-foreground focus:border-destructive outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm"
              value={reason}
              onChange={(e) => setReason(e.target.value)}
            >
              <option>Terms of Service Violation</option>
              <option>Spam or Bot Activity</option>
              <option>Harassment / Hate Speech</option>
              <option>Copyright Infringement</option>
              <option>Fraudulent Activity</option>
              <option>Other</option>
            </select>
          </div>

          <div>
            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
              Details (Internal Note)
            </label>
            <textarea
              className="w-full bg-background border border-border rounded p-2 text-foreground focus:border-destructive outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm resize-none h-24"
              placeholder="Provide context for this ban..."
              value={details}
              onChange={(e) => setDetails(e.target.value)}
            />
          </div>

          <div className="flex items-center justify-between p-4 bg-card rounded shadow-[0_0_8px_rgba(26,26,30,0.05)]">
            <div className="flex items-center gap-4">
              <Calendar className="w-5 h-5 text-muted-foreground" />
              <div>
                <div className="text-sm font-bold text-foreground">Ban Duration</div>
                <div className="text-xs text-muted-foreground">
                  {isPermanent ? 'Permanent Ban' : `${duration} Days`}
                </div>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <span
                className={`text-xs ${!isPermanent ? 'text-foreground' : 'text-muted-foreground'}`}
              >
                Temp
              </span>
              <div
                onClick={() => setIsPermanent(!isPermanent)}
                className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-destructive' : 'bg-muted'}`}
              >
                <div
                  className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPermanent ? 'left-6' : 'left-1'}`}
                ></div>
              </div>
              <span
                className={`text-xs ${isPermanent ? 'text-destructive font-bold' : 'text-muted-foreground'}`}
              >
                Perm
              </span>
            </div>
          </div>

          {!isPermanent && (
            <div>
              <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
                Days
              </label>
              <input
                type="number"
                min="1"
                className="w-full bg-background border border-border rounded p-2 text-foreground focus:border-destructive outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm"
                value={duration}
                onChange={(e) => setDuration(e.target.value)}
              />
            </div>
          )}
        </div>

        <div className="p-4 border-t border-border bg-card flex justify-end gap-4">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button
            variant="primary"
            className="bg-destructive hover:bg-destructive border-destructive text-foreground"
            onClick={() =>
              onConfirm(
                reason,
                details,
                isPermanent ? 'Permanent' : `${duration} days`,
              )
            }
          >
            Suspend User
          </Button>
        </div>
      </div>
    </div>
  );
};