import React from 'react';
import { Settings } from 'lucide-react';
import {
  CutLineConfig,
  ExportRangeConfig,
  LabelTemplate,
  PaperConfig,
  RecordRow,
} from '../types';
import { PaperSettingsPanel, PageInput } from './PreviewGrid';

interface MobileExportLayoutPanelProps {
  template: LabelTemplate;
  paper: PaperConfig;
  onChangePaper: (paper: PaperConfig) => void;
  rows: RecordRow[];
  exportRange: ExportRangeConfig;
  cutLine: CutLineConfig;
  onChangeCutLine: (cutLine: CutLineConfig) => void;
}

export const MobileExportLayoutPanel: React.FC<MobileExportLayoutPanelProps> = ({
  template,
  paper,
  onChangePaper,
  rows,
  exportRange,
  cutLine,
  onChangeCutLine,
}) => {
  return (
    <div className="space-y-4">
      <PaperSettingsPanel
        theme="ps"
        paper={paper}
        onChangePaper={onChangePaper}
        template={template}
        rows={rows}
        exportRange={exportRange}
        totalRowCount={rows.length}
      />
      <div className="ps-section-divider space-y-2">
        <div className="ps-section-title">
          <Settings className="w-3 h-3" />
          裁切参考线
        </div>
        <label className="flex items-center gap-2 cursor-pointer text-[11px] text-[#ccc] select-none min-h-[40px]">
          <input
            type="checkbox"
            checked={cutLine.enabled}
            onChange={(e) => onChangeCutLine({ ...cutLine, enabled: e.target.checked })}
            className="ps-checkbox"
          />
          <span>在 PDF 中渲染裁切参考线</span>
        </label>
        <fieldset
          disabled={!cutLine.enabled}
          className={`space-y-2 border-0 p-0 m-0 min-w-0 ${!cutLine.enabled ? 'opacity-55' : ''}`}
        >
          <div>
            <label className="ps-field-label">线型</label>
            <select
              value={cutLine.style}
              onChange={(e) =>
                onChangeCutLine({
                  ...cutLine,
                  style: e.target.value as CutLineConfig['style'],
                })
              }
              className="ps-field text-[11px]"
            >
              <option value="dashed">虚线</option>
              <option value="solid">实线</option>
            </select>
          </div>
          <div>
            <label className="ps-field-label">线粗细 (mm)</label>
            <PageInput
              type="number"
              min="0.02"
              max="2"
              step="0.02"
              value={cutLine.width}
              onCommit={(val) =>
                onChangeCutLine({
                  ...cutLine,
                  width: Math.max(0.02, Math.min(2, Number(val) || 0.1)),
                })
              }
              inputClassName="ps-field font-mono text-[11px]"
            />
          </div>
          <div>
            <label className="ps-field-label">颜色</label>
            <div className="flex items-center gap-2">
              <input
                type="color"
                value={cutLine.color}
                onChange={(e) => onChangeCutLine({ ...cutLine, color: e.target.value })}
                className="color-input shrink-0"
                aria-label="裁切线颜色"
              />
              <input
                type="text"
                value={cutLine.color}
                onChange={(e) => onChangeCutLine({ ...cutLine, color: e.target.value })}
                className="ps-field font-mono text-[11px] flex-1 min-w-0"
              />
            </div>
          </div>
        </fieldset>
      </div>
    </div>
  );
};