import React from 'react';
import type { Asset } from '../../../types/assets';
import Modal from '../../../components/ui/Modal';
import Button from '../../../components/ui/Button';
import { Check } from 'lucide-react';

interface DownloadRequestsModalProps {
  isOpen: boolean;
  onClose: () => void;
  assets: Asset[];
  onApprove: (assetId: string, requestId: string) => void;
  onReject: (assetId: string, requestId: string) => void;
}

export const DownloadRequestsModal: React.FC<DownloadRequestsModalProps> = ({
  isOpen,
  onClose,
  assets,
  onApprove,
  onReject
}) => {
  const pendingRequests = assets.flatMap(asset => 
    (asset.downloadRequests || [])
      .filter(req => req.status === 'PENDING')
      .map(req => ({
        ...req,
        assetTitle: asset.title,
        assetId: asset.id
      }))
  );

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title="Pending Download Requests"
      subtitle="Review and approve download access for protected secret assets."
      size="lg"
      footer={
        <Button
          onClick={onClose}
          variant="primary"
          size="sm"
        >
          Close
        </Button>
      }
    >
      <div className="space-y-3">
        {pendingRequests.length === 0 ? (
          <div className="text-center py-8">
            <Check className="w-8 h-8 text-ink-400 mx-auto mb-2" />
            <p className="text-xs font-bold text-ink-900 font-sans">All caught up!</p>
            <p className="text-[10px] text-ink-500 font-sans">There are no pending download authorization requests.</p>
          </div>
        ) : (
          pendingRequests.map(req => (
            <div key={req.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-4 bg-ink-50 border border-ink-200 rounded-xl gap-4">
              <div>
                <p className="text-xs font-bold text-ink-900 font-sans">{req.user?.email}</p>
                <p className="text-[10px] text-ink-500 mt-0.5 font-medium font-sans">
                  Requested download for: <span className="text-ink-900 font-bold">{req.assetTitle}</span>
                </p>
              </div>

              <div className="flex items-center gap-2 self-end sm:self-center">
                <Button
                  onClick={() => onReject(req.assetId, req.id)}
                  variant="danger"
                  size="xs"
                >
                  Reject
                </Button>
                <Button
                  onClick={() => onApprove(req.assetId, req.id)}
                  variant="primary"
                  size="xs"
                >
                  Approve Access
                </Button>
              </div>
            </div>
          ))
        )}
      </div>
    </Modal>
  );
};
