/* global React */
// Icons.jsx — minimal icon set for Dicto BO wizard
// All icons use currentColor so they can be tinted via CSS.

const Icon = ({ path, size = 16, stroke = 1.75, children, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
    {...rest}>
    {children || <path d={path} />}
  </svg>
);

const IconBack = (p) => <Icon {...p}><path d="M15 18l-6-6 6-6"/></Icon>;
const IconChevDown = (p) => <Icon {...p}><path d="M6 9l6 6 6-6"/></Icon>;
const IconChevRight = (p) => <Icon {...p}><path d="M9 6l6 6-6 6"/></Icon>;
const IconChevLeft = (p) => <Icon {...p}><path d="M15 18l-6-6 6-6"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="M5 12l5 5L20 7"/></Icon>;
const IconPlus = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const IconX = (p) => <Icon {...p}><path d="M18 6L6 18M6 6l12 12"/></Icon>;
const IconSearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></Icon>;
const IconSparkles = (p) => <Icon {...p}><path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z"/><path d="M19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8L19 14z"/></Icon>;
const IconPanel = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M9 5v14"/></Icon>;
const IconInfo = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></Icon>;
const IconUpload = (p) => <Icon {...p}><path d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2"/><path d="M12 4v12M7 9l5-5 5 5"/></Icon>;
const IconLink = (p) => <Icon {...p}><path d="M10 14a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1"/><path d="M14 10a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1"/></Icon>;
const IconGlobe = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></Icon>;
const IconBuilding = (p) => <Icon {...p}><path d="M4 21V5a2 2 0 012-2h8a2 2 0 012 2v16"/><path d="M16 10h3a2 2 0 012 2v9"/><path d="M8 7h2M8 11h2M8 15h2"/></Icon>;
const IconUser = (p) => <Icon {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/></Icon>;
const IconHash = (p) => <Icon {...p}><path d="M5 9h14M5 15h14M10 3L8 21M16 3l-2 18"/></Icon>;
const IconFile = (p) => <Icon {...p}><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z"/><path d="M14 3v6h6"/></Icon>;
const IconFolder = (p) => <Icon {...p}><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></Icon>;
const IconUsers = (p) => <Icon {...p}><circle cx="9" cy="8" r="3.5"/><path d="M3 20a6 6 0 0112 0"/><circle cx="17" cy="9" r="2.5"/><path d="M21 19a4 4 0 00-5-3.87"/></Icon>;
const IconTrash = (p) => <Icon {...p}><path d="M4 7h16M10 11v6M14 11v6M6 7l1 13a2 2 0 002 2h6a2 2 0 002-2l1-13M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2"/></Icon>;
const IconSettings = (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.9l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.9-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 01-4 0v-.1a1.7 1.7 0 00-1-1.5 1.7 1.7 0 00-1.9.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.9 1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.1a1.7 1.7 0 001.5-1 1.7 1.7 0 00-.3-1.9l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.9.3 1.7 1.7 0 001-1.5V3a2 2 0 014 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.9-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.9 1.7 1.7 0 001.5 1H21a2 2 0 010 4h-.1a1.7 1.7 0 00-1.5 1z"/></Icon>;
const IconDots = (p) => <Icon {...p}><circle cx="5" cy="12" r="1.2" fill="currentColor"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/><circle cx="19" cy="12" r="1.2" fill="currentColor"/></Icon>;
const IconLock = (p) => <Icon {...p}><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></Icon>;
const IconTag = (p) => <Icon {...p}><path d="M20.59 13.41L13.41 20.59a2 2 0 01-2.83 0L3 13V5a2 2 0 012-2h8l7.59 7.59a2 2 0 010 2.82z"/><circle cx="7.5" cy="7.5" r="1.2" fill="currentColor"/></Icon>;
const IconChart = (p) => <Icon {...p}><path d="M3 3v18h18"/><path d="M7 14l3-3 4 4 5-7"/></Icon>;
const IconTimeline = (p) => <Icon {...p}><circle cx="5" cy="12" r="2"/><circle cx="19" cy="12" r="2"/><path d="M7 12h10"/><path d="M12 5v2M12 17v2"/></Icon>;
const IconHeart = (p) => <Icon {...p}><path d="M12 21s-7-4.5-9.5-9A5 5 0 0112 6a5 5 0 019.5 6c-2.5 4.5-9.5 9-9.5 9z"/></Icon>;
const IconBolt = (p) => <Icon {...p}><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></Icon>;
const IconCrown = (p) => <Icon {...p}><path d="M3 7l4 5 5-7 5 7 4-5v12H3z"/></Icon>;
const IconSignal = (p) => <Icon {...p}><path d="M4 20V10M10 20V4M16 20v-8M22 20v-4"/></Icon>;
const IconBook = (p) => <Icon {...p}><path d="M4 5a2 2 0 012-2h13v16H6a2 2 0 00-2 2V5z"/><path d="M19 17H6a2 2 0 00-2 2"/></Icon>;
const IconLayers = (p) => <Icon {...p}><path d="M12 2l10 6-10 6L2 8l10-6z"/><path d="M2 14l10 6 10-6M2 18l10 6 10-6"/></Icon>;
const IconSpark = (p) => <Icon {...p}><path d="M12 3l2 7 7 2-7 2-2 7-2-7-7-2 7-2 2-7z"/></Icon>;
const IconEye = (p) => <Icon {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></Icon>;

// Brand/provider logos (simple geometric marks)
const LogoOpenAI = ({ size = 22 }) => (
  <div style={{width:size, height:size, borderRadius:6, background:'#0F0F0F', display:'grid', placeItems:'center', color:'#fff', fontSize:size*0.5, fontWeight:700}}>
    <svg width={size*0.6} height={size*0.6} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 3a6 6 0 016 6v6a6 6 0 01-6 6 6 6 0 01-6-6V9a6 6 0 016-6z M6 9l6 3.5M18 9l-6 3.5M12 12.5V20"/></svg>
  </div>
);
const LogoGemini = ({ size = 22 }) => (
  <div style={{width:size, height:size, borderRadius:6, background:'linear-gradient(135deg,#4285F4,#9B72F2 60%,#D96570)', display:'grid', placeItems:'center', color:'#fff'}}>
    <svg width={size*0.55} height={size*0.55} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2 8 8 2-8 2-2 8-2-8-8-2 8-2 2-8z"/></svg>
  </div>
);
const LogoClaude = ({ size = 22 }) => (
  <div style={{width:size, height:size, borderRadius:6, background:'#CC785C', display:'grid', placeItems:'center', color:'#fff', fontSize:size*0.5, fontWeight:700, fontFamily:'Georgia, serif'}}>A</div>
);
const LogoPerplexity = ({ size = 22 }) => (
  <div style={{width:size, height:size, borderRadius:6, background:'#20808D', display:'grid', placeItems:'center', color:'#fff'}}>
    <svg width={size*0.55} height={size*0.55} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="8"/><path d="M12 4v16M4 12h16"/></svg>
  </div>
);
const LogoMistral = ({ size = 22 }) => (
  <div style={{width:size, height:size, borderRadius:6, background:'#FF7000', display:'grid', placeItems:'center', color:'#fff'}}>
    <svg width={size*0.6} height={size*0.6} viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="4" width="4" height="16"/><rect x="9" y="4" width="4" height="10"/><rect x="15" y="4" width="4" height="16"/></svg>
  </div>
);
const LogoGrok = ({ size = 22 }) => (
  <div style={{width:size, height:size, borderRadius:6, background:'#0A0A0A', display:'grid', placeItems:'center', color:'#fff', fontFamily:'Georgia, serif', fontWeight:700, fontSize:size*0.5}}>𝕏</div>
);

// Country flag chips (emoji-free — use colored pills)
const Flag = ({ code, size = 20 }) => {
  const palettes = {
    IT: ['#009246', '#fff', '#CE2B37'],
    FR: ['#0055A4', '#fff', '#EF4135'],
    DE: ['#000', '#DD0000', '#FFCE00'],
    ES: ['#C60B1E', '#FFC400', '#C60B1E'],
    UK: ['#012169', '#fff', '#C8102E'],
    US: ['#B22234', '#fff', '#3C3B6E'],
    CH: ['#D52B1E', '#D52B1E', '#fff'],
    AT: ['#ED2939', '#fff', '#ED2939'],
    NL: ['#AE1C28', '#fff', '#21468B'],
    BE: ['#000', '#FAE042', '#ED2939'],
    PT: ['#006600', '#FF0000', '#FFFF00'],
    SE: ['#006AA7', '#FECC00', '#006AA7'],
  };
  const p = palettes[code] || ['#ccc', '#999', '#666'];
  return (
    <span style={{display:'inline-flex', width:size, height:size*0.7, borderRadius:3, overflow:'hidden', boxShadow:'inset 0 0 0 0.5px rgba(0,0,0,0.1)'}}>
      <span style={{flex:1, background:p[0]}}/>
      <span style={{flex:1, background:p[1]}}/>
      <span style={{flex:1, background:p[2]}}/>
    </span>
  );
};

window.DictoIcons = {
  IconBack, IconChevDown, IconChevRight, IconChevLeft, IconCheck, IconPlus, IconX,
  IconSearch, IconSparkles, IconPanel, IconInfo, IconUpload, IconLink, IconGlobe,
  IconBuilding, IconUser, IconHash, IconFile, IconFolder, IconUsers, IconTrash,
  IconSettings, IconDots, IconLock, IconTag, IconChart, IconTimeline,
  IconHeart, IconBolt, IconCrown, IconSignal, IconBook, IconLayers, IconSpark, IconEye,
  LogoOpenAI, LogoGemini, LogoClaude, LogoPerplexity, LogoMistral, LogoGrok, Flag,
};
