import React from 'react';

// Plain Tailwind toggle switch — replaces shadcn Switch
function Toggle({ checked, onChange, id, scale = false }) {
  return (
    <button
      id={id}
      type="button"
      role="switch"
      aria-checked={checked}
      onClick={() => onChange(!checked)}
      className={`relative inline-flex items-center rounded-full transition-colors focus:outline-none ${
        scale ? 'h-4 w-7' : 'h-5 w-9'
      } ${checked ? 'bg-blue-600' : 'bg-slate-200'}`}
    >
      <span
        className={`inline-block rounded-full bg-white shadow transition-transform ${
          scale ? 'h-3 w-3' : 'h-4 w-4'
        } ${checked ? (scale ? 'translate-x-3.5' : 'translate-x-4') : 'translate-x-0.5'}`}
      />
    </button>
  );
}

const CustomFormFooter = ({ footerConfig, onChange }) => {
  const handleChange = (key, value) =>
    onChange(prev => ({ ...prev, [key]: value }));

  const handleStyleChange = (key, value) =>
    onChange(prev => ({ ...prev, styles: { ...prev.styles, [key]: value } }));

  return (
    <div className="mt-8 border-t border-slate-200 pt-6">
      {/* Section header */}
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-sm font-semibold text-slate-800">Footer Configuration</h3>
        <div className="flex items-center gap-2">
          <label htmlFor="footer-enabled" className="text-xs text-slate-600 cursor-pointer">
            Show Footer
          </label>
          <Toggle
            id="footer-enabled"
            checked={footerConfig.enabled}
            onChange={v => handleChange('enabled', v)}
          />
        </div>
      </div>

      {footerConfig.enabled && (
        <div className="space-y-4">
          {/* Left/Right content toggles */}
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-1.5">
              <label className="block text-xs text-slate-500">Left Content (Date)</label>
              <div className="flex items-center justify-between border rounded px-3 py-2 bg-slate-50">
                <span className="text-xs text-slate-700">Show Date</span>
                <Toggle
                  checked={footerConfig.showDate}
                  onChange={v => handleChange('showDate', v)}
                  scale
                />
              </div>
            </div>
            <div className="space-y-1.5">
              <label className="block text-xs text-slate-500">Right Content (Page #)</label>
              <div className="flex items-center justify-between border rounded px-3 py-2 bg-slate-50">
                <span className="text-xs text-slate-700">Page Numbers</span>
                <Toggle
                  checked={footerConfig.showPageNumbers}
                  onChange={v => handleChange('showPageNumbers', v)}
                  scale
                />
              </div>
            </div>
          </div>

          {/* Center text */}
          <div className="space-y-2">
            <label className="block text-xs text-slate-500">Center Footer Text</label>
            <input
              type="text"
              value={footerConfig.content || ''}
              onChange={e => handleChange('content', e.target.value)}
              placeholder="e.g. Confidential - For Internal Use Only"
              className="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-xs focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <p className="text-[10px] text-slate-400">Supports variables like {'{{client_name}}'}.</p>
          </div>

          {/* Style selects */}
          <div className="grid grid-cols-3 gap-3">
            {/* Alignment */}
            <div className="space-y-1">
              <label className="block text-[10px] text-slate-400">Alignment</label>
              <select
                value={footerConfig.styles?.alignment || 'center'}
                onChange={e => handleStyleChange('alignment', e.target.value)}
                className="w-full h-8 text-xs rounded-md border border-slate-200 bg-white px-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                {['left', 'center', 'right'].map(v => (
                  <option key={v} value={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</option>
                ))}
              </select>
            </div>

            {/* Font size */}
            <div className="space-y-1">
              <label className="block text-[10px] text-slate-400">Font Size</label>
              <select
                value={String(footerConfig.styles?.fontSize || 9)}
                onChange={e => handleStyleChange('fontSize', parseInt(e.target.value))}
                className="w-full h-8 text-xs rounded-md border border-slate-200 bg-white px-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                {[8, 9, 10, 11, 12].map(s => (
                  <option key={s} value={String(s)}>{s}pt</option>
                ))}
              </select>
            </div>

            {/* Top margin */}
            <div className="space-y-1">
              <label className="block text-[10px] text-slate-400">Top Margin</label>
              <select
                value={String(footerConfig.styles?.marginTop || 20)}
                onChange={e => handleStyleChange('marginTop', parseInt(e.target.value))}
                className="w-full h-8 text-xs rounded-md border border-slate-200 bg-white px-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                {[10, 20, 30, 40].map(s => (
                  <option key={s} value={String(s)}>{s}px</option>
                ))}
              </select>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default CustomFormFooter;
