/* ============================================================
   AIGENT DESIGN SYSTEM — shared icons
   Stroke icons on a 24x24 grid. Exposed on window.
   ============================================================ */

const Icon = ({ children, size = 18, sw = 2 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    {children}
  </svg>
);

const EyeIcon = ({ off, size = 18 }) =>
  off ? (
    <Icon size={size}>
      <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 8 10 8a18.5 18.5 0 0 1-2.16 3.19M6.61 6.61A18.5 18.5 0 0 0 2 12s3 8 10 8a9.12 9.12 0 0 0 5.39-1.61" />
      <line x1="2" y1="2" x2="22" y2="22" />
    </Icon>
  ) : (
    <Icon size={size}>
      <path d="M2 12s3-8 10-8 10 8 10 8-3 8-10 8-10-8-10-8z" />
      <circle cx="12" cy="12" r="3" />
    </Icon>
  );

/* geometry-swap chevron — renders correctly across all paths */
const Caret = ({ up, size = 14 }) => (
  <svg className="caret" width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
    <polyline points={up ? "6 15 12 9 18 15" : "6 9 12 15 18 9"} />
  </svg>
);

const AlertIcon = ({ size = 14 }) => (
  <Icon size={size} sw={2.2}>
    <circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
  </Icon>
);

const CheckIcon = ({ size = 16 }) => (
  <Icon size={size} sw={2.6}><polyline points="20 6 9 17 4 12" /></Icon>
);

const SearchIcon = ({ size = 18 }) => (
  <Icon size={size}><circle cx="11" cy="11" r="7" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></Icon>
);

const ChevronRight = ({ size = 18 }) => (
  <Icon size={size}><polyline points="9 6 15 12 9 18" /></Icon>
);

const PlusIcon = ({ size = 18 }) => (
  <Icon size={size}><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></Icon>
);

const ShieldIcon = ({ size = 14 }) => (
  <Icon size={size}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></Icon>
);
const LockIcon = ({ size = 14 }) => (
  <Icon size={size}><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></Icon>
);
const HelpIcon = ({ size = 16 }) => (
  <Icon size={size}><circle cx="12" cy="12" r="10" /><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3" /><line x1="12" y1="17" x2="12.01" y2="17" /></Icon>
);
const BoltIcon = ({ size = 14 }) => (
  <Icon size={size}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></Icon>
);

const ChevronDownIcon = ({ size = 16 }) => (
  <Icon size={size} sw={2.2}><polyline points="6 9 12 15 18 9" /></Icon>
);

/* nav icons */
const CoachIcon = ({ size = 19 }) => (
  <Icon size={size} sw={1.9}><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" /><circle cx="8.5" cy="11.5" r=".6" fill="currentColor" stroke="none" /><circle cx="12" cy="11.5" r=".6" fill="currentColor" stroke="none" /><circle cx="15.5" cy="11.5" r=".6" fill="currentColor" stroke="none" /></Icon>
);
const HeadsetIcon = ({ size = 19 }) => (
  <Icon size={size} sw={1.9}><path d="M4 14v-2a8 8 0 0 1 16 0v2" /><rect x="2.5" y="13.5" width="4" height="6.5" rx="1.5" /><rect x="17.5" y="13.5" width="4" height="6.5" rx="1.5" /><path d="M20 19.5a3 3 0 0 1-3 3h-2.5" /></Icon>
);
const ChartIcon = ({ size = 19 }) => (
  <Icon size={size} sw={1.9}><line x1="4" y1="20" x2="20" y2="20" /><rect x="6" y="11" width="3" height="6" rx=".6" /><rect x="11" y="6" width="3" height="11" rx=".6" /><rect x="16" y="13" width="3" height="4" rx=".6" /></Icon>
);
const FileTextIcon = ({ size = 19 }) => (
  <Icon size={size} sw={1.9}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" /><polyline points="14 3 14 8 19 8" /><line x1="8.5" y1="13" x2="15" y2="13" /><line x1="8.5" y1="16.5" x2="13" y2="16.5" /></Icon>
);
const BuildingIcon = ({ size = 16 }) => (
  <Icon size={size} sw={1.9}><path d="M4 21V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16" /><path d="M14 9h4a1 1 0 0 1 1 1v11" /><line x1="3" y1="21" x2="21" y2="21" /><line x1="7.5" y1="8" x2="10.5" y2="8" /><line x1="7.5" y1="12" x2="10.5" y2="12" /></Icon>
);
const UserCircleIcon = ({ size = 16 }) => (
  <Icon size={size} sw={1.9}><circle cx="12" cy="12" r="9" /><circle cx="12" cy="10" r="3" /><path d="M6.5 19a6 6 0 0 1 11 0" /></Icon>
);
const SettingsIcon = ({ size = 16 }) => (
  <Icon size={size} sw={1.9}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-2.82 1.17V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 8 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15H4.5a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 6 9.4a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 11 4.6V4.5a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 2.82 1.17l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" /></Icon>
);
const LogoutIcon = ({ size = 16 }) => (
  <Icon size={size} sw={1.9}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><polyline points="16 17 21 12 16 7" /><line x1="21" y1="12" x2="9" y2="12" /></Icon>
);
const TriangleAlertIcon = ({ size = 15 }) => (
  <Icon size={size} sw={2}><path d="M10.3 3.3 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.3a2 2 0 0 0-3.4 0z" /><line x1="12" y1="9" x2="12" y2="13.5" /><line x1="12" y1="17" x2="12.01" y2="17" /></Icon>
);
const CheckCircleIcon = ({ size = 15 }) => (
  <Icon size={size} sw={2}><circle cx="12" cy="12" r="9" /><polyline points="8.5 12.2 11 14.7 15.7 9.5" /></Icon>
);
const CalendarIcon = ({ size = 16 }) => (
  <Icon size={size} sw={1.9}><rect x="3.5" y="4.5" width="17" height="16" rx="2.5" /><line x1="3.5" y1="9" x2="20.5" y2="9" /><line x1="8" y1="2.5" x2="8" y2="6" /><line x1="16" y1="2.5" x2="16" y2="6" /></Icon>
);
const FilterIcon = ({ size = 15 }) => (
  <Icon size={size} sw={1.9}><polygon points="21 4 3 4 10 12.5 10 19 14 21 14 12.5 21 4" /></Icon>
);
const HashIcon = ({ size = 15 }) => (
  <Icon size={size} sw={1.9}><line x1="4" y1="9" x2="20" y2="9" /><line x1="4" y1="15" x2="20" y2="15" /><line x1="10" y1="3" x2="8" y2="21" /><line x1="16" y1="3" x2="14" y2="21" /></Icon>
);
const PhoneIcon = ({ size = 15 }) => (
  <Icon size={size} sw={1.9}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z" /></Icon>
);
const TrendUpIcon = ({ size = 13 }) => (
  <Icon size={size} sw={2.4}><polyline points="4 17 10 11 14 15 20 7" /><polyline points="15 7 20 7 20 12" /></Icon>
);
const TrendDownIcon = ({ size = 13 }) => (
  <Icon size={size} sw={2.4}><polyline points="4 7 10 13 14 9 20 17" /><polyline points="15 17 20 17 20 12" /></Icon>
);
const ClockIcon = ({ size = 15 }) => (
  <Icon size={size} sw={1.9}><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 15.5 14" /></Icon>
);
const PhoneCallIcon = ({ size = 15 }) => (
  <Icon size={size} sw={1.9}><path d="M15.5 3a5 5 0 0 1 4.5 4.5M14.5 6.5a2.5 2.5 0 0 1 2.5 2.5" /><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z" /></Icon>
);
const ThumbsUpIcon = ({ size = 15 }) => (
  <Icon size={size} sw={1.9}><path d="M7 11v9H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1z" /><path d="M7 11l4-7a2 2 0 0 1 2.7 2.6L12.5 9H19a2 2 0 0 1 2 2.3l-1.1 6A2 2 0 0 1 17.9 19H7" /></Icon>
);
const CopyIcon = ({ size = 15 }) => (
  <Icon size={size} sw={1.9}><rect x="9" y="9" width="11" height="11" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></Icon>
);
const PlayIcon = ({ size = 16 }) => (
  <Icon size={size} sw={1.6}><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" /></Icon>
);
const PauseIcon = ({ size = 16 }) => (
  <Icon size={size} sw={1.6}><rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor" stroke="none" /><rect x="14" y="5" width="4" height="14" rx="1" fill="currentColor" stroke="none" /></Icon>
);
const ArrowLeftIcon = ({ size = 16 }) => (
  <Icon size={size} sw={2.1}><line x1="19" y1="12" x2="5" y2="12" /><polyline points="12 19 5 12 12 5" /></Icon>
);
const ArrowRightIcon = ({ size = 16 }) => (
  <Icon size={size} sw={2.1}><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></Icon>
);
const TransferIcon = ({ size = 16 }) => (
  <Icon size={size} sw={1.9}><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" /></Icon>
);
const PauseChipIcon = ({ size = 13 }) => (
  <Icon size={size} sw={2}><circle cx="12" cy="12" r="9" /><line x1="10" y1="9" x2="10" y2="15" /><line x1="14" y1="9" x2="14" y2="15" /></Icon>
);
const XIcon = ({ size = 18 }) => (
  <Icon size={size} sw={2}><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></Icon>
);
const SparkIcon = ({ size = 20 }) => (
  <Icon size={size} sw={1.8}><path d="M12 3l1.8 4.7L18.5 9.5 13.8 11.3 12 16l-1.8-4.7L5.5 9.5l4.7-1.8L12 3z" /><path d="M19 14l.7 1.8 1.8.7-1.8.7L19 19l-.7-1.8-1.8-.7 1.8-.7L19 14z" /></Icon>
);
const TemplateIcon = ({ size = 20 }) => (
  <Icon size={size} sw={1.8}><rect x="3.5" y="3.5" width="17" height="17" rx="2.5" /><line x1="3.5" y1="9" x2="20.5" y2="9" /><line x1="9" y1="9" x2="9" y2="20.5" /></Icon>
);
const TrashIcon = ({ size = 16 }) => (
  <Icon size={size} sw={1.9}><polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" /></Icon>
);
const EditIcon = ({ size = 16 }) => (
  <Icon size={size} sw={1.9}><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" /></Icon>
);
const InfoIcon = ({ size = 16 }) => (
  <Icon size={size} sw={1.9}><circle cx="12" cy="12" r="9" /><line x1="12" y1="11" x2="12" y2="16" /><line x1="12" y1="8" x2="12.01" y2="8" /></Icon>
);
const LinkIcon = ({ size = 15 }) => (
  <Icon size={size} sw={1.9}><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1.5 1.5" /><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1.5-1.5" /></Icon>
);
const TrendLineIcon = ({ size = 15 }) => (
  <Icon size={size} sw={1.9}><polyline points="3 17 9 11 13 15 21 7" /><polyline points="15 7 21 7 21 13" /></Icon>
);
const WrenchIcon = ({ size = 19 }) => (
  <Icon size={size} sw={1.9}><path d="M14.7 6.3a4 4 0 0 0-5.4 5.2L3 17.8 6.2 21l6.3-6.3a4 4 0 0 0 5.2-5.4l-2.9 2.9-2.1-2.1 2.9-2.9z" /></Icon>
);
const MailIcon = ({ size = 15 }) => (
  <Icon size={size} sw={1.9}><rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" /></Icon>
);
const ExternalIcon = ({ size = 14 }) => (
  <Icon size={size} sw={1.9}><path d="M14 4h6v6" /><path d="M20 4l-9 9" /><path d="M19 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5" /></Icon>
);
const ArrowUpIcon = ({ size = 16 }) => (
  <Icon size={size} sw={2.1}><line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" /></Icon>
);
const BookIcon = ({ size = 18 }) => (
  <Icon size={size} sw={1.9}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /></Icon>
);

/* sort indicator: 'asc' | 'desc' | 'none' */
const SortIcon = ({ state = "none", size = 14 }) => {
  if (state === "none") {
    return (
      <svg className="sort-ic" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="8 9.5 12 5.5 16 9.5" /><polyline points="8 14.5 12 18.5 16 14.5" />
      </svg>
    );
  }
  return (
    <svg className="sort-ic active" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <polyline points={state === "asc" ? "7 14 12 9 17 14" : "7 10 12 15 17 10"} />
    </svg>
  );
};

Object.assign(window, {
  Icon, EyeIcon, Caret, AlertIcon, CheckIcon, SearchIcon, ChevronRight, PlusIcon,
  ShieldIcon, LockIcon, HelpIcon, BoltIcon,
  ChevronDownIcon, CoachIcon, HeadsetIcon, ChartIcon, FileTextIcon, BuildingIcon,
  UserCircleIcon, SettingsIcon, LogoutIcon, SortIcon,
  TriangleAlertIcon, CheckCircleIcon, CalendarIcon, FilterIcon, HashIcon, PhoneIcon,
  TrendUpIcon, TrendDownIcon, ClockIcon, PhoneCallIcon, ThumbsUpIcon,
  CopyIcon, PlayIcon, PauseIcon, ArrowLeftIcon, ArrowRightIcon, TransferIcon, PauseChipIcon,
  XIcon, SparkIcon, TemplateIcon,
  TrashIcon, EditIcon, InfoIcon, LinkIcon, TrendLineIcon, WrenchIcon,
  MailIcon, ExternalIcon, ArrowUpIcon, BookIcon,
});
