import emailIconRaw from "../../assets/comms/email.svg?raw";
import inpersonIconRaw from "../../assets/comms/inperson.svg?raw";
import noteIconRaw from "../../assets/comms/note.svg?raw";
import smsIconRaw from "../../assets/comms/sms.svg?raw";
import whatsappIconRaw from "../../assets/comms/whatsapp.svg?raw";
import callIconRaw from "../../assets/comms/call.svg?raw";
import inboundIconRaw from "../../assets/comms/inbound.svg?raw";
import outboundIconRaw from "../../assets/comms/outbound.svg?raw";
import internalIconRaw from "../../assets/comms/internal.svg?raw";

const TYPE_TONES = {
  email: { bg: "var(--badge-blue-bg)", color: "var(--badge-blue-text)" },
  whatsapp: { bg: "#dcfce7", color: "#166534" },
  call: { bg: "#fef9c3", color: "#854d0e" },
  sms: { bg: "#fef3c7", color: "#92400e" },
  note: { bg: "var(--bg-card-hover)", color: "var(--text-secondary)" },
  in_person: { bg: "#ede9fe", color: "#5b21b6" },
};

const DIR_TONES = {
  inbound: { bg: "#2c1a1a", color: "#ef4444", title: "Inbound" },
  outbound: { bg: "#13261a", color: "#16a34a", title: "Outbound" },
  internal: { bg: "#102335", color: "#4dabf7", title: "Internal" },
};

function IconWrap({ title, bg, color, size = 22, children }) {
  return (
    <span
      title={title}
      style={{
        width: size,
        height: size,
        borderRadius: "999px",
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: bg,
        color,
        flexShrink: 0,
      }}
    >
      {children}
    </span>
  );
}

function InlineRawSvg({ raw, size = 12, forceRootFill = true }) {
  if (!raw) return null;
  let normalized = raw
    .replace(/<\?xml[\s\S]*?\?>/gi, "")
    .replace(/<!DOCTYPE[\s\S]*?>/gi, "")
    .replace(/#000000/gi, "currentColor")
    .replace(/#000\b/gi, "currentColor")
    .replace(/\sfill="(?!none|currentColor|url\()[^"]*"/gi, ' fill="currentColor"')
    .replace(/\sstroke="(?!none|currentColor|url\()[^"]*"/gi, ' stroke="currentColor"')
    .replace(/fill\s*:\s*(?!none|currentColor|url\()[^;"]+/gi, "fill:currentColor")
    .replace(/stroke\s*:\s*(?!none|currentColor|url\()[^;"]+/gi, "stroke:currentColor");
  normalized = forceRootFill
    ? normalized.replace(/<svg\b/i, '<svg width="100%" height="100%" fill="currentColor"')
    : normalized.replace(/<svg\b/i, '<svg width="100%" height="100%"');
  return (
    <span
      aria-hidden="true"
      style={{
        width: size,
        height: size,
        display: "inline-flex",
      }}
      dangerouslySetInnerHTML={{ __html: normalized }}
    />
  );
}

const TYPE_ICON_SRC = {
  email: emailIconRaw,
  whatsapp: whatsappIconRaw,
  call: callIconRaw,
  sms: smsIconRaw,
  note: noteIconRaw,
  in_person: inpersonIconRaw,
};

const DIRECTION_ICON_SRC = {
  inbound: inboundIconRaw,
  outbound: outboundIconRaw,
  internal: internalIconRaw,
};

const TYPE_ICON_COLORS = {
  note: "#ffffff",
  whatsapp: "#06bd00",
  call: "#2c2c2c",
  sms: "#002981",
};

function TypeSvg({ type }) {
  const src = TYPE_ICON_SRC[type];
  if (src) {
    return <InlineRawSvg raw={src} />;
  }
  const props = { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.9, strokeLinecap: "round", strokeLinejoin: "round" };
  // Fallback for missing custom icon files (e.g. call.svg).
  if (type === "call") {
    return <svg {...props}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.4 19.4 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1.8.4 1.6.7 2.3a2 2 0 0 1-.5 2.1L8 9.3a16 16 0 0 0 6.7 6.7l1.2-1.2a2 2 0 0 1 2.1-.5c.7.3 1.5.6 2.3.7A2 2 0 0 1 22 16.9Z"/></svg>;
  }
  return <svg {...props}><path d="M6 4h9l3 3v13H6z"/><path d="M15 4v4h4"/><path d="M9 13h6"/></svg>;
}

function DirSvg({ direction }) {
  const src = DIRECTION_ICON_SRC[direction];
  if (src) {
    return <InlineRawSvg raw={src} forceRootFill={false} />;
  }
  const props = { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  if (direction === "inbound") return <svg {...props}><path d="M20 4 9 15"/><path d="M9 6v9h9"/></svg>;
  if (direction === "outbound") return <svg {...props}><path d="m4 20 11-11"/><path d="M15 18V9H6"/></svg>;
  return <svg {...props}><path d="M7 7h10"/><path d="m13 3 4 4-4 4"/><path d="M17 17H7"/><path d="m11 13-4 4 4 4"/></svg>;
}

export function getCommTypeTone(type) {
  return TYPE_TONES[type] || TYPE_TONES.note;
}

export function CommTypeIconBadge({ type, size = 22 }) {
  const tone = getCommTypeTone(type);
  const iconColor = TYPE_ICON_COLORS[type] || tone.color;
  return (
    <IconWrap title={type} bg={tone.bg} color={iconColor} size={size}>
      <TypeSvg type={type} />
    </IconWrap>
  );
}

export function CommDirectionIcon({ direction, size = 22 }) {
  const tone = DIR_TONES[direction] || DIR_TONES.internal;
  return (
    <span title={tone.title} style={{ color: tone.color, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
      <DirSvg direction={direction} />
    </span>
  );
}
