import React from 'react'

const INDIGO = '#6366f1'
const INDIGO_LIGHT = '#eef2ff'
const TEXT_DARK = '#1e1b4b'
const TEXT_MED = '#374151'
const TEXT_LIGHT = '#6b7280'
const BORDER = '#e0e7ff'

interface PrintPageProps {
  title: string
  pageNum: number
  totalPages: number
  versionName: string
  children: React.ReactNode
}

export function PrintPage({ title, pageNum, totalPages, versionName, children }: PrintPageProps) {
  return (
    <div className="print-page" style={{
      width: '297mm',
      minHeight: '210mm',
      height: '210mm',
      backgroundColor: '#ffffff',
      color: TEXT_DARK,
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
      fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
      boxSizing: 'border-box',
      // screen-only decoration
      margin: '0 auto 32px',
      boxShadow: '0 4px 24px rgba(0,0,0,0.12)',
    }}>
      {/* Header bar */}
      <div style={{
        height: '32px',
        backgroundColor: INDIGO,
        WebkitPrintColorAdjust: 'exact',
        printColorAdjust: 'exact',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0 18px',
        flexShrink: 0,
      }}>
        <span style={{ color: '#fff', fontWeight: 700, fontSize: '12px', letterSpacing: '0.02em' }}>BreakPilot</span>
        <span style={{ color: 'rgba(255,255,255,0.85)', fontSize: '11px' }}>{title}</span>
      </div>

      {/* Content area — must stretch to fill all remaining height */}
      <div style={{
        flex: 1,
        overflow: 'hidden',
        padding: '16px 22px',
        display: 'flex',
        flexDirection: 'column',
        minHeight: 0,
      }}>
        {children}
      </div>

      {/* Footer bar */}
      <div style={{
        height: '24px',
        borderTop: `1px solid ${BORDER}`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0 18px',
        flexShrink: 0,
      }}>
        <span style={{ fontSize: '9px', color: TEXT_LIGHT }}>{versionName}</span>
        <span style={{ fontSize: '9px', color: INDIGO, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>CONFIDENTIAL</span>
        <span style={{ fontSize: '9px', color: TEXT_LIGHT }}>{pageNum} / {totalPages}</span>
      </div>
    </div>
  )
}

interface SectionTitleProps { children: React.ReactNode; subtitle?: string }

export function SectionTitle({ children, subtitle }: SectionTitleProps) {
  return (
    <div style={{ marginBottom: '12px', flexShrink: 0 }}>
      <h2 style={{ fontSize: '19px', fontWeight: 700, color: TEXT_DARK, borderLeft: `3px solid ${INDIGO}`, paddingLeft: '10px', margin: 0, lineHeight: 1.3 }}>
        {children}
      </h2>
      {subtitle && (
        <p style={{ fontSize: '11px', color: TEXT_LIGHT, marginTop: '4px', marginLeft: '13px', marginBottom: 0 }}>
          {subtitle}
        </p>
      )}
    </div>
  )
}

interface TableProps {
  headers: string[]
  rows: (string | React.ReactNode)[][]
  colWidths?: string[]
}

export function PrintTable({ headers, rows, colWidths }: TableProps) {
  return (
    <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '10px' }}>
      <thead>
        <tr>
          {headers.map((h, i) => (
            <th key={i} style={{
              backgroundColor: INDIGO_LIGHT,
              color: TEXT_DARK,
              fontWeight: 700,
              textTransform: 'uppercase',
              letterSpacing: '0.04em',
              fontSize: '9px',
              padding: '6px 9px',
              textAlign: 'left',
              width: colWidths?.[i],
              WebkitPrintColorAdjust: 'exact',
              printColorAdjust: 'exact',
            }}>
              {h}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row, ri) => (
          <tr key={ri} style={{ backgroundColor: ri % 2 === 0 ? '#ffffff' : '#fafafa' }}>
            {row.map((cell, ci) => (
              <td key={ci} style={{ padding: '6px 9px', color: TEXT_MED, borderBottom: `1px solid ${BORDER}`, verticalAlign: 'top', lineHeight: 1.5 }}>
                {cell}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

export function Badge({ children, color = INDIGO }: { children: React.ReactNode; color?: string }) {
  return (
    <span style={{ display: 'inline-block', padding: '2px 8px', borderRadius: '99px', backgroundColor: `${color}22`, color, fontSize: '9px', fontWeight: 600 }}>
      {children}
    </span>
  )
}

export const COLORS = { indigo: INDIGO, indigoLight: INDIGO_LIGHT, dark: TEXT_DARK, med: TEXT_MED, light: TEXT_LIGHT, border: BORDER }
