import { Checkbox, Button, Space, Grid } from 'antd';
import type { Cut, PublicCut } from '@/types/api';

const VARIANT_BG = {
  public: 'rgba(27, 40, 56, 0.92)',
  admin: 'rgba(26, 16, 37, 0.92)',
};

interface Props {
  cuts: (Cut | PublicCut)[];
  visibleCutIds: Set<string>;
  onToggleCut: (id: string) => void;
  variant?: 'admin' | 'public';
  style?: React.CSSProperties;
}

export default function CutOverlayControls({ cuts, visibleCutIds, onToggleCut, variant = 'admin', style }: Props) {
  const screens = Grid.useBreakpoint();
  const isMobile = !screens.md;
  const allVisible = cuts.every((c) => visibleCutIds.has(c.id));
  const noneVisible = cuts.every((c) => !visibleCutIds.has(c.id));

  return (
    <div
      style={{
        position: 'absolute',
        bottom: 'max(24px, calc(24px + env(safe-area-inset-bottom, 0px)))',
        left: 12,
        zIndex: 1000,
        background: VARIANT_BG[variant],
        borderRadius: 8,
        padding: '10px 14px',
        backdropFilter: 'blur(8px)',
        border: '1px solid rgba(255,255,255,0.12)',
        minWidth: 140,
        maxHeight: isMobile ? 120 : 280,
        overflowY: 'auto',
        ...style,
      }}
    >
      <div style={{ fontSize: 12, fontWeight: 600, color: '#fff', marginBottom: 6, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span>Cuts</span>
        <Space size={4}>
          <Button
            type="link"
            size="small"
            disabled={allVisible}
            onClick={() => cuts.forEach((c) => { if (!visibleCutIds.has(c.id)) onToggleCut(c.id); })}
            style={{ padding: 0, height: 'auto', fontSize: 10 }}
          >
            All
          </Button>
          <Button
            type="link"
            size="small"
            disabled={noneVisible}
            onClick={() => cuts.forEach((c) => { if (visibleCutIds.has(c.id)) onToggleCut(c.id); })}
            style={{ padding: 0, height: 'auto', fontSize: 10 }}
          >
            None
          </Button>
        </Space>
      </div>
      {cuts.map((cut) => (
        <div key={cut.id} style={{ marginBottom: 3 }}>
          <Checkbox
            checked={visibleCutIds.has(cut.id)}
            onChange={() => onToggleCut(cut.id)}
            style={{ fontSize: 12 }}
          >
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span
                style={{
                  display: 'inline-block',
                  width: 12,
                  height: 12,
                  borderRadius: 2,
                  backgroundColor: cut.color,
                  opacity: parseFloat(String(cut.opacity)) || 0.3,
                  border: `1px solid ${cut.color}`,
                  flexShrink: 0,
                }}
              />
              <span style={{ color: 'rgba(255,255,255,0.85)' }}>{cut.name}</span>
            </span>
          </Checkbox>
        </div>
      ))}
    </div>
  );
}
