// The design canvas — shows a bilingual government notice being edited.
// This is the CENTERPIECE: a realistic-feeling tender notice cover.

function DesignCanvas({ zoom, selectedId, onSelect, showGrid, showGuides, showBleed }) {
  const canvasW = 595 * 1.05; // A4 portrait scaled
  const canvasH = 842 * 1.05;

  return (
    <div style={{
      flex: 1,
      overflow: 'hidden',
      background: 'var(--bg-canvas)',
      position: 'relative',
      backgroundImage: showGrid ? 'radial-gradient(circle, rgba(10,31,61,0.12) 0.7px, transparent 0.7px)' : 'none',
      backgroundSize: '16px 16px',
    }}>
      {/* Rulers */}
      <Ruler orientation="h" />
      <Ruler orientation="v" />

      {/* Canvas viewport — centered, scrollable */}
      <div style={{
        position: 'absolute',
        inset: '18px 0 0 18px',
        overflow: 'auto',
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'center',
        padding: '40px 40px 80px',
      }}>
        <div style={{
          transform: `scale(${zoom})`,
          transformOrigin: 'top center',
          position: 'relative',
        }}>
          {/* Bleed */}
          {showBleed && (
            <div style={{
              position: 'absolute',
              inset: -9,
              border: '1px dashed rgba(139, 46, 31, 0.35)',
              pointerEvents: 'none',
            }}/>
          )}

          {/* Artboard */}
          <div style={{
            width: canvasW,
            height: canvasH,
            background: '#FFFFFF',
            boxShadow: '0 8px 24px rgba(10,31,61,0.08), 0 1px 2px rgba(10,31,61,0.06)',
            position: 'relative',
          }}>
            <TenderNoticeArt selectedId={selectedId} onSelect={onSelect} showGuides={showGuides} />
          </div>

          {/* Artboard label */}
          <div className="mono" style={{
            position: 'absolute',
            top: -18,
            left: 0,
            fontSize: 10,
            color: 'var(--ink-muted)',
            letterSpacing: '0.08em',
          }}>
            TENDER-COVER-01 · A4 · 210 × 297 mm · 300 dpi
          </div>
        </div>
      </div>

      {/* Corner ruler intersection */}
      <div style={{ position: 'absolute', top: 0, left: 0, width: 18, height: 18, background: 'var(--bg-panel)', borderRight: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}/>
    </div>
  );
}

function Ruler({ orientation }) {
  const isH = orientation === 'h';
  return (
    <div style={{
      position: 'absolute',
      ...(isH ? { top: 0, left: 18, right: 0, height: 18 } : { top: 18, left: 0, bottom: 0, width: 18 }),
      background: 'var(--bg-panel)',
      borderBottom: isH ? '1px solid var(--line)' : undefined,
      borderRight: !isH ? '1px solid var(--line)' : undefined,
      overflow: 'hidden',
      zIndex: 2,
    }}>
      <svg width="100%" height="100%" style={{ display: 'block' }}>
        {Array.from({ length: 60 }, (_, i) => {
          const pos = i * 40;
          const isMajor = i % 2 === 0;
          return (
            <g key={i}>
              <line
                {...(isH
                  ? { x1: pos, x2: pos, y1: isMajor ? 8 : 12, y2: 18 }
                  : { x1: isMajor ? 8 : 12, x2: 18, y1: pos, y2: pos })}
                stroke="var(--ink-subtle)"
                strokeWidth="0.5"
              />
              {isMajor && (
                <text
                  {...(isH
                    ? { x: pos + 2, y: 10 }
                    : { x: 2, y: pos + 3 })}
                  fontSize="7.5"
                  fontFamily="JetBrains Mono, monospace"
                  fill="var(--ink-muted)"
                  style={ !isH ? { writingMode: 'vertical-rl' } : {}}
                >
                  {i * 40}
                </text>
              )}
            </g>
          );
        })}
      </svg>
    </div>
  );
}

// The actual designed content — a bilingual tender notice cover.
function TenderNoticeArt({ selectedId, onSelect, showGuides }) {
  const sel = (id) => ({
    outline: selectedId === id ? '1.5px solid var(--gold)' : 'none',
    outlineOffset: 2,
    cursor: 'pointer',
  });

  return (
    <div
      style={{
        width: '100%', height: '100%',
        padding: '48px 56px',
        display: 'flex', flexDirection: 'column',
        position: 'relative',
        color: '#0A1F3D',
      }}
      onClick={() => onSelect(null)}
    >
      {/* Guides */}
      {showGuides && (
        <>
          <div style={{ position: 'absolute', left: 40, top: 0, bottom: 0, width: 1, background: 'rgba(30, 78, 140, 0.35)' }}/>
          <div style={{ position: 'absolute', right: 40, top: 0, bottom: 0, width: 1, background: 'rgba(30, 78, 140, 0.35)' }}/>
          <div style={{ position: 'absolute', left: 0, right: 0, top: 40, height: 1, background: 'rgba(30, 78, 140, 0.35)' }}/>
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 40, height: 1, background: 'rgba(30, 78, 140, 0.35)' }}/>
        </>
      )}

      {/* Top emblem row */}
      <div
        onClick={(e) => { e.stopPropagation(); onSelect('emblem'); }}
        style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18, ...sel('emblem') }}
      >
        {/* Emblem placeholder — ashoka-ish concentric mark */}
        <svg width="52" height="52" viewBox="0 0 52 52">
          <circle cx="26" cy="26" r="24" fill="none" stroke="#0A1F3D" strokeWidth="1.2"/>
          <circle cx="26" cy="26" r="18" fill="none" stroke="#0A1F3D" strokeWidth="0.8"/>
          {Array.from({ length: 24 }).map((_, i) => {
            const a = (i * Math.PI * 2) / 24;
            const x1 = 26 + Math.cos(a) * 8;
            const y1 = 26 + Math.sin(a) * 8;
            const x2 = 26 + Math.cos(a) * 18;
            const y2 = 26 + Math.sin(a) * 18;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#0A1F3D" strokeWidth="0.6"/>;
          })}
          <circle cx="26" cy="26" r="4" fill="#0A1F3D"/>
        </svg>
        <div>
          <div style={{ fontFamily: "'Fraunces', serif", fontSize: 20, fontWeight: 600, letterSpacing: '-0.005em', lineHeight: 1.1 }}>
            Government of India
          </div>
          <div style={{ fontFamily: "'Noto Sans Devanagari', sans-serif", fontSize: 17, fontWeight: 500, color: '#0A1F3D', lineHeight: 1.15, marginTop: 2 }}>
            भारत सरकार
          </div>
          <div style={{ fontSize: 10, color: '#5C6B85', marginTop: 4, fontFamily: 'Inter', letterSpacing: '0.04em' }}>
            MINISTRY OF RURAL DEVELOPMENT · KRISHI BHAVAN · NEW DELHI 110001
          </div>
        </div>
      </div>

      {/* Rule */}
      <div style={{ height: 2, background: '#0A1F3D', margin: '4px 0 22px' }}/>
      <div style={{ height: 1, background: '#0A1F3D', marginTop: -18, marginBottom: 22 }}/>

      {/* Notice header */}
      <div
        onClick={(e) => { e.stopPropagation(); onSelect('notice-head'); }}
        style={{ ...sel('notice-head') }}
      >
        <div style={{ textAlign: 'center', marginBottom: 14 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.24em', color: '#5C6B85', marginBottom: 4 }}>
            NOTICE · सूचना
          </div>
          <div style={{ fontFamily: "'Fraunces', serif", fontSize: 26, fontWeight: 600, letterSpacing: '-0.01em', lineHeight: 1.15 }}>
            Invitation of E-Tenders
          </div>
          <div style={{ fontFamily: "'Noto Sans Devanagari', sans-serif", fontSize: 20, fontWeight: 500, marginTop: 4 }}>
            ई-निविदा आमंत्रण सूचना
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, fontSize: 10.5, fontFamily: 'Inter', color: '#2E4266', margin: '0 40px 8px' }}>
          <div>
            <div style={{ color: '#5C6B85', fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Reference No.</div>
            <div className="mono">MoRD/DES/2026/TND-0284</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ color: '#5C6B85', fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Date of Issue</div>
            <div className="mono">14 July 2026</div>
          </div>
        </div>
      </div>

      {/* Body copy — the tender abstract */}
      <div
        onClick={(e) => { e.stopPropagation(); onSelect('body'); }}
        style={{ marginTop: 18, ...sel('body') }}
      >
        <p style={{
          fontFamily: "'Fraunces', serif",
          fontSize: 12,
          lineHeight: 1.55,
          color: '#1A2E4F',
          margin: '0 0 12px',
          textAlign: 'justify',
          textIndent: '2em',
        }}>
          The Ministry of Rural Development, Government of India, invites sealed e-tenders through the Central Public Procurement Portal from eligible bidders for the supply, installation, and five-year maintenance of GIS-enabled village mapping equipment across 218 blocks under the Pradhan Mantri Awaas Yojana — Gramin. Bidders must be registered under GST and possess prior experience of a comparable scale in Government of India projects.
        </p>
        <p style={{
          fontFamily: "'Noto Sans Devanagari', sans-serif",
          fontSize: 11,
          lineHeight: 1.6,
          color: '#2E4266',
          margin: 0,
          textAlign: 'justify',
          textIndent: '2em',
        }}>
          ग्रामीण विकास मंत्रालय, भारत सरकार, प्रधानमंत्री आवास योजना — ग्रामीण के अंतर्गत 218 विकास खंडों में जीआईएस-सक्षम गाँव मानचित्रण उपकरणों की आपूर्ति, संस्थापन एवं पाँच वर्षीय अनुरक्षण हेतु केंद्रीय सार्वजनिक क्रय पोर्टल के माध्यम से पात्र निविदाकारों से मुहरबंद ई-निविदाएँ आमंत्रित करता है।
        </p>
      </div>

      {/* Schedule table */}
      <div
        onClick={(e) => { e.stopPropagation(); onSelect('schedule'); }}
        style={{ marginTop: 22, border: '1px solid #0A1F3D', ...sel('schedule') }}
      >
        <div style={{
          background: '#0A1F3D',
          color: '#FBF8F1',
          padding: '6px 12px',
          fontSize: 10,
          letterSpacing: '0.1em',
          textTransform: 'uppercase',
          fontFamily: 'JetBrains Mono, monospace',
        }}>
          Critical Dates · महत्वपूर्ण तिथियाँ
        </div>
        {[
          ['Publication of Tender',     'निविदा प्रकाशन',      '14 Jul 2026'],
          ['Pre-Bid Meeting',           'पूर्व-निविदा बैठक',    '22 Jul 2026 · 11:00 IST'],
          ['Last Date · Submission',    'प्रस्तुति अंतिम तिथि', '08 Aug 2026 · 15:00 IST'],
          ['Opening of Technical Bid',  'तकनीकी निविदा उद्घाटन', '10 Aug 2026 · 11:00 IST'],
        ].map((r, i, arr) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: '1.2fr 1.4fr 1fr',
            padding: '7px 12px',
            fontSize: 10,
            borderBottom: i < arr.length - 1 ? '1px solid #D6CFBE' : 'none',
            alignItems: 'baseline',
          }}>
            <div style={{ fontFamily: "'Fraunces', serif", color: '#0A1F3D' }}>{r[0]}</div>
            <div style={{ fontFamily: "'Noto Sans Devanagari', sans-serif", color: '#2E4266', fontSize: 10.5 }}>{r[1]}</div>
            <div className="mono" style={{ color: '#0A1F3D', textAlign: 'right', fontSize: 10 }}>{r[2]}</div>
          </div>
        ))}
      </div>

      {/* EMD */}
      <div
        onClick={(e) => { e.stopPropagation(); onSelect('emd'); }}
        style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
          marginTop: 14,
          ...sel('emd'),
        }}
      >
        <div style={{ border: '1px solid #D6CFBE', padding: '10px 12px' }}>
          <div style={{ fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#5C6B85' }}>Estimated Value</div>
          <div style={{ fontFamily: "'Fraunces', serif", fontSize: 18, fontWeight: 600, color: '#0A1F3D', marginTop: 2 }}>
            ₹ 42,80,00,000
          </div>
          <div className="mono" style={{ fontSize: 9.5, color: '#5C6B85' }}>Forty-Two Crore Eighty Lakh</div>
        </div>
        <div style={{ border: '1px solid #D6CFBE', padding: '10px 12px' }}>
          <div style={{ fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#5C6B85' }}>Earnest Money Deposit</div>
          <div style={{ fontFamily: "'Fraunces', serif", fontSize: 18, fontWeight: 600, color: '#0A1F3D', marginTop: 2 }}>
            ₹ 21,40,000
          </div>
          <div className="mono" style={{ fontSize: 9.5, color: '#5C6B85' }}>Refundable · Bank Guarantee</div>
        </div>
      </div>

      {/* Footer */}
      <div style={{ marginTop: 'auto', paddingTop: 24 }}>
        <div style={{ height: 1, background: '#0A1F3D', marginBottom: 12 }}/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, alignItems: 'end' }}>
          <div>
            <div style={{ fontSize: 9.5, color: '#5C6B85', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Issuing Authority</div>
            <div style={{ fontSize: 11.5, fontFamily: "'Fraunces', serif", color: '#0A1F3D', marginTop: 3, fontWeight: 500 }}>
              Sd/- Rakesh Sharma, IAS
            </div>
            <div className="mono" style={{ fontSize: 9.5, color: '#5C6B85' }}>Joint Secretary · Procurement</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            {/* QR placeholder */}
            <div style={{ display: 'inline-block', marginBottom: 6 }}>
              <QRMark size={44}/>
            </div>
            <div className="mono" style={{ fontSize: 9, color: '#5C6B85', letterSpacing: '0.06em' }}>
              cppp.gov.in/mord-284
            </div>
          </div>
        </div>
      </div>

      {/* Page number */}
      <div className="mono" style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', fontSize: 9.5, color: '#5C6B85', letterSpacing: '0.14em' }}>
        01 · 04
      </div>
    </div>
  );
}

// Faux QR
function QRMark({ size = 44 }) {
  const cells = 11;
  const s = size / cells;
  // deterministic pattern
  const pattern = Array.from({ length: cells * cells }, (_, i) => {
    // finder squares
    const r = Math.floor(i / cells), c = i % cells;
    const inFinder = (r < 3 && c < 3) || (r < 3 && c > cells - 4) || (r > cells - 4 && c < 3);
    if (inFinder) return (r === 0 || r === 2 || c === 0 || c === 2 || (r === 1 && c === 1)) ? 1 : 0;
    return (Math.sin(i * 3.7) * 10000) % 1 > 0.4 ? 1 : 0;
  });
  return (
    <svg width={size} height={size} style={{ display: 'block' }}>
      {pattern.map((v, i) => v ? (
        <rect key={i} x={(i % cells) * s} y={Math.floor(i / cells) * s} width={s} height={s} fill="#0A1F3D"/>
      ) : null)}
    </svg>
  );
}

Object.assign(window, { DesignCanvas });