paint-ui/components/editor/tool-options.tsx

'use client';

import { useToolStore } from '@/store';
import { useShapeStore } from '@/store/shape-store';
import { useSelectionStore } from '@/store/selection-store';
import { useTextStore } from '@/store/text-store';
import { WEB_SAFE_FONTS, GOOGLE_FONTS } from '@/lib/text-utils';
import { googleFontsLoader } from '@/lib/google-fonts-loader';
import { useCallback } from 'react';

export function ToolOptions() {
  const { activeTool, settings, setSize, setOpacity, setHardness, setColor, setFlow, setSecondaryColor, setGradientType } = useToolStore();
  const { settings: shapeSettings, setShapeType } = useShapeStore();
  const { selectionType, setSelectionType } = useSelectionStore();
  const {
    settings: textSettings,
    setFontFamily,
    setFontSize,
    setFontStyle,
    setFontWeight,
    setAlign,
    setLineHeight,
    setLetterSpacing,
    setColor: setTextColor,
  } = useTextStore();

  // Handle font change with Google Fonts loading
  const handleFontChange = useCallback(
    async (fontFamily: string) => {
      // Check if it's a Google Font
      if (GOOGLE_FONTS.includes(fontFamily as any)) {
        try {
          await googleFontsLoader.loadFont(fontFamily);
        } catch (error) {
          console.error('Failed to load Google Font:', error);
        }
      }
      setFontFamily(fontFamily);
    },
    [setFontFamily]
  );

  // Drawing tools: brush, pencil, eraser
  const isDrawingTool = ['brush', 'eraser', 'pencil'].includes(activeTool);
  const showHardness = ['brush'].includes(activeTool);
  const showColor = ['brush', 'pencil'].includes(activeTool);
  const showFlow = ['brush'].includes(activeTool);

  // Fill tool
  const isFillTool = activeTool === 'fill';

  // Gradient tool
  const isGradientTool = activeTool === 'gradient';

  // Crop tool
  const isCropTool = activeTool === 'crop';

  // Shape tool
  const isShapeTool = activeTool === 'shape';

  // Selection tool
  const isSelectionTool = activeTool === 'select';

  // Text tool
  const isTextTool = activeTool === 'text';

  // Don't show options bar if no options available
  if (!isDrawingTool && !isFillTool && !isGradientTool && !isCropTool && !isShapeTool && !isSelectionTool && !isTextTool) {
    return null;
  }

  return (
    <div className="flex items-center gap-6 px-4 flex-1">
      {/* Drawing Tools Options */}
      {isDrawingTool && (
        <>
          {showColor && (
            <div className="flex items-center gap-2">
              <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
                Color:
              </label>
              <input
                type="color"
                value={settings.color}
                onChange={(e) => setColor(e.target.value)}
                className="h-8 w-16 rounded border border-border cursor-pointer"
              />
              <input
                type="text"
                value={settings.color}
                onChange={(e) => setColor(e.target.value)}
                className="w-24 px-2 py-1 text-xs rounded border border-border bg-background text-foreground"
              />
            </div>
          )}

          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Size:
            </label>
            <input
              type="range"
              min="1"
              max="200"
              value={settings.size}
              onChange={(e) => setSize(Number(e.target.value))}
              className="w-32"
            />
            <span className="text-sm text-muted-foreground w-12">
              {settings.size}px
            </span>
          </div>

          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Opacity:
            </label>
            <input
              type="range"
              min="0"
              max="100"
              value={settings.opacity * 100}
              onChange={(e) => setOpacity(Number(e.target.value) / 100)}
              className="w-32"
            />
            <span className="text-sm text-muted-foreground w-10">
              {Math.round(settings.opacity * 100)}%
            </span>
          </div>

          {showHardness && (
            <div className="flex items-center gap-2">
              <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
                Hardness:
              </label>
              <input
                type="range"
                min="0"
                max="100"
                value={settings.hardness * 100}
                onChange={(e) => setHardness(Number(e.target.value) / 100)}
                className="w-32"
              />
              <span className="text-sm text-muted-foreground w-10">
                {Math.round(settings.hardness * 100)}%
              </span>
            </div>
          )}

          {showFlow && (
            <div className="flex items-center gap-2">
              <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
                Flow:
              </label>
              <input
                type="range"
                min="0"
                max="100"
                value={settings.flow * 100}
                onChange={(e) => setFlow(Number(e.target.value) / 100)}
                className="w-32"
              />
              <span className="text-sm text-muted-foreground w-10">
                {Math.round(settings.flow * 100)}%
              </span>
            </div>
          )}
        </>
      )}

      {/* Fill Tool Options */}
      {isFillTool && (
        <>
          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Color:
            </label>
            <input
              type="color"
              value={settings.color}
              onChange={(e) => setColor(e.target.value)}
              className="h-8 w-16 rounded border border-border cursor-pointer"
            />
            <input
              type="text"
              value={settings.color}
              onChange={(e) => setColor(e.target.value)}
              className="w-24 px-2 py-1 text-xs rounded border border-border bg-background text-foreground"
            />
          </div>

          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Opacity:
            </label>
            <input
              type="range"
              min="0"
              max="100"
              value={settings.opacity * 100}
              onChange={(e) => setOpacity(Number(e.target.value) / 100)}
              className="w-32"
            />
            <span className="text-sm text-muted-foreground w-10">
              {Math.round(settings.opacity * 100)}%
            </span>
          </div>
        </>
      )}

      {/* Crop Tool Options */}
      {isCropTool && (
        <>
          <div className="flex items-center gap-4">
            <div className="text-sm text-muted-foreground">
              Drag to define crop area. Click and drag handles to resize.
            </div>
            <button
              className="px-4 py-1.5 text-sm bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors"
              title="Apply crop (Enter)"
            >
              Apply
            </button>
            <button
              className="px-4 py-1.5 text-sm bg-red-600 hover:bg-red-700 text-white rounded-md transition-colors"
              title="Cancel crop (Esc)"
            >
              Cancel
            </button>
          </div>
        </>
      )}

      {/* Gradient Tool Options */}
      {isGradientTool && (
        <>
          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Type:
            </label>
            <select
              value={settings.gradientType || 'linear'}
              onChange={(e) => setGradientType(e.target.value as 'linear' | 'radial' | 'angular')}
              className="px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground"
            >
              <option value="linear">Linear</option>
              <option value="radial">Radial</option>
              <option value="angular">Angular</option>
            </select>
          </div>

          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Start Color:
            </label>
            <input
              type="color"
              value={settings.color}
              onChange={(e) => setColor(e.target.value)}
              className="h-8 w-16 rounded border border-border cursor-pointer"
            />
            <input
              type="text"
              value={settings.color}
              onChange={(e) => setColor(e.target.value)}
              className="w-24 px-2 py-1 text-xs rounded border border-border bg-background text-foreground"
            />
          </div>

          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              End Color:
            </label>
            <input
              type="color"
              value={settings.secondaryColor || '#ffffff'}
              onChange={(e) => setSecondaryColor(e.target.value)}
              className="h-8 w-16 rounded border border-border cursor-pointer"
            />
            <input
              type="text"
              value={settings.secondaryColor || '#ffffff'}
              onChange={(e) => setSecondaryColor(e.target.value)}
              className="w-24 px-2 py-1 text-xs rounded border border-border bg-background text-foreground"
            />
          </div>

          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Opacity:
            </label>
            <input
              type="range"
              min="0"
              max="100"
              value={settings.opacity * 100}
              onChange={(e) => setOpacity(Number(e.target.value) / 100)}
              className="w-32"
            />
            <span className="text-sm text-muted-foreground w-10">
              {Math.round(settings.opacity * 100)}%
            </span>
          </div>
        </>
      )}

      {/* Shape Tool Options */}
      {isShapeTool && (
        <div className="flex items-center gap-2">
          <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
            Shape:
          </label>
          <select
            value={shapeSettings.type}
            onChange={(e) => setShapeType(e.target.value as any)}
            className="px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground"
          >
            <option value="rectangle">Rectangle</option>
            <option value="ellipse">Ellipse</option>
            <option value="line">Line</option>
            <option value="arrow">Arrow</option>
            <option value="polygon">Polygon</option>
            <option value="star">Star</option>
            <option value="triangle">Triangle</option>
          </select>
        </div>
      )}

      {/* Selection Tool Options */}
      {isSelectionTool && (
        <div className="flex items-center gap-2">
          <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
            Mode:
          </label>
          <select
            value={selectionType}
            onChange={(e) => setSelectionType(e.target.value as any)}
            className="px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground"
          >
            <option value="rectangular">Rectangular</option>
            <option value="elliptical">Elliptical</option>
            <option value="lasso">Lasso</option>
            <option value="magic-wand">Magic Wand</option>
          </select>
        </div>
      )}

      {/* Text Tool Options */}
      {isTextTool && (
        <>
          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Font:
            </label>
            <select
              value={textSettings.fontFamily}
              onChange={(e) => handleFontChange(e.target.value)}
              className="px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground"
              style={{ fontFamily: textSettings.fontFamily }}
            >
              <optgroup label="Web Safe Fonts">
                {WEB_SAFE_FONTS.map((font) => (
                  <option key={font} value={font} style={{ fontFamily: font }}>
                    {font}
                  </option>
                ))}
              </optgroup>
              <optgroup label="Google Fonts">
                {GOOGLE_FONTS.map((font) => (
                  <option key={font} value={font} style={{ fontFamily: font }}>
                    {font}
                  </option>
                ))}
              </optgroup>
            </select>
          </div>

          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Size:
            </label>
            <input
              type="number"
              min="8"
              max="500"
              value={textSettings.fontSize}
              onChange={(e) => setFontSize(Number(e.target.value))}
              className="w-20 px-2 py-1 text-sm rounded border border-border bg-background text-foreground"
            />
            <span className="text-sm text-muted-foreground">px</span>
          </div>

          {/* Font Style: Bold/Italic */}
          <div className="flex items-center gap-1">
            <button
              onClick={() => setFontWeight(textSettings.fontWeight === 'bold' ? 'normal' : 'bold')}
              className={`px-3 py-1.5 text-sm font-bold rounded-md border transition-colors ${
                textSettings.fontWeight === 'bold'
                  ? 'bg-primary text-primary-foreground border-primary'
                  : 'bg-background text-foreground border-border hover:bg-accent'
              }`}
              title="Bold"
            >
              B
            </button>
            <button
              onClick={() => setFontStyle(textSettings.fontStyle === 'italic' ? 'normal' : 'italic')}
              className={`px-3 py-1.5 text-sm italic rounded-md border transition-colors ${
                textSettings.fontStyle === 'italic'
                  ? 'bg-primary text-primary-foreground border-primary'
                  : 'bg-background text-foreground border-border hover:bg-accent'
              }`}
              title="Italic"
            >
              I
            </button>
          </div>

          {/* Text Alignment */}
          <div className="flex items-center gap-1">
            <button
              onClick={() => setAlign('left')}
              className={`px-3 py-1.5 text-sm rounded-md border transition-colors ${
                textSettings.align === 'left'
                  ? 'bg-primary text-primary-foreground border-primary'
                  : 'bg-background text-foreground border-border hover:bg-accent'
              }`}
              title="Align Left"
            >
              ≡
            </button>
            <button
              onClick={() => setAlign('center')}
              className={`px-3 py-1.5 text-sm rounded-md border transition-colors ${
                textSettings.align === 'center'
                  ? 'bg-primary text-primary-foreground border-primary'
                  : 'bg-background text-foreground border-border hover:bg-accent'
              }`}
              title="Align Center"
            >
              ≣
            </button>
            <button
              onClick={() => setAlign('right')}
              className={`px-3 py-1.5 text-sm rounded-md border transition-colors ${
                textSettings.align === 'right'
                  ? 'bg-primary text-primary-foreground border-primary'
                  : 'bg-background text-foreground border-border hover:bg-accent'
              }`}
              title="Align Right"
            >
              ≣
            </button>
          </div>

          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Color:
            </label>
            <input
              type="color"
              value={textSettings.color}
              onChange={(e) => setTextColor(e.target.value)}
              className="h-8 w-16 rounded border border-border cursor-pointer"
            />
            <input
              type="text"
              value={textSettings.color}
              onChange={(e) => setTextColor(e.target.value)}
              className="w-24 px-2 py-1 text-xs rounded border border-border bg-background text-foreground"
            />
          </div>

          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Line Height:
            </label>
            <input
              type="range"
              min="0.5"
              max="3"
              step="0.1"
              value={textSettings.lineHeight}
              onChange={(e) => setLineHeight(Number(e.target.value))}
              className="w-24"
            />
            <span className="text-sm text-muted-foreground w-8">
              {textSettings.lineHeight.toFixed(1)}
            </span>
          </div>

          <div className="flex items-center gap-2">
            <label className="text-sm font-medium text-card-foreground whitespace-nowrap">
              Letter Spacing:
            </label>
            <input
              type="range"
              min="-10"
              max="50"
              step="1"
              value={textSettings.letterSpacing}
              onChange={(e) => setLetterSpacing(Number(e.target.value))}
              className="w-24"
            />
            <span className="text-sm text-muted-foreground w-10">
              {textSettings.letterSpacing}px
            </span>
          </div>
        </>
      )}
    </div>
  );
}