/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React from 'react';

interface HorizontalRulerProps {
  paperSize: 'A4' | 'F4';
  paperWidthCm: number;
  leftMarginPercent: number;
  rightMarginPercent: number;
  marginLeft: number;
  marginRight: number;
  showFindReplace: boolean;
  onDoubleClick?: () => void;
}

export function HorizontalRuler({
  paperSize,
  paperWidthCm,
  leftMarginPercent,
  rightMarginPercent,
  marginLeft,
  marginRight,
  showFindReplace,
  onDoubleClick
}: HorizontalRulerProps) {
  return (
    <div
      id="editor-document-ruler"
      className={`w-full h-8 bg-slate-50 border border-slate-200 border-b-0 relative flex items-end print:hidden select-none overflow-hidden shrink-0 cursor-pointer hover:bg-slate-100/50 transition-colors ${
        showFindReplace ? '' : 'rounded-t-xl'
      }`}
      onDoubleClick={onDoubleClick}
      title="Double click untuk membuka pengaturan margin kustom"
    >
      {/* Shaded Left Margin Area */}
      <div
        className="absolute top-0 bottom-0 left-0 bg-slate-200/70 border-r border-slate-300/30 transition-all duration-300"
        style={{ width: `${leftMarginPercent}%` }}
        title={`Margin Kiri: ${marginLeft} cm`}
      />

      {/* Shaded Right Margin Area */}
      <div
        className="absolute top-0 bottom-0 right-0 bg-slate-200/70 border-l border-slate-300/30 transition-all duration-300"
        style={{ width: `${100 - rightMarginPercent}%` }}
        title={`Margin Kanan: ${marginRight} cm`}
      />

      {/* Center White Active area for clarity */}
      <div
        className="absolute top-0 bottom-0 bg-white/40 transition-all duration-300"
        style={{ left: `${leftMarginPercent}%`, right: `${100 - rightMarginPercent}%` }}
      />

      {/* Tick Marks & Centimeter Numbers */}
      <div className="absolute inset-0 flex items-end pb-1 pr-6 pl-1 font-mono text-[9px] text-slate-500 pointer-events-none">
        {Array.from({ length: paperSize === 'A4' ? 43 : 44 }).map((_, i) => {
          const cm = i * 0.5;
          const percent = (cm / paperWidthCm) * 100;
          const isWhole = i % 2 === 0;
          const isMarginBoundary = cm === marginLeft || cm === paperWidthCm - marginRight;

          return (
            <div
              key={i}
              className="absolute flex flex-col items-center justify-end h-full transition-all duration-300"
              style={{
                left: `${percent}%`,
                transform: 'translateX(-50%)'
              }}
            >
              {isWhole && cm > 0 && cm < paperWidthCm && (
                <span
                  className={`text-[8.5px] font-black leading-none mb-0.5 ${
                    isMarginBoundary ? 'text-blue-600 font-extrabold' : 'text-slate-500/80'
                  }`}
                >
                  {cm}
                </span>
              )}

              <div
                className={`w-[1px] bg-current transition-all ${
                  isWhole ? 'h-2 bg-slate-400' : 'h-1 bg-slate-300'
                }`}
              />
            </div>
          );
        })}
      </div>

      {/* Left Margin Bracket / Active Indent Marker (MS Word style blue cursor) */}
      <div
        className="absolute bottom-0 -mb-[2px] transition-all duration-300 flex flex-col items-center cursor-help z-10"
        style={{ left: `${leftMarginPercent}%`, transform: 'translateX(-50%)' }}
        title={`Batas Margin Kiri (${marginLeft} cm)`}
      >
        <div className="w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-b-[5px] border-b-blue-600" />
        <div className="w-2 h-1.5 bg-blue-600 rounded-sm shadow-sm border border-blue-500" />
      </div>

      {/* Right Margin Bracket / Active Indent Marker (MS Word style blue cursor) */}
      <div
        className="absolute bottom-0 -mb-[2px] transition-all duration-300 flex flex-col items-center cursor-help z-10"
        style={{ left: `${rightMarginPercent}%`, transform: 'translateX(-50%)' }}
        title={`Batas Margin Kanan (${marginRight} cm)`}
      >
        <div className="w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-b-[5px] border-b-blue-600" />
        <div className="w-2 h-1.5 bg-blue-600 rounded-sm shadow-sm border border-blue-500" />
      </div>

      {/* Minimal margin info indicator text in the far right margin space */}
      <div className="absolute right-2.5 top-1.5 text-[8px] font-black text-slate-400 pointer-events-none uppercase tracking-widest flex items-center space-x-1">
        <span>Skala 1:1 ({paperSize})</span>
      </div>
    </div>
  );
}

interface VerticalRulerProps {
  paperSize: 'A4' | 'F4';
  topMarginPercent: number;
  bottomMarginPercent: number;
  effectiveTopMargin: number;
  marginBottom: number;
  onDoubleClick?: () => void;
}

export function VerticalRuler({
  paperSize,
  topMarginPercent,
  bottomMarginPercent,
  effectiveTopMargin,
  marginBottom,
  onDoubleClick
}: VerticalRulerProps) {
  const paperHeightCm = paperSize === 'A4' ? 29.7 : 33.0;

  return (
    <div
      id="editor-document-left-ruler"
      className="absolute right-full mr-2.5 top-0 w-6 bg-slate-50 border border-slate-200 border-r-0 select-none print:hidden overflow-hidden shrink-0 rounded-l-md cursor-pointer hover:bg-slate-100/50 transition-colors"
      style={{
        height: paperSize === 'A4' ? '297mm' : '330mm'
      }}
      onDoubleClick={onDoubleClick}
      title="Double click untuk membuka pengaturan margin kustom"
    >
      {/* Shaded Top Margin Area */}
      <div
        className="absolute top-0 left-0 right-0 bg-slate-200/70 border-b border-slate-300/30 transition-all duration-300"
        style={{ height: `${topMarginPercent}%` }}
        title={`Margin Atas: ${effectiveTopMargin} cm`}
      />

      {/* Shaded Bottom Margin Area */}
      <div
        className="absolute bottom-0 left-0 right-0 bg-slate-200/70 border-t border-slate-300/30 transition-all duration-300"
        style={{ height: `${100 - bottomMarginPercent}%` }}
        title={`Margin Bawah: ${marginBottom} cm`}
      />

      {/* Center White Active area */}
      <div
        className="absolute left-0 right-0 bg-white/40 transition-all duration-300"
        style={{ top: `${topMarginPercent}%`, bottom: `${100 - bottomMarginPercent}%` }}
      />

      {/* Vertical Tick Marks & Centimeter Numbers */}
      <div className="absolute inset-0 pointer-events-none font-mono text-[8px] text-slate-500">
        {Array.from({ length: paperSize === 'A4' ? 60 : 67 }).map((_, i) => {
          const cm = i * 0.5;
          const percent = (cm / paperHeightCm) * 100;
          const isWhole = i % 2 === 0;
          const isMarginBoundary = cm === effectiveTopMargin || cm === paperHeightCm - marginBottom;

          return (
            <div
              key={i}
              className="absolute left-0 right-0 flex items-center justify-end pr-1 transition-all duration-300"
              style={{
                top: `${percent}%`,
                transform: 'translateY(-50%)'
              }}
            >
              {isWhole && cm > 0 && cm < paperHeightCm && (
                <span
                  className={`text-[8px] mr-1.5 ${
                    isMarginBoundary ? 'text-blue-600 font-extrabold' : 'text-slate-500/80'
                  }`}
                >
                  {cm}
                </span>
              )}
              <div
                className={`h-[1px] bg-current transition-all ${
                  isWhole ? 'w-2.5 bg-slate-400' : 'w-1.5 bg-slate-300'
                }`}
              />
            </div>
          );
        })}
      </div>

      {/* Top Margin Boundary Bracket */}
      <div
        className="absolute left-0 -ml-[2px] transition-all duration-300 flex items-center cursor-help z-10"
        style={{ top: `${topMarginPercent}%`, transform: 'translateY(-50%)' }}
        title={`Batas Margin Atas (${effectiveTopMargin} cm)`}
      >
        <div className="w-1.5 h-2 bg-blue-600 rounded-sm shadow-sm border border-blue-500" />
        <div className="w-0 h-0 border-t-[3px] border-t-transparent border-b-[3px] border-b-transparent border-l-[4px] border-l-blue-600" />
      </div>

      {/* Bottom Margin Boundary Bracket */}
      <div
        className="absolute left-0 -ml-[2px] transition-all duration-300 flex items-center cursor-help z-10"
        style={{ top: `${bottomMarginPercent}%`, transform: 'translateY(-50%)' }}
        title={`Batas Margin Bawah (${marginBottom} cm)`}
      >
        <div className="w-1.5 h-2 bg-blue-600 rounded-sm shadow-sm border border-blue-500" />
        <div className="w-0 h-0 border-t-[3px] border-t-transparent border-b-[3px] border-b-transparent border-l-[4px] border-l-blue-600" />
      </div>
    </div>
  );
}