packages/frontend/lib/features/shared/components/icons.dart

import 'package:jaspr/dom.dart';
import 'package:jaspr/jaspr.dart';

// Directly copied from Octicons / open-source icon set (MIT License)
Component successIcon({double size = 10.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 16 16',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': color,
    },
    [
      const path(
        attributes: {
          'd':
              'M13.485 1.929a.75.75 0 0 1 .056 1.054l-7.5 8.25a.75.75 0 0 1-1.077.032l-3.5-3.5a.75.75 0 1 1 1.06-1.06l2.923 2.922 6.984-7.683a.75.75 0 0 1 1.054-.065z',
        },
        [],
      ),
    ],
  );
}

// Directly copied from Octicons / open-source icon set (MIT License)
Component errorCircleIcon({double size = 10.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 16 16',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': color,
    },
    [
      const path(
        attributes: {
          'd':
              'M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0-1A6 6 0 1 0 8 2a6 6 0 0 0 0 12zm0-8a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 6zm0-2a.998.998 0 1 1 0 2 .998.998 0 0 1 0-2z',
        },
        [],
      ),
    ],
  );
}

// Directly copied from Feather Icons (MIT License)
Component sendIcon({double size = 16.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '2',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const line(x1: '22', y1: '2', x2: '11', y2: '13', []),
      const polygon(attributes: {'points': '22 2 15 22 11 13 2 9 22 2'}, []),
    ],
  );
}

// Stop square icon (Feather Icons style, MIT License)
Component stopIcon({double size = 16.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': color,
      'stroke': 'none',
    },
    [
      const rect(x: '6', y: '6', width: '12', height: '12', attributes: {'rx': '2'}, []),
    ],
  );
}

// Directly copied from Feather Icons (MIT License)
Component alertTriangleIcon({double size = 16.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '2',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const path(
        attributes: {
          'd': 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z',
        },
        [],
      ),
      const line(x1: '12', y1: '9', x2: '12', y2: '13', []),
      const line(x1: '12', y1: '17', x2: '12.01', y2: '17', []),
    ],
  );
}

Component agentToggleIcon({required bool active, double size = 16.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 16 16',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '1.5',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const rect(x: '1.5', y: '1.5', width: '13', height: '13', attributes: {'rx': '1.5'}, []),
      if (active)
        const rect(x: '2.5', y: '2', width: '3.5', height: '12', fill: Color.currentColor, [])
      else
        const line(x1: '6', y1: '2', x2: '6', y2: '14', attributes: {'stroke-linecap': 'butt'}, []),
    ],
  );
}

Component editorToggleIcon({required bool active, double size = 16.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 16 16',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '1.5',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const rect(x: '1.5', y: '1.5', width: '13', height: '13', attributes: {'rx': '1.5'}, []),
      if (active)
        const rect(x: '6', y: '2', width: '4', height: '12', fill: Color.currentColor, [])
      else ...[
        const line(x1: '6', y1: '2', x2: '6', y2: '14', attributes: {'stroke-linecap': 'butt'}, []),
        const line(x1: '10', y1: '2', x2: '10', y2: '14', attributes: {'stroke-linecap': 'butt'}, []),
      ],
    ],
  );
}

Component previewToggleIcon({required bool active, double size = 16.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 16 16',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '1.5',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const rect(x: '1.5', y: '1.5', width: '13', height: '13', attributes: {'rx': '1.5'}, []),
      if (active)
        const rect(x: '9', y: '2', width: '4.5', height: '12', fill: Color.currentColor, [])
      else
        const line(x1: '9', y1: '2', x2: '9', y2: '14', attributes: {'stroke-linecap': 'butt'}, []),
    ],
  );
}

Component actionHistoryIcon({double size = 14.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 16 16',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '1.5',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const line(x1: '5', y1: '4', x2: '13', y2: '4', []),
      const line(x1: '5', y1: '8', x2: '13', y2: '8', []),
      const line(x1: '5', y1: '12', x2: '13', y2: '12', []),
      const rect(x: '2', y: '3', width: '2', height: '2', attributes: {'rx': '0.5'}, []),
      const rect(x: '2', y: '7', width: '2', height: '2', attributes: {'rx': '0.5'}, []),
      const rect(x: '2', y: '11', width: '2', height: '2', attributes: {'rx': '0.5'}, []),
    ],
  );
}

/// Magic wand icon (Material Icons: auto_fix_high) path data.
const String autoFixHighSvgPath =
    'M7.5 5.6 10 7 8.6 4.5 10 2 7.5 3.4 5 2l1.4 2.5L5 7zm12 9.8L17 14l1.4 2.5L17 19l2.5-1.4L22 19l-1.4-2.5L22 14zM22 2l-2.5 1.4L17 2l1.4 2.5L17 7l2.5-1.4L22 7l-1.4-2.5zm-7.63 5.29a.996.996 0 0 0-1.41 0L1.29 18.96c-.39.39-.39 1.02 0 1.41l2.34 2.34c.39.39 1.02.39 1.41 0L16.7 11.05c.39-.39.39-1.02 0-1.41l-2.33-2.35zM5.21 19.71l-1.41-1.41L10 12.09l1.41 1.41-6.2 6.21z';

/// Magic wand icon (Material Icons: auto_fix_high) SVG string.
const String autoFixHighSvg =
    '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">'
    '<path d="$autoFixHighSvgPath"/>'
    '</svg>';

Component autoFixHighIcon({double size = 14.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': color,
    },
    [
      const path(
        attributes: {
          'd': autoFixHighSvgPath,
        },
        [],
      ),
    ],
  );
}

Component downloadIcon({double size = 16.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '2',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const path(
        attributes: {
          'd': 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4',
        },
        [],
      ),
      const polyline(
        attributes: {
          'points': '7 10 12 15 17 10',
        },
        [],
      ),
      const line(
        x1: '12',
        y1: '15',
        x2: '12',
        y2: '3',
        [],
      ),
    ],
  );
}

Component uploadIcon({double size = 16.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '2',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const path(
        attributes: {
          'd': 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4',
        },
        [],
      ),
      const polyline(
        attributes: {
          'points': '17 8 12 3 7 8',
        },
        [],
      ),
      const line(
        x1: '12',
        y1: '3',
        x2: '12',
        y2: '15',
        [],
      ),
    ],
  );
}

Component pencilIcon({double size = 14.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '2',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const path(
        attributes: {
          'd': 'M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z',
        },
        [],
      ),
    ],
  );
}

Component infoIcon({double size = 14.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '2',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const circle(cx: '12', cy: '12', r: '10', []),
      const line(x1: '12', y1: '16', x2: '12', y2: '12', []),
      const line(x1: '12', y1: '8', x2: '12.01', y2: '8', []),
    ],
  );
}

/// Gemini sparkle icon (a four-pointed star shape).
Component geminiSparkleIcon({double size = 14.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': color,
    },
    [
      const path(
        attributes: {
          'd': 'M12 2L14.4 8.8L22 10L14.4 12.8L12 22L9.6 12.8L2 10L9.6 8.8L12 2Z',
        },
        [],
      ),
    ],
  );
}

// Small close/dismiss X icon (Feather Icons style, MIT License)
Component closeIcon({double size = 12.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '2.5',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const line(x1: '18', y1: '6', x2: '6', y2: '18', []),
      const line(x1: '6', y1: '6', x2: '18', y2: '18', []),
    ],
  );
}

// Plus-circle icon for attachment / upload actions (Feather Icons style, MIT License)
Component plusCircleIcon({double size = 16.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '2',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const circle(cx: '12', cy: '12', r: '10', []),
      const line(x1: '12', y1: '8', x2: '12', y2: '16', []),
      const line(x1: '8', y1: '12', x2: '16', y2: '12', []),
    ],
  );
}

Component pointerIcon({double size = 12.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '2.5',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const path(
        attributes: {
          'd': 'M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z',
        },
        [],
      ),
      const path(
        attributes: {
          'd': 'M13 13l6 6',
        },
        [],
      ),
    ],
  );
}

// Gear / settings icon
Component settingsIcon({double size = 16.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '2',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const circle(attributes: {'cx': '12', 'cy': '12', 'r': '3'}, []),
      const path(
        attributes: {
          'd':
              'M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z',
        },
        [],
      ),
    ],
  );
}

Component shareIcon({double size = 16.0, String color = 'currentColor'}) {
  return svg(
    viewBox: '0 0 24 24',
    attributes: {
      'width': '$size',
      'height': '$size',
      'fill': 'none',
      'stroke': color,
      'stroke-width': '2',
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
    },
    [
      const circle(attributes: {'cx': '18', 'cy': '5', 'r': '3'}, []),
      const circle(attributes: {'cx': '6', 'cy': '12', 'r': '3'}, []),
      const circle(attributes: {'cx': '18', 'cy': '19', 'r': '3'}, []),
      const line(x1: '8.59', y1: '13.51', x2: '15.42', y2: '17.49', []),
      const line(x1: '15.41', y1: '6.51', x2: '8.59', y2: '10.49', []),
    ],
  );
}