// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Tool Sidebar (left vertical icon bar)
// Grouped by: Transform | Adjust | Filter | Overlay | AI Tools
// ─────────────────────────────────────────────────────────────────────────────

import React from 'react';
import type { ToolId, UILocale, ToolCategory } from '@/types';
import { useCanvasStore } from '@/store';
import { useTranslation } from '@/i18n/useTranslation';
import clsx from 'clsx';

type ToolDef = { id: ToolId; category: ToolCategory; icon: React.ReactNode; requiresAI?: boolean };

const TOOL_DEFS: ToolDef[] = [
  { id: 'crop',          category: 'transform', icon: <CropIcon /> },
  { id: 'rotate',        category: 'transform', icon: <RotateIcon /> },
  { id: 'flip',          category: 'transform', icon: <FlipIcon /> },
  { id: 'resize',        category: 'transform', icon: <ResizeIcon /> },
  { id: 'perspective',   category: 'transform', icon: <PerspectiveIcon /> },
  { id: 'adjust',        category: 'adjust',    icon: <AdjustIcon /> },
  { id: 'filter',        category: 'filter',    icon: <FilterIcon /> },
  { id: 'text',          category: 'overlay',   icon: <TextIcon /> },
  { id: 'overlay',       category: 'overlay',   icon: <OverlayIcon /> },
  { id: 'draw',          category: 'overlay',   icon: <DrawIcon /> },
  { id: 'bg_remove',     category: 'ai', icon: <BgRemoveIcon />,  requiresAI: true },
  { id: 'ai_smart_crop', category: 'ai', icon: <SmartCropIcon />, requiresAI: true },
  { id: 'ai_enhance',    category: 'ai', icon: <EnhanceIcon />,   requiresAI: true },
  { id: 'ai_upscale',    category: 'ai', icon: <UpscaleIcon />,   requiresAI: true },
  { id: 'ai_inpaint',    category: 'ai', icon: <InpaintIcon />,   requiresAI: true },
];

interface ToolSidebarProps {
  tools: ToolId[];
  canUseAI: boolean;
  locale: UILocale;
}

export const ToolSidebar: React.FC<ToolSidebarProps> = ({ tools, canUseAI }) => {
  const { activeTool, setActiveTool } = useCanvasStore();
  const t = useTranslation();

  const availableTools = TOOL_DEFS.filter((t) => {
    if (!tools.includes(t.id)) return false;
    if (t.requiresAI && !canUseAI) return false;
    return true;
  });

  const grouped = availableTools.reduce<Record<ToolCategory, ToolDef[]>>(
    (acc, tool) => {
      if (!acc[tool.category]) acc[tool.category] = [];
      acc[tool.category].push(tool);
      return acc;
    },
    {} as Record<ToolCategory, ToolDef[]>
  );

  const categories = (['transform', 'adjust', 'filter', 'overlay', 'ai'] as ToolCategory[]).filter(
    (c) => grouped[c]?.length > 0
  );

  return (
    <aside className="ultra-tool-sidebar" role="toolbar" aria-label="Editing tools">
      {categories.map((category) => (
        <div key={category} className="ultra-tool-group">
          <span className="ultra-tool-group-label">{t.categories[category]}</span>
          {grouped[category].map((tool) => {
            const label = t.tools[tool.id as keyof typeof t.tools] ?? tool.id;
            return (
              <button
                key={tool.id}
                className={clsx('ultra-tool-btn', { 'ultra-tool-btn--active': activeTool === tool.id })}
                onClick={() => setActiveTool(tool.id)}
                title={label}
                aria-label={label}
                aria-pressed={activeTool === tool.id}
              >
                {tool.icon}
                <span className="ultra-tool-label">{label}</span>
              </button>
            );
          })}
        </div>
      ))}

    </aside>
  );
};

// ── SVG Icons (inline, minimal) ───────────────────────────────────────────────

function CropIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="6 2 6 18 22 18"/><polyline points="2 6 18 6 18 22"/></svg>;
}
function RotateIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.9"/></svg>;
}
function FlipIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>;
}
function ResizeIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>;
}
function PerspectiveIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="2 20 22 20 17 4 7 4 2 20"/></svg>;
}
function AdjustIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/><circle cx="8" cy="6" r="2" fill="currentColor" stroke="none"/><circle cx="16" cy="12" r="2" fill="currentColor" stroke="none"/><circle cx="10" cy="18" r="2" fill="currentColor" stroke="none"/></svg>;
}
function FilterIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>;
}
function TextIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>;
}
function OverlayIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="13" height="13" rx="1"/><rect x="8" y="8" width="13" height="13" rx="1" opacity="0.6"/></svg>;
}
function DrawIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>;
}
function BgRemoveIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3l18 18M9 9a3 3 0 1 1 6 0 3 3 0 0 1-6 0z" strokeDasharray="3 3"/><rect x="3" y="3" width="18" height="18" rx="2" strokeDasharray="3 3"/></svg>;
}
function AIGenIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>;
}
function SmartCropIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 9h6v6H9z"/><path d="M6 2v4M18 2v4M6 22v-4M18 22v-4M2 6h4M22 6h-4M2 18h4M22 18h-4"/></svg>;
}
function EnhanceIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>;
}
function UpscaleIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/><circle cx="12" cy="12" r="3"/></svg>;
}
function InpaintIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>;
}