import React, { useState } from 'react';
import { ShieldAlert } from 'lucide-react';
import { Modal } from './ui/Modal';

interface OverrideModalProps {
  isOpen: boolean;
  title?: string;
  stepName: string;
  onConfirm: (reason: string) => void;
  onCancel: () => void;
}

export const OverrideModal: React.FC<OverrideModalProps> = ({
  isOpen,
  title = 'Administrator Override Required',
  stepName,
  onConfirm,
  onCancel,
}) => {
  const [reason, setReason] = useState('');
  const [error, setError] = useState('');

  if (!isOpen) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!reason.trim()) {
      setError('A justification reason is required for administrative overrides');
      return;
    }
    setError('');
    onConfirm(reason);
    setReason('');
  };

  return (
    <Modal
      open={isOpen}
      onClose={onCancel}
      title={title}
      subtitle={`Overriding clearance block: ${stepName}`}
      icon={ShieldAlert}
      watermarkIcon={ShieldAlert}
      maxWidth="max-w-md"
      zIndex={250}
    >
      <form onSubmit={handleSubmit} className="space-y-6">
        <p className="text-sm text-text-muted leading-relaxed">
          You are initiating an administrative override for the clearance step:{' '}
          <strong className="text-primary font-bold">{stepName}</strong>. This action bypasses system blocks and will be cryptographically logged to the audit log.
        </p>

        <div>
          <label htmlFor="override-reason" className="block text-[0.65rem] font-black uppercase tracking-widest text-text-muted mb-2">
            Justification Reason <span className="text-rose-500">*</span>
          </label>
          <textarea
            id="override-reason"
            rows={3}
            value={reason}
            onChange={(e) => {
              setReason(e.target.value);
              if (e.target.value.trim()) setError('');
            }}
            placeholder="Provide a detailed explanation of why this block is being overridden..."
            className="w-full px-4 py-3 rounded-2xl border border-border bg-muted/30 text-text placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/45 focus:border-primary text-sm font-semibold transition-all resize-none"
          />
          {error && <p className="mt-1.5 text-xs text-rose-500 font-bold">{error}</p>}
        </div>

        <div className="flex gap-3 pt-2">
          <button
            type="button"
            onClick={onCancel}
            className="flex-1 py-3.5 bg-muted hover:bg-muted/80 border border-border text-text rounded-xl font-bold text-xs uppercase tracking-widest transition-all"
          >
            Cancel
          </button>
          <button
            type="submit"
            className="flex-1 py-3.5 bg-rose-600 hover:bg-rose-700 text-white rounded-xl font-black uppercase text-[0.65rem] tracking-widest transition-all shadow-md active:scale-95"
          >
            Apply Override
          </button>
        </div>
      </form>
    </Modal>
  );
};

export default OverrideModal;
