import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { ListTodo, RefreshCw, CheckSquare, Square, Loader, AlertCircle, X, Plus, CheckCircle } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';
import ConsolidationModal from '../ConsolidationModal';
import { generateConsolidatedSummary, generateConsolidatedDescription, extractFirstCve, extractCommonVendor } from '../../utils/jiraConsolidation';

const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';

// ---------------------------------------------------------------------------
// Styles — matches dark theme tactical intelligence aesthetic
// ---------------------------------------------------------------------------
const STYLES = {
  page: {
    minHeight: '60vh',
  },
  card: {
    background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98))',
    border: '1px solid rgba(14, 165, 233, 0.15)',
    borderRadius: '12px',
    padding: '1.5rem',
    marginBottom: '1rem',
  },
  header: {
    fontFamily: 'monospace',
    fontSize: '0.7rem',
    fontWeight: 700,
    color: '#0EA5E9',
    textTransform: 'uppercase',
    letterSpacing: '0.15em',
    marginBottom: '1rem',
  },
  toolbar: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: '1rem',
    flexWrap: 'wrap',
    gap: '0.5rem',
  },
  toolbarLeft: {
    display: 'flex',
    alignItems: 'center',
    gap: '0.75rem',
  },
  toolbarRight: {
    display: 'flex',
    alignItems: 'center',
    gap: '0.5rem',
  },
  btn: {
    padding: '0.5rem 1rem',
    borderRadius: '8px',
    border: '1px solid rgba(14, 165, 233, 0.3)',
    background: 'rgba(14, 165, 233, 0.1)',
    color: '#7DD3FC',
    cursor: 'pointer',
    fontSize: '0.8rem',
    fontWeight: 600,
    display: 'inline-flex',
    alignItems: 'center',
    gap: '0.4rem',
    transition: 'all 0.2s',
  },
  btnActive: {
    padding: '0.5rem 1rem',
    borderRadius: '8px',
    border: '1px solid rgba(14, 165, 233, 0.6)',
    background: 'rgba(14, 165, 233, 0.25)',
    color: '#0EA5E9',
    cursor: 'pointer',
    fontSize: '0.8rem',
    fontWeight: 600,
    display: 'inline-flex',
    alignItems: 'center',
    gap: '0.4rem',
    transition: 'all 0.2s',
    boxShadow: '0 0 12px rgba(14, 165, 233, 0.2)',
  },
  selectionCount: {
    fontFamily: 'monospace',
    fontSize: '0.75rem',
    fontWeight: 600,
    color: '#F59E0B',
    background: 'rgba(245, 158, 11, 0.1)',
    border: '1px solid rgba(245, 158, 11, 0.3)',
    borderRadius: '999px',
    padding: '0.25rem 0.75rem',
    display: 'inline-flex',
    alignItems: 'center',
    gap: '0.35rem',
  },
  tableHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: '0.75rem',
    padding: '0.5rem 0.75rem',
    borderBottom: '1px solid rgba(14, 165, 233, 0.15)',
    marginBottom: '0.5rem',
  },
  tableHeaderLabel: {
    fontFamily: 'monospace',
    fontSize: '0.65rem',
    fontWeight: 700,
    color: '#64748B',
    textTransform: 'uppercase',
    letterSpacing: '0.1em',
  },
  queueItem: {
    display: 'flex',
    alignItems: 'flex-start',
    gap: '0.625rem',
    padding: '0.625rem 0.75rem',
    marginBottom: '0.25rem',
    borderRadius: '0.375rem',
    background: 'rgba(14, 165, 233, 0.04)',
    border: '1px solid rgba(14, 165, 233, 0.1)',
    transition: 'background 0.15s, border-color 0.15s',
  },
  queueItemSelected: {
    display: 'flex',
    alignItems: 'flex-start',
    gap: '0.625rem',
    padding: '0.625rem 0.75rem',
    marginBottom: '0.25rem',
    borderRadius: '0.375rem',
    background: 'rgba(14, 165, 233, 0.08)',
    border: '1px solid rgba(14, 165, 233, 0.3)',
    transition: 'background 0.15s, border-color 0.15s',
  },
  checkbox: {
    accentColor: '#0EA5E9',
    width: '16px',
    height: '16px',
    flexShrink: 0,
    marginTop: '2px',
    cursor: 'pointer',
  },
  selectAllCheckbox: {
    accentColor: '#0EA5E9',
    width: '14px',
    height: '14px',
    cursor: 'pointer',
  },
  floatingBar: {
    position: 'fixed',
    bottom: '1.5rem',
    left: '50%',
    transform: 'translateX(-50%)',
    display: 'flex',
    alignItems: 'center',
    gap: '0.75rem',
    padding: '0.75rem 1.25rem',
    background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99))',
    border: '1px solid rgba(14, 165, 233, 0.3)',
    borderRadius: '12px',
    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5), 0 0 16px rgba(14, 165, 233, 0.1)',
    zIndex: 50,
  },
  floatingBarBadge: {
    fontFamily: 'monospace',
    fontSize: '0.75rem',
    fontWeight: 600,
    color: '#F59E0B',
    background: 'rgba(245, 158, 11, 0.1)',
    border: '1px solid rgba(245, 158, 11, 0.3)',
    borderRadius: '999px',
    padding: '0.25rem 0.75rem',
  },
  btnSuccess: {
    padding: '0.5rem 1rem',
    borderRadius: '8px',
    border: '1px solid rgba(16, 185, 129, 0.4)',
    background: 'rgba(16, 185, 129, 0.15)',
    color: '#6EE7B7',
    cursor: 'pointer',
    fontSize: '0.8rem',
    fontWeight: 600,
    display: 'inline-flex',
    alignItems: 'center',
    gap: '0.4rem',
    transition: 'all 0.2s',
  },
  btnDisabled: {
    opacity: 0.4,
    cursor: 'not-allowed',
  },
  btnCancel: {
    padding: '0.5rem 1rem',
    borderRadius: '8px',
    border: '1px solid rgba(148, 163, 184, 0.3)',
    background: 'rgba(148, 163, 184, 0.08)',
    color: '#94A3B8',
    cursor: 'pointer',
    fontSize: '0.8rem',
    fontWeight: 600,
    display: 'inline-flex',
    alignItems: 'center',
    gap: '0.4rem',
    transition: 'all 0.2s',
  },
  modal: {
    position: 'fixed',
    inset: 0,
    zIndex: 100,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalBackdrop: {
    position: 'fixed',
    inset: 0,
    background: 'rgba(0,0,0,0.7)',
    backdropFilter: 'blur(4px)',
  },
  modalContent: {
    position: 'relative',
    background: 'linear-gradient(135deg, #1E293B, #0F172A)',
    border: '1px solid rgba(14, 165, 233, 0.25)',
    borderRadius: '16px',
    padding: '2rem',
    width: '90%',
    maxWidth: '520px',
    maxHeight: '85vh',
    overflowY: 'auto',
    zIndex: 101,
  },
  input: {
    background: 'rgba(15, 23, 42, 0.8)',
    border: '1px solid rgba(14, 165, 233, 0.2)',
    borderRadius: '8px',
    padding: '0.5rem 0.75rem',
    color: '#F8FAFC',
    fontSize: '0.85rem',
    width: '100%',
    outline: 'none',
  },
};

// ---------------------------------------------------------------------------
// IvantiTodoQueuePage — Full-page Ivanti queue with multi-select support
// ---------------------------------------------------------------------------
export default function IvantiTodoQueuePage() {
  const { canWrite } = useAuth();

  // Queue data state
  const [queueItems, setQueueItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Ticket link badges state (Requirement 6.3, 6.4, 6.5)
  const [ticketLinks, setTicketLinks] = useState({});

  // Selection mode state (Requirement 1.1)
  const [selectionMode, setSelectionMode] = useState(false);
  const [selectedIds, setSelectedIds] = useState(new Set());

  // Consolidation modal state (Requirement 2.3)
  const [showConsolidationModal, setShowConsolidationModal] = useState(false);

  // Single-item Jira creation modal state (Requirement 2.4)
  const [showSingleJiraModal, setShowSingleJiraModal] = useState(false);
  const [singleJiraItem, setSingleJiraItem] = useState(null);
  const [singleJiraForm, setSingleJiraForm] = useState({ cve_id: '', vendor: '', summary: '', description: '', source_context: 'ivanti_queue' });
  const [singleJiraError, setSingleJiraError] = useState(null);
  const [singleJiraSaving, setSingleJiraSaving] = useState(false);
  const [singleJiraSummaryError, setSingleJiraSummaryError] = useState(null);

  // ---------------------------------------------------------------------------
  // Data fetching
  // ---------------------------------------------------------------------------
  const fetchQueue = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(`${API_BASE}/ivanti/todo-queue`, { credentials: 'include' });
      const data = await res.json();
      if (res.ok) {
        // Parse cves from cves_json if not already parsed
        const parsed = data.map((item) => {
          if (item.cves) return item;
          let cves = [];
          if (item.cves_json) {
            try { cves = JSON.parse(item.cves_json); } catch { cves = []; }
          }
          return { ...item, cves };
        });
        setQueueItems(parsed);
      } else {
        setError(data.error || 'Failed to fetch queue items.');
      }
    } catch (e) {
      setError('Network error — could not fetch queue items.');
      console.error('Error fetching queue:', e);
    } finally {
      setLoading(false);
    }
  }, []);

  // ---------------------------------------------------------------------------
  // Fetch ticket link associations (Requirements 6.3, 6.4, 6.5)
  // ---------------------------------------------------------------------------
  const fetchTicketLinks = useCallback(async () => {
    try {
      const res = await fetch(`${API_BASE}/ivanti/todo-queue/ticket-links`, { credentials: 'include' });
      if (res.ok) {
        const data = await res.json();
        setTicketLinks(data.links || {});
      }
    } catch (e) {
      console.error('Error fetching ticket links:', e);
    }
  }, []);

  useEffect(() => {
    fetchQueue();
    fetchTicketLinks();
  }, [fetchQueue, fetchTicketLinks]);

  // ---------------------------------------------------------------------------
  // Visible items — only pending items are selectable
  // ---------------------------------------------------------------------------
  const visibleItems = useMemo(() => {
    return queueItems.filter((item) => item.status === 'pending');
  }, [queueItems]);

  // ---------------------------------------------------------------------------
  // Selection mode toggle (Requirement 1.1, 1.5)
  // When deactivated, clear all selections
  // ---------------------------------------------------------------------------
  const toggleSelectionMode = useCallback(() => {
    setSelectionMode((prev) => {
      if (prev) {
        // Deactivating — clear selections (Requirement 1.5)
        setSelectedIds(new Set());
      }
      return !prev;
    });
  }, []);

  // ---------------------------------------------------------------------------
  // Individual item selection toggle (Requirement 1.2)
  // ---------------------------------------------------------------------------
  const toggleItemSelection = useCallback((id) => {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  }, []);

  // ---------------------------------------------------------------------------
  // Select All toggle (Requirement 1.4)
  // Toggles all visible (filtered) queue item IDs into/out of selectedIds
  // ---------------------------------------------------------------------------
  const allVisibleSelected = useMemo(() => {
    if (visibleItems.length === 0) return false;
    return visibleItems.every((item) => selectedIds.has(item.id));
  }, [visibleItems, selectedIds]);

  const someVisibleSelected = useMemo(() => {
    if (visibleItems.length === 0) return false;
    return visibleItems.some((item) => selectedIds.has(item.id)) && !allVisibleSelected;
  }, [visibleItems, selectedIds, allVisibleSelected]);

  const toggleSelectAll = useCallback(() => {
    if (allVisibleSelected) {
      // Deselect all visible
      setSelectedIds((prev) => {
        const next = new Set(prev);
        visibleItems.forEach((item) => next.delete(item.id));
        return next;
      });
    } else {
      // Select all visible
      setSelectedIds((prev) => {
        const next = new Set(prev);
        visibleItems.forEach((item) => next.add(item.id));
        return next;
      });
    }
  }, [allVisibleSelected, visibleItems]);

  // ---------------------------------------------------------------------------
  // Preserve selections on scroll/re-render (Requirement 1.6)
  // Clean up selectedIds that no longer exist in the queue
  // ---------------------------------------------------------------------------
  useEffect(() => {
    setSelectedIds((prev) => {
      if (prev.size === 0) return prev;
      const validIds = new Set(queueItems.map((i) => i.id));
      const next = new Set([...prev].filter((id) => validIds.has(id)));
      return next.size === prev.size ? prev : next;
    });
  }, [queueItems]);

  // ---------------------------------------------------------------------------
  // Selected queue items (full objects) for modal use
  // ---------------------------------------------------------------------------
  const selectedQueueItems = useMemo(() => {
    return queueItems.filter(item => selectedIds.has(item.id));
  }, [queueItems, selectedIds]);

  // ---------------------------------------------------------------------------
  // Floating action bar — "Create Jira Ticket" handler (Requirements 2.3, 2.4)
  // ---------------------------------------------------------------------------
  const handleCreateJiraTicket = useCallback(() => {
    if (selectedIds.size === 0) return;

    if (selectedIds.size === 1) {
      // Single item — open single-item Jira creation modal (Requirement 2.4)
      const item = queueItems.find(i => selectedIds.has(i.id));
      if (!item) return;
      setSingleJiraItem(item);
      const items = [item];
      setSingleJiraForm({
        cve_id: extractFirstCve(items),
        vendor: extractCommonVendor(items),
        summary: generateConsolidatedSummary(items),
        description: generateConsolidatedDescription(items),
        source_context: 'ivanti_queue',
      });
      setSingleJiraError(null);
      setSingleJiraSummaryError(null);
      setShowSingleJiraModal(true);
    } else {
      // Multiple items — open Consolidation Modal (Requirement 2.3)
      setShowConsolidationModal(true);
    }
  }, [selectedIds, queueItems]);

  // ---------------------------------------------------------------------------
  // Consolidation modal success handler
  // ---------------------------------------------------------------------------
  const handleConsolidationSuccess = useCallback(() => {
    setShowConsolidationModal(false);
    setSelectedIds(new Set());
    setSelectionMode(false);
    fetchQueue();
    fetchTicketLinks();
  }, [fetchQueue, fetchTicketLinks]);

  // ---------------------------------------------------------------------------
  // Single-item Jira creation — submit handler
  // ---------------------------------------------------------------------------
  const submitSingleJira = useCallback(async () => {
    setSingleJiraSummaryError(null);
    const trimmedSummary = (singleJiraForm.summary || '').trim();
    if (!trimmedSummary) {
      setSingleJiraSummaryError('Summary is required.');
      return;
    }
    if (trimmedSummary.length > 255) {
      setSingleJiraSummaryError('Summary must be 255 characters or fewer.');
      return;
    }

    setSingleJiraError(null);
    setSingleJiraSaving(true);
    try {
      const res = await fetch(`${API_BASE}/jira-tickets/create-in-jira`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify(singleJiraForm),
      });
      const data = await res.json();
      if (!res.ok && res.status !== 207) {
        throw new Error(data.error || `HTTP ${res.status}`);
      }

      // If we have a ticket ID and a queue item, link them via junction table
      if (data.id && singleJiraItem) {
        try {
          await fetch(`${API_BASE}/jira-tickets/${data.id}/queue-items`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'include',
            body: JSON.stringify({ queue_item_ids: [singleJiraItem.id] }),
          });
        } catch (_) { /* junction link is best-effort */ }
      }

      setShowSingleJiraModal(false);
      setSingleJiraItem(null);
      setSelectedIds(new Set());
      setSelectionMode(false);
      fetchQueue();
      fetchTicketLinks();
    } catch (err) {
      setSingleJiraError(err.message);
    } finally {
      setSingleJiraSaving(false);
    }
  }, [singleJiraForm, singleJiraItem, fetchQueue, fetchTicketLinks]);

  // ---------------------------------------------------------------------------
  // Cancel selection mode from floating bar
  // ---------------------------------------------------------------------------
  const cancelSelection = useCallback(() => {
    setSelectedIds(new Set());
    setSelectionMode(false);
  }, []);

  // ---------------------------------------------------------------------------
  // Workflow type color helper
  // ---------------------------------------------------------------------------
  const getWorkflowColor = (workflowType) => {
    switch (workflowType) {
      case 'FP':      return { col: '#F59E0B', rgb: '245,158,11' };
      case 'Archer':  return { col: '#0EA5E9', rgb: '14,165,233' };
      case 'CARD':    return { col: '#10B981', rgb: '16,185,129' };
      case 'GRANITE': return { col: '#A1887F', rgb: '161,136,127' };
      case 'DECOM':   return { col: '#EF4444', rgb: '239,68,68' };
      default:        return { col: '#94A3B8', rgb: '148,163,184' };
    }
  };

  // ---------------------------------------------------------------------------
  // Render
  // ---------------------------------------------------------------------------
  return (
    <div style={STYLES.page}>
      <div style={STYLES.card}>
        {/* Page header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem', marginBottom: '1.25rem' }}>
          <ListTodo style={{ width: '20px', height: '20px', color: '#0EA5E9' }} />
          <span style={STYLES.header}>Ivanti Todo Queue</span>
        </div>

        {/* Toolbar */}
        <div style={STYLES.toolbar}>
          <div style={STYLES.toolbarLeft}>
            {/* Select toggle button (Requirement 1.1) */}
            {canWrite() && (
              <button
                onClick={toggleSelectionMode}
                style={selectionMode ? STYLES.btnActive : STYLES.btn}
                title={selectionMode ? 'Exit selection mode' : 'Enter selection mode'}
              >
                {selectionMode
                  ? <><CheckSquare style={{ width: '14px', height: '14px' }} /> Selecting</>
                  : <><Square style={{ width: '14px', height: '14px' }} /> Select</>
                }
              </button>
            )}

            {/* Selection count indicator (Requirement 1.3) */}
            {selectionMode && selectedIds.size > 0 && (
              <span style={STYLES.selectionCount}>
                {selectedIds.size} selected
              </span>
            )}
          </div>

          <div style={STYLES.toolbarRight}>
            {/* Refresh button */}
            <button
              onClick={fetchQueue}
              style={STYLES.btn}
              disabled={loading}
              title="Refresh queue"
            >
              <RefreshCw style={{ width: '14px', height: '14px', animation: loading ? 'spin 1s linear infinite' : 'none' }} />
              Refresh
            </button>
          </div>
        </div>

        {/* Error state */}
        {error && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: '0.5rem',
            padding: '0.75rem 1rem',
            background: 'rgba(239, 68, 68, 0.08)',
            border: '1px solid rgba(239, 68, 68, 0.2)',
            borderRadius: '0.5rem',
            marginBottom: '1rem',
          }}>
            <AlertCircle style={{ width: '16px', height: '16px', color: '#EF4444', flexShrink: 0 }} />
            <span style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#FCA5A5' }}>{error}</span>
          </div>
        )}

        {/* Loading state */}
        {loading && queueItems.length === 0 && (
          <div style={{ textAlign: 'center', padding: '3rem 0' }}>
            <Loader style={{ width: '24px', height: '24px', color: '#0EA5E9', animation: 'spin 1s linear infinite', margin: '0 auto' }} />
            <div style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#475569', marginTop: '0.75rem' }}>
              Loading queue items...
            </div>
          </div>
        )}

        {/* Empty state */}
        {!loading && queueItems.length === 0 && !error && (
          <div style={{ textAlign: 'center', padding: '3rem 0' }}>
            <ListTodo style={{ width: '32px', height: '32px', color: '#1E293B', margin: '0 auto' }} />
            <div style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#334155', marginTop: '0.75rem' }}>
              No items in queue.
            </div>
          </div>
        )}

        {/* Queue items table */}
        {!loading && visibleItems.length > 0 && (
          <>
            {/* Table header with Select All (Requirement 1.4) */}
            <div style={STYLES.tableHeader}>
              {selectionMode && (
                <input
                  type="checkbox"
                  checked={allVisibleSelected}
                  ref={(el) => { if (el) el.indeterminate = someVisibleSelected; }}
                  onChange={toggleSelectAll}
                  style={STYLES.selectAllCheckbox}
                  title={allVisibleSelected ? 'Deselect all' : 'Select all'}
                  aria-label="Select all queue items"
                />
              )}
              <span style={{ ...STYLES.tableHeaderLabel, flex: 1 }}>Finding</span>
              <span style={{ ...STYLES.tableHeaderLabel, width: '80px', textAlign: 'center' }}>Type</span>
              <span style={{ ...STYLES.tableHeaderLabel, width: '120px' }}>Vendor</span>
              <span style={{ ...STYLES.tableHeaderLabel, width: '120px' }}>Host</span>
            </div>

            {/* Queue item rows */}
            {visibleItems.map((item) => {
              const isSelected = selectedIds.has(item.id);
              const wfColor = getWorkflowColor(item.workflow_type);
              const cves = item.cves || [];
              const cveDisplay = cves.length > 0
                ? cves.slice(0, 2).join(', ') + (cves.length > 2 ? ` +${cves.length - 2}` : '')
                : '';

              return (
                <div
                  key={item.id}
                  style={isSelected ? STYLES.queueItemSelected : STYLES.queueItem}
                  onClick={selectionMode ? () => toggleItemSelection(item.id) : undefined}
                  role={selectionMode ? 'button' : undefined}
                  tabIndex={selectionMode ? 0 : undefined}
                  onKeyDown={selectionMode ? (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggleItemSelection(item.id); } } : undefined}
                >
                  {/* Selection checkbox (Requirement 1.2) */}
                  {selectionMode && (
                    <input
                      type="checkbox"
                      checked={isSelected}
                      onChange={(e) => { e.stopPropagation(); toggleItemSelection(item.id); }}
                      onClick={(e) => e.stopPropagation()}
                      style={STYLES.checkbox}
                      aria-label={`Select ${item.finding_title || item.finding_id}`}
                    />
                  )}

                  {/* Finding info */}
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{
                      fontFamily: 'monospace',
                      fontSize: '0.75rem',
                      fontWeight: 600,
                      color: '#CBD5E1',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                    }} title={item.finding_title || item.finding_id}>
                      {item.finding_title || item.finding_id}
                    </div>
                    {cveDisplay && (
                      <div style={{
                        fontFamily: 'monospace',
                        fontSize: '0.65rem',
                        color: '#64748B',
                        marginTop: '2px',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }} title={cves.join(', ')}>
                        {cveDisplay}
                      </div>
                    )}
                  </div>

                  {/* Ticket link badge (Requirements 6.3, 6.4) */}
                  {ticketLinks[item.id] && (
                    <a
                      href={ticketLinks[item.id].jira_url}
                      target="_blank"
                      rel="noopener noreferrer"
                      onClick={(e) => e.stopPropagation()}
                      style={{
                        fontFamily: 'monospace',
                        fontSize: '0.6rem',
                        fontWeight: 700,
                        color: '#6EE7B7',
                        background: 'rgba(16, 185, 129, 0.1)',
                        border: '1px solid rgba(16, 185, 129, 0.3)',
                        borderRadius: '999px',
                        padding: '0.15rem 0.5rem',
                        textDecoration: 'none',
                        whiteSpace: 'nowrap',
                        flexShrink: 0,
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: '0.25rem',
                        transition: 'all 0.2s',
                      }}
                      title={`Open ${ticketLinks[item.id].ticket_key} in Jira`}
                    >
                      {ticketLinks[item.id].ticket_key} ↗
                    </a>
                  )}

                  {/* Workflow type badge */}
                  <div style={{
                    width: '80px',
                    textAlign: 'center',
                    flexShrink: 0,
                  }}>
                    <span style={{
                      fontFamily: 'monospace',
                      fontSize: '0.6rem',
                      fontWeight: 700,
                      color: wfColor.col,
                      background: `rgba(${wfColor.rgb}, 0.1)`,
                      border: `1px solid rgba(${wfColor.rgb}, 0.3)`,
                      borderRadius: '4px',
                      padding: '0.15rem 0.4rem',
                      textTransform: 'uppercase',
                    }}>
                      {item.workflow_type}
                    </span>
                  </div>

                  {/* Vendor */}
                  <div style={{
                    width: '120px',
                    flexShrink: 0,
                    fontFamily: 'monospace',
                    fontSize: '0.68rem',
                    color: '#94A3B8',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                  }} title={item.vendor}>
                    {item.vendor || '—'}
                  </div>

                  {/* Hostname / IP */}
                  <div style={{
                    width: '120px',
                    flexShrink: 0,
                    minWidth: 0,
                  }}>
                    {item.hostname && (
                      <div style={{
                        fontFamily: 'monospace',
                        fontSize: '0.65rem',
                        color: '#94A3B8',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }} title={item.hostname}>
                        {item.hostname}
                      </div>
                    )}
                    {item.ip_address && (
                      <div style={{
                        fontFamily: 'monospace',
                        fontSize: '0.62rem',
                        color: '#10B981',
                        marginTop: item.hostname ? '1px' : 0,
                      }}>
                        {item.ip_address}
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </>
        )}

        {/* Completed items count */}
        {!loading && queueItems.filter(i => i.status === 'complete').length > 0 && (
          <div style={{
            marginTop: '1rem',
            padding: '0.5rem 0.75rem',
            borderTop: '1px solid rgba(255, 255, 255, 0.05)',
            fontFamily: 'monospace',
            fontSize: '0.68rem',
            color: '#334155',
          }}>
            {queueItems.filter(i => i.status === 'complete').length} completed item(s) hidden
          </div>
        )}
      </div>

      {/* Floating Action Bar (Requirements 2.1, 2.2) */}
      {selectionMode && selectedIds.size > 0 && (
        <div style={STYLES.floatingBar}>
          <span style={STYLES.floatingBarBadge}>
            {selectedIds.size} selected
          </span>
          <button
            onClick={handleCreateJiraTicket}
            disabled={selectedIds.size === 0}
            style={selectedIds.size === 0 ? { ...STYLES.btnSuccess, ...STYLES.btnDisabled } : STYLES.btnSuccess}
            title={selectedIds.size === 1 ? 'Create Jira ticket for selected item' : `Create consolidated Jira ticket for ${selectedIds.size} items`}
          >
            <Plus style={{ width: '14px', height: '14px' }} />
            Create Jira Ticket
          </button>
          <button
            onClick={cancelSelection}
            style={STYLES.btnCancel}
            title="Cancel selection"
          >
            <X style={{ width: '14px', height: '14px' }} />
            Cancel
          </button>
        </div>
      )}

      {/* Single-item Jira Creation Modal (Requirement 2.4) */}
      {showSingleJiraModal && (
        <div style={STYLES.modal}>
          <div style={STYLES.modalBackdrop} onClick={() => setShowSingleJiraModal(false)} />
          <div style={STYLES.modalContent}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
              <h3 style={{ margin: 0, color: '#F8FAFC', fontSize: '1rem' }}>Create Jira Ticket</h3>
              <button onClick={() => setShowSingleJiraModal(false)} style={{ background: 'none', border: 'none', color: '#94A3B8', cursor: 'pointer' }}><X style={{ width: '18px', height: '18px' }} /></button>
            </div>
            <p style={{ fontSize: '0.8rem', color: '#94A3B8', marginTop: 0, marginBottom: '1rem' }}>
              Create a Jira issue for: <span style={{ color: '#7DD3FC' }}>{singleJiraItem?.finding_title || singleJiraItem?.finding_id}</span>
            </p>
            {singleJiraError && <div style={{ color: '#FCA5A5', fontSize: '0.85rem', marginBottom: '0.75rem' }}>{singleJiraError}</div>}
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
              <div>
                <label style={{ fontSize: '0.75rem', color: '#94A3B8', display: 'block', marginBottom: '0.25rem' }}>CVE ID (optional)</label>
                <input style={STYLES.input} placeholder="e.g. CVE-2024-12345" value={singleJiraForm.cve_id} onChange={e => setSingleJiraForm(f => ({ ...f, cve_id: e.target.value }))} />
              </div>
              <div>
                <label style={{ fontSize: '0.75rem', color: '#94A3B8', display: 'block', marginBottom: '0.25rem' }}>Vendor (optional)</label>
                <input style={STYLES.input} placeholder="e.g. Microsoft" value={singleJiraForm.vendor} onChange={e => setSingleJiraForm(f => ({ ...f, vendor: e.target.value }))} />
              </div>
              <div>
                <label style={{ fontSize: '0.75rem', color: '#94A3B8', display: 'block', marginBottom: '0.25rem' }}>Summary <span style={{ color: '#F59E0B' }}>*</span></label>
                <input
                  style={{ ...STYLES.input, ...(singleJiraSummaryError ? { borderColor: 'rgba(239, 68, 68, 0.6)' } : {}) }}
                  placeholder="Issue summary (max 255 chars)"
                  value={singleJiraForm.summary}
                  onChange={e => { setSingleJiraForm(f => ({ ...f, summary: e.target.value })); if (singleJiraSummaryError) setSingleJiraSummaryError(null); }}
                  maxLength={255}
                />
                {singleJiraSummaryError && <div style={{ color: '#FCA5A5', fontSize: '0.75rem', marginTop: '0.25rem' }}>{singleJiraSummaryError}</div>}
              </div>
              <div>
                <label style={{ fontSize: '0.75rem', color: '#94A3B8', display: 'block', marginBottom: '0.25rem' }}>Source Context</label>
                <input
                  style={{ ...STYLES.input, opacity: 0.7, cursor: 'not-allowed' }}
                  value="ivanti_queue"
                  disabled
                />
              </div>
              <div>
                <label style={{ fontSize: '0.75rem', color: '#94A3B8', display: 'block', marginBottom: '0.25rem' }}>Description</label>
                <textarea
                  style={{ ...STYLES.input, minHeight: '100px', resize: 'vertical' }}
                  placeholder="Detailed description..."
                  value={singleJiraForm.description}
                  onChange={e => setSingleJiraForm(f => ({ ...f, description: e.target.value }))}
                />
              </div>
              <button
                style={{ ...STYLES.btnSuccess, justifyContent: 'center', marginTop: '0.5rem' }}
                onClick={submitSingleJira}
                disabled={singleJiraSaving}
              >
                {singleJiraSaving ? <Loader style={{ width: '14px', height: '14px', animation: 'spin 1s linear infinite' }} /> : <CheckCircle style={{ width: '14px', height: '14px' }} />}
                Create in Jira
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Consolidation Modal (Requirement 2.3) */}
      {showConsolidationModal && (
        <ConsolidationModal
          items={selectedQueueItems}
          onClose={() => setShowConsolidationModal(false)}
          onSuccess={handleConsolidationSuccess}
        />
      )}
    </div>
  );
}
