import { X } from 'lucide-react';
import { Badge } from '@/components/ui/Badge';
import { Button } from '@/components/ui/button';
import { cn } from '@/utils/cn';
import { ExpandedRowDetails } from '@/components/tables/ExpandedRowDetails';

/**
 * Side panel that slides in from the right showing detailed flow information
 */
export function OptionsFlowDetailPanel({ row, isOpen, onClose }) {
  if (!isOpen || !row) {
    return null;
  }

  return (
    <>
      {/* Backdrop */}
      <div 
        className="fixed inset-0 bg-black/50 z-40"
        onClick={onClose}
      />
      
      {/* Panel */}
      <div className={cn(
        "fixed top-0 right-0 h-full w-full md:w-[600px] lg:w-[700px] bg-slate-900 border-l border-slate-800 shadow-2xl z-50",
        "transform transition-transform duration-300 ease-in-out",
        isOpen ? "translate-x-0" : "translate-x-full"
      )}>
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-slate-800 bg-slate-950/50">
        <div className="flex items-center gap-3">
          <div>
            <h2 className="text-xl font-bold text-slate-100">
              {row.Symbol || row.symbol_norm || 'UNKNOWN'}
            </h2>
            <div className="flex items-center gap-2 mt-1">
              <Badge 
                variant={(row.CallPut || row.cp_norm) === 'CALL' ? 'default' : 'default'} 
                className={cn(
                  "text-xs",
                  (row.CallPut || row.cp_norm) === 'CALL' 
                    ? "bg-blue-500/20 text-blue-400 border-blue-500/50" 
                    : "bg-red-500/20 text-red-400 border-red-500/50"
                )}
              >
                {row.CallPut || row.cp_norm} ${parseFloat(row.Strike || 0).toFixed(2)}
              </Badge>
              {row.isGammaSqueezeSetup && (
                <Badge className="bg-purple-500/20 text-purple-400 border-purple-500/50 text-xs">
                  ⚡ GAMMA
                </Badge>
              )}
            </div>
          </div>
        </div>
        <Button
          variant="ghost"
          size="sm"
          onClick={onClose}
          className="text-slate-400 hover:text-slate-200"
        >
          <X className="w-5 h-5" />
        </Button>
      </div>

      {/* Scrollable Content */}
      <div className="h-[calc(100vh-64px)] overflow-y-auto">
        <ExpandedRowDetails row={row} />
      </div>
      </div>
    </>
  );
}

