// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Text Overlay Panel
// ─────────────────────────────────────────────────────────────────────────────

import React, { useState, useEffect } from 'react';
import type { Layer } from '@/types';
import { useCanvasStore } from '@/store';
import { historyManager } from '@/engine/HistoryManager';
import { useTranslation } from '@/i18n/useTranslation';

const FONT_OPTIONS = [
  'Inter', 'Roboto', 'Open Sans', 'Montserrat', 'Playfair Display',
  'Lato', 'Poppins', 'Raleway', 'Oswald', 'Georgia',
];

const DEFAULT_FONT           = 'Inter';
const DEFAULT_SIZE           = 48;
const DEFAULT_COLOR          = '#ffffff';
const DEFAULT_OPACITY        = 100;
const DEFAULT_BG_COLOR       = '#000000';
const DEFAULT_BG_OPACITY     = 80;
const DEFAULT_BG_TRANSPARENT = true;

const generateId = () => `layer_${Date.now()}_${Math.random().toString(36).slice(2)}`;

export const TextPanel: React.FC = () => {
  const t = useTranslation();
  const [text, setText]           = useState('');
  const [fontFamily, setFontFamily] = useState(DEFAULT_FONT);
  const [fontSize, setFontSize]   = useState(DEFAULT_SIZE);
  const [fontColor, setFontColor] = useState(DEFAULT_COLOR);
  const [opacity, setOpacity]     = useState(DEFAULT_OPACITY);
  const [backgroundColor, setBackgroundColor] = useState(DEFAULT_BG_COLOR);
  const [backgroundOpacity, setBackgroundOpacity] = useState(DEFAULT_BG_OPACITY);
  const [isBackgroundTransparent, setIsBackgroundTransparent] = useState(DEFAULT_BG_TRANSPARENT);

  const { addLayer, layers, removeLayer, imageWidth, imageHeight, selectedLayerId, setSelectedLayerId } = useCanvasStore();
  const textLayers = layers.filter((l) => l.type === 'text');
  
  // Update form when a text layer is selected
  useEffect(() => {
    const selectedLayer = layers.find((l) => l.id === selectedLayerId);
    if (selectedLayer && selectedLayer.type === 'text') {
      setText(selectedLayer.text || '');
      setFontFamily(selectedLayer.fontFamily || DEFAULT_FONT);
      setFontSize(selectedLayer.fontSize || DEFAULT_SIZE);
      setFontColor(selectedLayer.fontColor || DEFAULT_COLOR);
      setOpacity(selectedLayer.opacity || DEFAULT_OPACITY);
      setBackgroundColor(selectedLayer.backgroundColor || DEFAULT_BG_COLOR);
      setBackgroundOpacity(selectedLayer.backgroundOpacity || DEFAULT_BG_OPACITY);
      setIsBackgroundTransparent(!selectedLayer.backgroundColor || selectedLayer.backgroundOpacity === 0);
    }
  }, [selectedLayerId, layers, setText, setFontFamily, setFontSize, setFontColor, setOpacity, setBackgroundColor, setBackgroundOpacity, setIsBackgroundTransparent]);

  const isDefault =
    text === '' &&
    fontFamily === DEFAULT_FONT &&
    fontSize === DEFAULT_SIZE &&
    fontColor === DEFAULT_COLOR &&
    opacity === DEFAULT_OPACITY &&
    backgroundColor === DEFAULT_BG_COLOR &&
    backgroundOpacity === DEFAULT_BG_OPACITY &&
    isBackgroundTransparent === DEFAULT_BG_TRANSPARENT;

  const handleReset = () => {
    setText('');
    setFontFamily(DEFAULT_FONT);
    setFontSize(DEFAULT_SIZE);
    setFontColor(DEFAULT_COLOR);
    setOpacity(DEFAULT_OPACITY);
    setBackgroundColor(DEFAULT_BG_COLOR);
    setBackgroundOpacity(DEFAULT_BG_OPACITY);
    setIsBackgroundTransparent(DEFAULT_BG_TRANSPARENT);
  };

  const handleAddText = () => {
    if (!text.trim()) return;
    const layer: Layer = {
      id: generateId(),
      type: 'text',
      visible: true,
      locked: false,
      opacity,
      blendMode: 'normal',
      x: imageWidth * 0.1,
      y: imageHeight * 0.5,
      width: imageWidth * 0.8,
      height: fontSize * 1.5,
      text: text.trim(),
      fontFamily,
      fontSize,
      fontColor,
      backgroundColor: isBackgroundTransparent ? undefined : backgroundColor,
      backgroundOpacity: isBackgroundTransparent ? 0 : backgroundOpacity,
      rotation: 0,
    };
    addLayer(layer);
    setSelectedLayerId(layer.id);
    historyManager.snapshot(`Add Text: "${text.slice(0, 20)}"`);
    setText('');
  };

  return (
    <div className="ultra-panel">
      <div className="ultra-panel__header">
        <h3 className="ultra-panel__title">{t.text.title}</h3>
        {!isDefault && (
          <button className="ultra-btn ultra-btn--ghost ultra-btn--sm" onClick={handleReset}>
            {t.common.reset}
          </button>
        )}
      </div>

      <div className="ultra-panel__section">
        <label className="ultra-section-label" htmlFor="text-input">Text</label>
        <textarea
          id="text-input"
          className="ultra-textarea"
          placeholder={t.text.placeholder}
          value={text}
          onChange={(e) => setText(e.target.value)}
          rows={3}
          maxLength={500}
        />
      </div>

      <div className="ultra-panel__section">
        <label className="ultra-section-label" htmlFor="font-select">{t.text.font}</label>
        <select
          id="font-select"
          className="ultra-select"
          value={fontFamily}
          onChange={(e) => setFontFamily(e.target.value)}
        >
          {FONT_OPTIONS.map((f) => (
            <option key={f} value={f} style={{ fontFamily: f }}>{f}</option>
          ))}
        </select>
      </div>

      <div className="ultra-panel__section">
        <label className="ultra-section-label">{t.text.sizeColor}</label>
        <div className="ultra-inline-controls">
          <div className="ultra-numeric-field">
            <label className="ultra-numeric-label">{t.text.size}</label>
            <input
              type="number"
              className="ultra-input ultra-input--sm"
              value={fontSize}
              min={8}
              max={300}
              onChange={(e) => setFontSize(Number(e.target.value))}
              aria-label="Font size"
            />
          </div>
          <div className="ultra-numeric-field">
            <label className="ultra-numeric-label">Color</label>
            <input
              type="color"
              className="ultra-color-picker"
              value={fontColor}
              onChange={(e) => setFontColor(e.target.value)}
              aria-label="Font color"
            />
          </div>
        </div>
      </div>

      <div className="ultra-panel__section">
        <label className="ultra-section-label">
          {t.text.opacity} <span className="ultra-quality-value">{opacity}%</span>
        </label>
        <input
          type="range"
          className="ultra-slider"
          min={10}
          max={100}
          value={opacity}
          style={{ '--slider-pct': `${((opacity - 10) / 90) * 100}%` } as React.CSSProperties}
          onChange={(e) => setOpacity(Number(e.target.value))}
          aria-label={`Text opacity ${opacity}%`}
        />
      </div>

      <div className="ultra-panel__section">
        <label className="ultra-section-label">Background</label>
        <div className="ultra-inline-controls">
          <div className="ultra-checkbox-field">
            <label className="ultra-checkbox-label">
              <input
                type="checkbox"
                checked={isBackgroundTransparent}
                onChange={(e) => setIsBackgroundTransparent(e.target.checked)}
                className="ultra-checkbox"
              />
              <span>Transparent</span>
            </label>
          </div>
          {!isBackgroundTransparent && (
            <>
              <div className="ultra-numeric-field">
                <label className="ultra-numeric-label">Color</label>
                <input
                  type="color"
                  className="ultra-color-picker"
                  value={backgroundColor}
                  onChange={(e) => setBackgroundColor(e.target.value)}
                  aria-label="Background color"
                />
              </div>
              <div className="ultra-numeric-field">
                <label className="ultra-numeric-label">Opacity</label>
                <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                  <input
                    type="number"
                    className="ultra-input ultra-input--sm"
                    value={backgroundOpacity}
                    min={0}
                    max={100}
                    onChange={(e) => setBackgroundOpacity(Number(e.target.value))}
                    aria-label="Background opacity"
                    style={{ width: '60px' }}
                  />
                  <span className="ultra-numeric-suffix">%</span>
                </div>
              </div>
            </>
          )}
        </div>
      </div>

      {text && (
        <div 
          className="ultra-text-preview" 
          style={{ 
            fontFamily, 
            fontSize: Math.min(fontSize, 32), 
            color: fontColor,
            backgroundColor: !isBackgroundTransparent && backgroundOpacity > 0 ? 
              `${backgroundColor}${Math.round(backgroundOpacity * 2.55).toString(16).padStart(2, '0')}` : 
              undefined,
            padding: !isBackgroundTransparent && backgroundOpacity > 0 ? '8px' : '0',
            borderRadius: !isBackgroundTransparent && backgroundOpacity > 0 ? '4px' : '0',
          }}
        >
          {text}
        </div>
      )}

      <div className="ultra-panel__actions">
        <button
          className="ultra-btn ultra-btn--primary"
          onClick={handleAddText}
          disabled={!text.trim()}
        >
          {t.text.addLayer}
        </button>
      </div>

      {/* Active text layers */}
      {textLayers.length > 0 && (
        <div className="ultra-panel__section">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <label className="ultra-section-label" style={{ margin: 0 }}>
              {t.text.layers} ({textLayers.length})
            </label>
            <button
              className="ultra-btn ultra-btn--ghost ultra-btn--sm"
              onClick={() => {
                textLayers.forEach((l) => removeLayer(l.id));
                historyManager.snapshot('Remove All Text Layers');
              }}
            >
              {t.text.removeAll}
            </button>
          </div>
          <div className="ultra-layer-list" style={{ marginTop: 8 }}>
            {textLayers.map((layer, i) => (
              <div
                key={layer.id}
                className={`ultra-layer-item${selectedLayerId === layer.id ? ' ultra-layer-item--active' : ''}`}
                onClick={() => setSelectedLayerId(layer.id)}
                style={{ cursor: 'pointer' }}
              >
                <span className="ultra-layer-name" style={{ flex: 1, fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {layer.text?.slice(0, 24) ?? `Text ${i + 1}`}
                </span>
                <button
                  className="ultra-layer-remove"
                  onClick={(e) => {
                    e.stopPropagation();
                    removeLayer(layer.id);
                    historyManager.snapshot('Remove Text Layer');
                  }}
                  aria-label="Remove text layer"
                >
                  ✕
                </button>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};