import React, { useEffect } from 'react';
import { Bold, Italic } from 'lucide-react';

// ---------------------------------------------------------------------------
// Font list — replace with your own AVAILABLE_FONTS if needed, or import from
// wherever your project stores them. Kept as a local constant to remove the
// dependency on @/lib/googleFontsManager for Lovable.dev compatibility.
// ---------------------------------------------------------------------------
const AVAILABLE_FONTS = [
  { name: 'Inter',           family: 'Inter, sans-serif' },
  { name: 'Helvetica',       family: 'Helvetica, Arial, sans-serif' },
  { name: 'Times New Roman', family: '"Times New Roman", Times, serif' },
  { name: 'Georgia',         family: 'Georgia, serif' },
  { name: 'Courier New',     family: '"Courier New", Courier, monospace' },
  { name: 'Arial',           family: 'Arial, sans-serif' },
  { name: 'Verdana',         family: 'Verdana, sans-serif' },
  { name: 'Trebuchet MS',    family: '"Trebuchet MS", sans-serif' },
  { name: 'Garamond',        family: 'Garamond, serif' },
];

function loadGoogleFont(family) {
  const id = `gf-${family.replace(/\s/g, '-')}`;
  if (document.getElementById(id)) return;
  const link = document.createElement('link');
  link.id = id;
  link.rel = 'stylesheet';
  link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}&display=swap`;
  document.head.appendChild(link);
}

export function CustomFormFontPanel({ settings, onChange, label = 'Font Settings' }) {
  const current = {
    family: 'Inter',
    size: '12',
    weight: 'normal',
    style: 'normal',
    ...settings,
  };

  useEffect(() => {
    if (current.family) loadGoogleFont(current.family);
  }, [current.family]);

  const set = (key, value) => onChange({ ...current, [key]: value });

  const currentFont = AVAILABLE_FONTS.find(f => f.name === current.family);

  return (
    <div className="space-y-4">
      {/* Section label */}
      <p className="text-xs font-semibold text-slate-500 uppercase">{label}</p>

      <div className="space-y-3">

        {/* Font family */}
        <div className="space-y-1">
          <label className="block text-[10px] text-slate-500">Font Family</label>
          <select
            value={current.family}
            onChange={e => set('family', 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"
          >
            {AVAILABLE_FONTS.map(f => (
              <option key={f.name} value={f.name} style={{ fontFamily: f.family }}>
                {f.name}
              </option>
            ))}
          </select>
        </div>

        <div className="grid grid-cols-2 gap-2">
          {/* Size slider */}
          <div className="space-y-1">
            <label className="block text-[10px] text-slate-500">Size ({current.size}px)</label>
            <input
              type="range"
              min={8}
              max={72}
              step={1}
              value={parseInt(current.size)}
              onChange={e => set('size', e.target.value)}
              className="w-full h-1.5 accent-blue-600 mt-2"
            />
          </div>

          {/* Weight & Style toggles */}
          <div className="space-y-1">
            <label className="block text-[10px] text-slate-500">Weight & Style</label>
            <div className="flex gap-1 mt-1">
              {/* Bold */}
              <button
                type="button"
                onClick={() => set('weight', current.weight === 'bold' ? 'normal' : 'bold')}
                aria-label="Toggle bold"
                className={`w-7 h-7 rounded flex items-center justify-center border text-xs transition-colors ${
                  current.weight === 'bold'
                    ? 'bg-slate-200 border-slate-400 text-slate-900'
                    : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'
                }`}
              >
                <Bold className="h-3.5 w-3.5" />
              </button>
              {/* Italic */}
              <button
                type="button"
                onClick={() => set('style', current.style === 'italic' ? 'normal' : 'italic')}
                aria-label="Toggle italic"
                className={`w-7 h-7 rounded flex items-center justify-center border text-xs transition-colors ${
                  current.style === 'italic'
                    ? 'bg-slate-200 border-slate-400 text-slate-900'
                    : 'bg-white border-slate-200 text-slate-500 hover:bg-slate-50'
                }`}
              >
                <Italic className="h-3.5 w-3.5" />
              </button>
            </div>
          </div>
        </div>

        {/* Preview */}
        <div className="p-3 bg-white border border-slate-200 rounded-md mt-2">
          <label className="block text-[10px] text-slate-400 mb-1">Preview</label>
          <div
            className="truncate"
            style={{
              fontFamily: currentFont?.family || 'inherit',
              fontSize: `${current.size}px`,
              fontWeight: current.weight,
              fontStyle: current.style,
            }}
          >
            The quick brown fox jumps over the lazy dog.
          </div>
        </div>
      </div>
    </div>
  );
}
