// components.jsx — UI pieces that mimic the platform screenshots
// Neutral aesthetic: off-white app bg, black primary, subtle borders.

const BRAND = {
  bg: '#FAFAF7',
  panel: '#FFFFFF',
  ink: '#0F0F0F',
  subtle: '#6B6B6B',
  border: '#E8E6E0',
  borderStrong: '#D8D6D0',
  dashed: '#BFBDB5',
  red: '#DC2626',
  amber: '#F59E0B',
  green: '#10B981',
  indigo: '#4F46E5',
  chipBg: '#F1F0EB',
};

// ─── Cursor ────────────────────────────────────────────────────────────────
function Cursor({ x, y, clicking = false, opacity = 1 }) {
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      transform: 'translate(-2px, -2px)',
      pointerEvents: 'none',
      zIndex: 1000,
      opacity,
      transition: 'opacity 200ms',
    }}>
      {/* Click ring */}
      {clicking && (
        <div style={{
          position: 'absolute',
          left: -12, top: -12,
          width: 30, height: 30,
          borderRadius: 15,
          background: 'rgba(15,15,15,0.12)',
          animation: 'none',
        }}/>
      )}
      <svg width="22" height="26" viewBox="0 0 22 26" style={{ filter: 'drop-shadow(0 2px 3px rgba(0,0,0,0.25))' }}>
        <path
          d="M2 2 L2 20 L7 16 L10 23 L13 22 L10 15 L17 15 Z"
          fill="#0F0F0F"
          stroke="#FFFFFF"
          strokeWidth="1.25"
          strokeLinejoin="round"
        />
      </svg>
    </div>
  );
}

// ─── Modal chrome ──────────────────────────────────────────────────────────
function ModalShell({ width = 720, height, title, children, style = {} }) {
  return (
    <div style={{
      width, 
      background: BRAND.panel,
      borderRadius: 14,
      boxShadow: '0 24px 60px rgba(15,15,15,0.14), 0 4px 12px rgba(15,15,15,0.06)',
      border: `1px solid ${BRAND.border}`,
      overflow: 'hidden',
      fontFamily: 'Inter, system-ui, sans-serif',
      color: BRAND.ink,
      ...style,
    }}>
      {/* Header */}
      <div style={{
        padding: '20px 28px 16px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.01em' }}>{title}</div>
        <div style={{ width: 20, height: 20, color: BRAND.subtle }}>
          <svg viewBox="0 0 20 20" fill="none">
            <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </div>
      </div>
      {children}
    </div>
  );
}

function TabBar({ active = 'upload' }) {
  const tabs = [
    { id: 'gdrive', label: 'Google Drive', icon: (
      <svg width="18" height="18" viewBox="0 0 24 24">
        <path d="M7.5 3l-6 10.5 3 5 6-10.5-3-5z" fill="#1FA463"/>
        <path d="M16.5 3h-9l6 10.5h9L16.5 3z" fill="#FFC107"/>
        <path d="M4.5 18.5h12l3-5h-12l-3 5z" fill="#3777E3"/>
      </svg>
    )},
    { id: 'dropbox', label: 'Dropbox', icon: (
      <svg width="18" height="18" viewBox="0 0 24 24">
        <path d="M6 3l6 4-6 4-6-4 6-4zM18 3l6 4-6 4-6-4 6-4zM0 13l6 4 6-4-6-4-6 4zM18 11l-6 4 6 4 6-4-6-4zM6 18l6 4 6-4-6-4-6 4z" fill="#0061FF"/>
      </svg>
    )},
    { id: 'upload', label: 'Upload Files', icon: (
      <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
        <rect x="2" y="5" width="16" height="11" rx="1.5" stroke={BRAND.ink} strokeWidth="1.3"/>
        <path d="M2 10h16" stroke={BRAND.ink} strokeWidth="1.3"/>
      </svg>
    )},
  ];
  return (
    <div style={{
      display: 'flex',
      borderBottom: `1px solid ${BRAND.border}`,
      padding: '0 28px',
      gap: 28,
    }}>
      {tabs.map(t => (
        <div key={t.id} style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '10px 2px 12px',
          fontSize: 14, fontWeight: 500,
          color: active === t.id ? BRAND.ink : BRAND.subtle,
          borderBottom: active === t.id ? `2px solid ${BRAND.ink}` : '2px solid transparent',
          marginBottom: -1,
        }}>
          <div style={{ opacity: active === t.id ? 1 : 0.7 }}>{t.icon}</div>
          {t.label}
        </div>
      ))}
    </div>
  );
}

function DropZone({ dragActive = false }) {
  return (
    <div style={{
      margin: '22px 28px 0',
      border: `1.5px dashed ${dragActive ? BRAND.ink : BRAND.dashed}`,
      borderRadius: 12,
      background: dragActive ? '#F6F5EF' : '#FDFDFB',
      padding: '52px 20px',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      gap: 8,
      transition: 'background 180ms, border-color 180ms',
    }}>
      <div style={{ width: 44, height: 44, color: BRAND.ink, marginBottom: 8 }}>
        <svg viewBox="0 0 44 44" fill="none">
          <path d="M22 30V14M22 14l-7 7M22 14l7 7M8 32v3a3 3 0 003 3h22a3 3 0 003-3v-3" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
      <div style={{ fontSize: 17, fontWeight: 600, color: BRAND.ink }}>
        Drop files here or click to browse
      </div>
      <div style={{ fontSize: 13, color: BRAND.subtle }}>
        PDF, DOCX, DOC, PNG or JPG, up to 25 MB each
      </div>
    </div>
  );
}

function FileRow({ name, size, analyzing = false, done = false, style = {} }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center',
      padding: '12px 14px',
      background: '#FDFDFB',
      border: `1px solid ${BRAND.border}`,
      borderRadius: 10,
      gap: 12,
      fontFamily: 'Inter, system-ui, sans-serif',
      ...style,
    }}>
      {analyzing ? (
        <Spinner size={16} color={BRAND.subtle} />
      ) : done ? (
        <div style={{ color: BRAND.green, display: 'flex' }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M3 8l3.5 3.5L13 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      ) : (
        <div style={{ color: BRAND.subtle, display: 'flex' }}>
          <svg width="16" height="18" viewBox="0 0 16 18" fill="none">
            <path d="M2 1h8l4 4v11a1 1 0 01-1 1H2a1 1 0 01-1-1V2a1 1 0 011-1z" stroke="currentColor" strokeWidth="1.2"/>
            <path d="M10 1v4h4" stroke="currentColor" strokeWidth="1.2"/>
          </svg>
        </div>
      )}
      <div style={{ flex: 1, fontSize: 14, fontWeight: 500, color: BRAND.ink }}>
        {name}
      </div>
      {size && (
        <div style={{ fontSize: 13, color: BRAND.subtle, fontVariantNumeric: 'tabular-nums' }}>{size}</div>
      )}
      {done && (
        <div style={{
          padding: '3px 10px',
          background: '#DCF5E7', color: '#047A4B',
          borderRadius: 999, fontSize: 12, fontWeight: 600,
        }}>
          Done
        </div>
      )}
    </div>
  );
}

function Spinner({ size = 18, color = BRAND.subtle, thickness = 2 }) {
  return (
    <div style={{
      width: size, height: size,
      borderRadius: '50%',
      border: `${thickness}px solid ${color}33`,
      borderTopColor: color,
      borderRightColor: color,
      animation: 'legalspin 0.9s linear infinite',
    }}/>
  );
}

function ModalFooter({ leftText, primaryLabel, primaryActive = false, primaryRef, children }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '18px 28px',
      borderTop: `1px solid ${BRAND.border}`,
      marginTop: 22,
    }}>
      <div style={{ fontSize: 13, color: BRAND.subtle }}>{leftText}</div>
      <div style={{ display: 'flex', gap: 10 }}>
        <div style={{
          padding: '10px 18px',
          border: `1px solid ${BRAND.borderStrong}`,
          borderRadius: 8,
          fontSize: 14, fontWeight: 500, color: BRAND.ink,
          background: BRAND.panel,
        }}>Cancel</div>
        <div ref={primaryRef} style={{
          padding: '10px 18px',
          borderRadius: 8,
          fontSize: 14, fontWeight: 600,
          background: primaryActive ? BRAND.ink : '#B8B6AF',
          color: primaryActive ? '#FFFFFF' : '#F5F4F0',
          transition: 'background 200ms',
          whiteSpace: 'nowrap',
        }}>
          {primaryLabel}
        </div>
      </div>
    </div>
  );
}

// ─── Score ring ────────────────────────────────────────────────────────────
function ScoreRing({ pct, size = 120, stroke = 9 }) {
  const radius = (size - stroke) / 2;
  const circ = 2 * Math.PI * radius;
  const dash = circ;
  const offset = circ * (1 - pct / 100);

  // color transitions: red -> amber -> green
  let color;
  if (pct < 30) color = BRAND.red;
  else if (pct < 70) color = BRAND.amber;
  else color = BRAND.green;

  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={radius} stroke={BRAND.border} strokeWidth={stroke} fill="none"/>
        <circle
          cx={size/2} cy={size/2} r={radius}
          stroke={color} strokeWidth={stroke} fill="none"
          strokeDasharray={dash} strokeDashoffset={offset}
          strokeLinecap="round"
          style={{ transition: 'stroke 320ms' }}
        />
      </svg>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        lineHeight: 1,
      }}>
        <div style={{
          fontSize: size * 0.23,
          fontWeight: 700,
          color: BRAND.ink,
          letterSpacing: '-0.02em',
          fontVariantNumeric: 'tabular-nums',
        }}>
          {Math.round(pct)}%
        </div>
        <div style={{
          fontSize: size * 0.085,
          marginTop: 4,
          color: BRAND.subtle,
          fontWeight: 600,
          letterSpacing: '0.1em',
        }}>COVERAGE</div>
      </div>
    </div>
  );
}

function LegalCoverageCard({ pct, width = 820 }) {
  return (
    <div style={{
      width,
      background: BRAND.panel,
      border: `1px solid ${BRAND.border}`,
      borderRadius: 16,
      padding: '26px 30px',
      display: 'flex', alignItems: 'center', gap: 26,
      boxShadow: '0 1px 2px rgba(15,15,15,0.03)',
      fontFamily: 'Inter, system-ui, sans-serif',
    }}>
      <ScoreRing pct={pct} size={120} />
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', color: BRAND.ink }}>
          Legal Coverage
        </div>
        <div style={{ fontSize: 15, color: BRAND.subtle, marginTop: 4 }}>
          {Math.round(pct)}% of key areas covered
        </div>
      </div>
    </div>
  );
}

// ─── Category card / issue list ────────────────────────────────────────────
function CategoryCard({ width = 880, progressPct = 16, missingCount, addressedIds = [], highlightUploadId = null, uploadHover = false, uploadBtnRef }) {
  const missingDocs = [
    { id: 'sgp1', label: 'Superannuation Guarantee Payment Q1 2025', status: 'overdue' },
    { id: 'sgp2', label: 'Superannuation Guarantee Payment Q2 2026', status: 'overdue' },
    { id: 'fwa', label: 'Fair Work Act Compliance Audit', status: 'amber' },
    { id: 'class', label: 'Contractor vs Employee Classification Assessments', status: 'overdue' },
    { id: 'whs', label: 'Work Health and Safety (WHS) Policy', status: 'amber' },
  ];

  return (
    <div style={{
      width,
      background: BRAND.panel,
      border: `1px solid ${BRAND.border}`,
      borderRadius: 16,
      padding: '22px 28px 24px',
      fontFamily: 'Inter, system-ui, sans-serif',
      boxShadow: '0 1px 2px rgba(15,15,15,0.03)',
    }}>
      {/* Header row */}
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
        <div style={{
          width: 9, height: 9, borderRadius: 5,
          background: BRAND.amber,
          marginTop: 10,
          flexShrink: 0,
        }}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 20, fontWeight: 700, color: BRAND.ink, letterSpacing: '-0.01em' }}>
            Employment & Labor
          </div>
          <div style={{ fontSize: 13.5, color: BRAND.subtle, marginTop: 6, lineHeight: 1.5, maxWidth: 680 }}>
            Company has at least one contractor agreement on file. Missing critical employment compliance documentation and evidence of super payment obligations being met.
          </div>
        </div>
      </div>

      {/* Progress bar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 14 }}>
        <div style={{ flex: 1, height: 4, background: BRAND.border, borderRadius: 2, overflow: 'hidden' }}>
          <div style={{
            height: '100%',
            width: `${progressPct}%`,
            background: BRAND.indigo,
            transition: 'width 360ms cubic-bezier(0.2,0.9,0.3,1)',
          }}/>
        </div>
        <div style={{ fontSize: 11, color: BRAND.subtle, fontVariantNumeric: 'tabular-nums', fontWeight: 500 }}>
          {Math.round(progressPct / 16.67)}/6
        </div>
      </div>

      {/* Missing docs */}
      <div style={{ marginTop: 22 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: BRAND.subtle, letterSpacing: '0.12em', marginBottom: 10 }}>
          MISSING DOCUMENTS
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
          {missingDocs.map((d) => {
            const addressed = addressedIds.includes(d.id);
            const highlight = d.id === highlightUploadId;
            const dotColor = d.status === 'overdue' ? BRAND.red : BRAND.amber;
            return (
              <div key={d.id} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '11px 4px',
                opacity: addressed ? 0.45 : 1,
                transition: 'opacity 320ms',
              }}>
                <div style={{
                  width: 7, height: 7, borderRadius: 4,
                  background: addressed ? BRAND.green : dotColor,
                  flexShrink: 0,
                  transition: 'background 300ms',
                }}/>
                <div style={{
                  fontSize: 13.5,
                  color: BRAND.ink,
                  flex: 1,
                  textDecoration: addressed ? 'line-through' : 'none',
                  textDecorationColor: BRAND.subtle,
                }}>
                  {d.label}
                  {d.status === 'overdue' && !addressed && (
                    <span style={{ color: BRAND.subtle, fontWeight: 400 }}> (overdue)</span>
                  )}
                </div>
                {addressed ? (
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 5,
                    fontSize: 12, color: BRAND.green, fontWeight: 600,
                  }}>
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path d="M2.5 7l3 3 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    Uploaded
                  </div>
                ) : (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontSize: 13, color: BRAND.subtle }}>
                    <div ref={highlight ? uploadBtnRef : undefined} style={{
                      display: 'flex', alignItems: 'center', gap: 5,
                      padding: '4px 8px',
                      borderRadius: 6,
                      background: highlight && uploadHover ? '#F1F0EB' : 'transparent',
                      color: highlight ? BRAND.ink : BRAND.subtle,
                      fontWeight: highlight ? 600 : 400,
                      transition: 'background 160ms, color 160ms',
                    }}>
                      <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
                        <path d="M7 9V2M7 2L4 5M7 2l3 3M2 11h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                      Upload
                    </div>
                    <div style={{ color: BRAND.border }}>|</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                      <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
                        <rect x="2.5" y="3" width="9" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.3"/>
                      </svg>
                      Request
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                        <path d="M4 5l2 2 2-2" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                      Dismiss
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ─── Mini upload confirmation toast ───────────────────────────────────────
function UploadToast({ filename }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '12px 16px',
      background: BRAND.ink,
      color: '#F5F4F0',
      borderRadius: 10,
      fontFamily: 'Inter, system-ui, sans-serif',
      fontSize: 13.5,
      fontWeight: 500,
      boxShadow: '0 10px 32px rgba(15,15,15,0.25)',
    }}>
      <div style={{ color: BRAND.green, display: 'flex' }}>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <circle cx="8" cy="8" r="7" fill="currentColor" opacity="0.15"/>
          <path d="M4 8l3 3 5-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
      <span>{filename} <span style={{ opacity: 0.6 }}>uploaded</span></span>
    </div>
  );
}

// ─── Small caption text ───────────────────────────────────────────────────
function Caption({ children, style = {} }) {
  return (
    <div style={{
      fontFamily: 'Inter, system-ui, sans-serif',
      fontSize: 14,
      fontWeight: 500,
      letterSpacing: '0.12em',
      textTransform: 'uppercase',
      color: BRAND.subtle,
      ...style,
    }}>
      {children}
    </div>
  );
}

Object.assign(window, {
  BRAND, Cursor, ModalShell, TabBar, DropZone, FileRow, Spinner, ModalFooter,
  ScoreRing, LegalCoverageCard, CategoryCard, UploadToast, Caption,
});