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-[100] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        <div className="p-4 border-b border-kodo-red/30 bg-kodo-red/10 flex justify-between items-center">
          <h3 className="font-bold text-kodo-red 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-white" />
          </button>
        </div>

        <div className="p-6 space-y-4">
          <p className="text-kodo-text-main text-sm">
            You are about to suspend{' '}
            <span className="font-bold text-white">{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-kodo-void border border-border rounded p-2 text-white focus:border-kodo-red outline-none 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-kodo-void border border-border rounded p-2 text-white focus:border-kodo-red outline-none 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-kodo-ink rounded border border-border">
            <div className="flex items-center gap-4">
              <Calendar className="w-5 h-5 text-muted-foreground" />
              <div>
                <div className="text-sm font-bold text-white">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-white' : 'text-muted-foreground'}`}
              >
                Temp
              </span>
              <div
                onClick={() => setIsPermanent(!isPermanent)}
                className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-kodo-red' : 'bg-kodo-steel'}`}
              >
                <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-kodo-red 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-kodo-void border border-border rounded p-2 text-white focus:border-kodo-red outline-none text-sm"
                value={duration}
                onChange={(e) => setDuration(e.target.value)}
              />
            </div>
          )}
        </div>

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