/* ─────────────────────────────────────────────────────────────
   components/azos-ui.jsx
   shadcn/ui-style components, re-branded to EXACTLY match the
   real Azos Design System as used in production Figma frames.

   Key corrections vs the first draft (reviewed 03/2026):
   - Button font is Dazzed BOLD 700 (not SemiBold 600).
   - Primary/Outline button height is 48 px, padding 16 px.
   - Cards are FLAT: 2 px solid bg-muted border, NO shadow.
   - Status chips are 4 px radius, Dazzed Bold 12 px, with an
     icon/dot, not uppercase caption-style.
   - "Link CTA" has NO underline, just green Bold 12/14 + chevron.
   - Dialog chrome is flat white with 0 radius (no shadow/rounded).
   - Soft-green buttons (bg-azos-green-soft + text deep green) are
     a 1st-class variant — used for inline CTAs ("Ver mais"-adjacent).
   - Sidebar uses bg-azos-green-deep with white Bold 14 px items.

   Load with: <script type="text/babel" src="components/azos-ui.jsx"></script>
   ───────────────────────────────────────────────────────────── */

/* ── cn: class merge helper ── */
const cn = (...parts) =>
  parts
    .flat(Infinity)
    .filter(Boolean)
    .join(" ")
    .replace(/\s+/g, " ")
    .trim();

/* ════════════════ BUTTON ════════════════════════════════════ */
/* Variants, mapped to Figma symbol names:
     default       = "Type=Primary"   (solid green, white Bold label)
     outline       = "Type=Outline"   (1 px ink border)
     soft          = "Type=Tertiary"  (soft-green bg, deep-green label)
     ghost         = no chrome
     link          = "Type=Link CTA"  (deep-green Bold, no underline)
     destructive   = solid red for destructive actions
     secondary     = ink-black filled (rare, used for dark-CTA blocks)
   Sizes:
     default = 48 px tall, 16 px horizontal padding  (matches symbols)
     sm      = 40 px tall, 12 px horizontal padding
     lg      = 56 px tall, 24 px horizontal padding
     icon    = 48 px square, fully round
*/
const buttonVariants = {
  variant: {
    default:
      "bg-[rgb(0,176,0)] text-white hover:bg-[rgb(0,150,0)]",
    outline:
      "bg-transparent text-[rgb(9,10,11)] border border-[rgb(9,10,11)] hover:bg-[rgb(9,10,11)] hover:text-white transition-colors",
    soft:
      "bg-[rgb(194,235,194)] text-[rgb(0,87,0)] hover:bg-[rgb(170,220,170)]",
    ghost:
      "bg-transparent text-[rgb(9,10,11)] hover:bg-[rgb(243,244,246)]",
    link:
      "bg-transparent text-[rgb(0,176,0)] hover:text-[rgb(0,150,0)] px-0 h-auto inline-flex",
    destructive:
      "bg-[rgb(255,68,68)] text-white hover:bg-[rgb(230,50,50)]",
    secondary:
      "bg-[rgb(9,10,11)] text-white hover:bg-[rgb(40,45,55)]",
  },
  size: {
    default: "h-12 px-4 text-[14px] font-bold tracking-[0]",
    sm:      "h-10 px-3 text-[12px] font-bold",
    lg:      "h-14 px-6 text-[16px] font-bold",
    icon:    "h-12 w-12 p-0 rounded-full",
  },
};

const Button = React.forwardRef(({
  variant = "default",
  size = "default",
  className = "",
  asChild = false,
  children,
  ...props
}, ref) => {
  const Comp = asChild ? "span" : "button";
  const isLink = variant === "link";
  return (
    <Comp
      ref={ref}
      className={cn(
        "inline-flex items-center justify-center gap-2 whitespace-nowrap",
        !isLink && "rounded-none",
        "font-bold font-sans leading-[1.44]",
        "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(0,176,0)] focus-visible:ring-offset-2",
        "disabled:pointer-events-none disabled:opacity-50",
        buttonVariants.variant[variant] || buttonVariants.variant.default,
        buttonVariants.size[size] || buttonVariants.size.default,
        className
      )}
      {...props}
    >
      {children}
    </Comp>
  );
});

/* ════════════════ ICON BUTTON (round, like sidebar nav eyeball) ═ */
const IconButton = React.forwardRef(({ size = 40, tone = "neutral", className = "", children, ...props }, ref) => {
  const tones = {
    neutral: "bg-[rgb(208,212,220)] text-[rgb(9,10,11)] hover:bg-[rgb(180,185,195)]",
    green:   "bg-[rgb(0,176,0)] text-white hover:bg-[rgb(0,150,0)]",
    soft:    "bg-[rgb(194,235,194)] text-[rgb(0,87,0)] hover:bg-[rgb(170,220,170)]",
    ghost:   "bg-transparent text-[rgb(9,10,11)] hover:bg-[rgb(243,244,246)]",
  };
  return (
    <button
      ref={ref}
      style={{ width: size, height: size }}
      className={cn(
        "inline-flex items-center justify-center rounded-full shrink-0 transition-colors",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(0,176,0)] focus-visible:ring-offset-2",
        tones[tone],
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
});

/* ════════════════ CARD ══════════════════════════════════════ */
/* Real cards are FLAT: white bg, 2 px muted border, 0 radius, 16 px pad.
   Use variant="section" for slightly larger pad (24 px). */
const Card = ({ className = "", variant = "default", ...props }) => (
  <div
    className={cn(
      "rounded-none bg-white",
      variant !== "plain" && "border-2 border-[rgb(243,244,246)]",
      variant === "default" && "text-[rgb(9,10,11)]",
      className
    )}
    {...props}
  />
);
const CardHeader = ({ className = "", ...props }) => (
  <div className={cn("flex flex-col gap-1 p-4 pb-3", className)} {...props} />
);
const CardTitle = ({ className = "", ...props }) => (
  /* Dazzed Bold 14 px, black — matches h7-like card heading in Figma. */
  <h3
    className={cn("text-[14px] font-bold leading-[1.44] text-black font-sans tracking-[0]", className)}
    {...props}
  />
);
const CardDescription = ({ className = "", ...props }) => (
  <p className={cn("text-[12px] leading-[1.5] font-medium text-[rgb(80,89,105)] font-sans", className)} {...props} />
);
const CardContent = ({ className = "", ...props }) => (
  <div className={cn("p-4 pt-0", className)} {...props} />
);
const CardFooter = ({ className = "", ...props }) => (
  <div className={cn("flex items-center p-4 pt-0", className)} {...props} />
);

/* ════════════════ INPUT ═════════════════════════════════════ */
/* 48 px tall, 1 px muted border, 12 px horizontal, Dazzed Medium 14. */
const Input = React.forwardRef(({ className = "", type = "text", ...props }, ref) => (
  <input
    ref={ref}
    type={type}
    className={cn(
      "flex h-12 w-full rounded-none border border-[rgb(208,212,220)] bg-white px-3",
      "text-[14px] font-medium font-sans text-[rgb(9,10,11)] placeholder:text-[rgb(163,170,185)]",
      "focus-visible:outline-none focus-visible:border-[rgb(0,176,0)] focus-visible:ring-2 focus-visible:ring-[rgb(0,176,0)]/20 focus-visible:ring-offset-0",
      "disabled:cursor-not-allowed disabled:opacity-50",
      className
    )}
    {...props}
  />
));

const Label = ({ className = "", ...props }) => (
  <label
    className={cn(
      "text-[12px] font-bold font-sans leading-[1.5] text-[rgb(9,10,11)]",
      "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
      className
    )}
    {...props}
  />
);

/* ════════════════ BADGE ═════════════════════════════════════ */
/* Dazzed Bold 12 px, 4 px radius, optional leading dot.
   Status = Green  → bg soft-green, text deep-green
   Status = Yellow → bg yellow-soft, text brown-ish (rgb 95,72,0)
   Status = Red    → bg red-soft, text deep red
   Status = Gray   → bg muted, text slate
   Status = Dark   → bg ink, text white
*/
const badgeVariants = {
  default:     "bg-[rgb(194,235,194)] text-[rgb(0,87,0)]",   /* Status=Green  */
  success:     "bg-[rgb(194,235,194)] text-[rgb(0,87,0)]",
  warning:     "bg-[rgb(252,223,132)] text-[rgb(95,72,0)]",
  destructive: "bg-[rgb(255,217,217)] text-[rgb(121,20,7)]",
  info:        "bg-[rgb(217,219,255)] text-[rgb(31,38,178)]",
  neutral:     "bg-[rgb(243,244,246)] text-[rgb(80,89,105)]",
  outline:     "bg-transparent border border-[rgb(9,10,11)] text-[rgb(9,10,11)]",
  dark:        "bg-[rgb(9,10,11)] text-white",
};

const Badge = ({ variant = "default", dot = false, className = "", children, ...props }) => (
  <span
    className={cn(
      "inline-flex items-center gap-1.5 rounded-[4px] px-2 h-6",
      "text-[12px] font-bold font-sans leading-[1.5]",
      badgeVariants[variant] || badgeVariants.default,
      className
    )}
    {...props}
  >
    {dot && (
      <span className="inline-block w-1.5 h-1.5 rounded-full bg-current" />
    )}
    {children}
  </span>
);

/* ════════════════ COUNTER PILL (small pill like "2", "10") ══ */
/* fully round, green by default, white Bold 10px — matches
   "Type=Text only, State=On" symbol used inline next to titles. */
const CounterPill = ({ tone = "green", className = "", children, ...props }) => {
  const tones = {
    green:  "bg-[rgb(0,176,0)] text-white",
    yellow: "bg-[rgb(252,223,132)] text-[rgb(95,72,0)]",
    red:    "bg-[rgb(255,68,68)] text-white",
    neutral:"bg-[rgb(243,244,246)] text-[rgb(80,89,105)]",
  };
  return (
    <span
      className={cn(
        "inline-flex items-center justify-center min-w-[24px] h-6 px-2 rounded-full",
        "text-[10px] font-bold font-sans leading-none",
        tones[tone],
        className
      )}
      {...props}
    >
      {children}
    </span>
  );
};

/* ════════════════ ALERT ═════════════════════════════════════ */
/* Soft bg, semantic color, icon to the left. No hard left-border. */
const alertVariants = {
  default:     "bg-[rgb(243,244,246)] text-[rgb(80,89,105)]",
  success:     "bg-[rgb(237,249,237)] text-[rgb(0,87,0)]",
  warning:     "bg-[rgb(247,240,191)] text-[rgb(95,72,0)]",
  destructive: "bg-[rgb(255,229,229)] text-[rgb(121,20,7)]",
  info:        "bg-[rgb(237,249,237)] text-[rgb(0,87,0)]",
};

const Alert = ({ variant = "default", className = "", ...props }) => (
  <div
    role="alert"
    className={cn(
      "relative w-full rounded-none p-4 flex gap-3 items-start",
      alertVariants[variant] || alertVariants.default,
      className
    )}
    {...props}
  />
);
const AlertTitle = ({ className = "", ...props }) => (
  <h5
    className={cn("text-[14px] font-bold font-sans leading-[1.44] mb-0.5", className)}
    {...props}
  />
);
const AlertDescription = ({ className = "", ...props }) => (
  <div className={cn("text-[14px] font-medium font-sans leading-[1.44] opacity-90", className)} {...props} />
);

/* ════════════════ SEPARATOR ═════════════════════════════════ */
const Separator = ({ orientation = "horizontal", className = "", ...props }) => (
  <div
    role="separator"
    className={cn(
      "bg-[rgb(243,244,246)] shrink-0",
      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
      className
    )}
    {...props}
  />
);

/* ════════════════ TABS ══════════════════════════════════════ */
/* 2 px green underline for active, slate for inactive, Dazzed Bold 14. */
const TabsContext = React.createContext(null);

const Tabs = ({ defaultValue, value: controlledValue, onValueChange, children, className = "", ...props }) => {
  const [internal, setInternal] = React.useState(defaultValue);
  const value = controlledValue ?? internal;
  const setValue = (v) => {
    setInternal(v);
    onValueChange?.(v);
  };
  return (
    <TabsContext.Provider value={{ value, setValue }}>
      <div className={cn("", className)} {...props}>{children}</div>
    </TabsContext.Provider>
  );
};

const TabsList = ({ className = "", ...props }) => (
  <div
    role="tablist"
    className={cn(
      "flex items-center border-b border-[rgb(208,212,220)] w-full",
      className
    )}
    {...props}
  />
);

const TabsTrigger = ({ value, className = "", children, ...props }) => {
  const ctx = React.useContext(TabsContext);
  const active = ctx?.value === value;
  return (
    <button
      role="tab"
      aria-selected={active}
      onClick={() => ctx?.setValue(value)}
      className={cn(
        "inline-flex items-center justify-center whitespace-nowrap px-4 h-12",
        "text-[14px] font-bold font-sans transition-colors",
        "focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        active
          ? "text-[rgb(0,87,0)] border-b-2 border-[rgb(0,176,0)] -mb-px"
          : "text-[rgb(80,89,105)] hover:text-[rgb(9,10,11)]",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
};

const TabsContent = ({ value, className = "", ...props }) => {
  const ctx = React.useContext(TabsContext);
  if (ctx?.value !== value) return null;
  return (
    <div
      role="tabpanel"
      className={cn("mt-4 focus-visible:outline-none", className)}
      {...props}
    />
  );
};

/* ════════════════ SWITCH ════════════════════════════════════ */
/* 44×24 pill, green on, muted off. */
const Switch = ({ checked, defaultChecked = false, onCheckedChange, className = "", ...props }) => {
  const [internal, setInternal] = React.useState(defaultChecked);
  const isOn = checked ?? internal;
  const toggle = () => {
    setInternal(!isOn);
    onCheckedChange?.(!isOn);
  };
  return (
    <button
      role="switch"
      aria-checked={isOn}
      onClick={toggle}
      className={cn(
        "peer inline-flex w-11 h-6 shrink-0 cursor-pointer items-center rounded-full",
        "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(0,176,0)] focus-visible:ring-offset-2",
        "disabled:cursor-not-allowed disabled:opacity-50",
        isOn ? "bg-[rgb(0,176,0)]" : "bg-[rgb(208,212,220)]",
        className
      )}
      {...props}
    >
      <span
        className={cn(
          "pointer-events-none block w-5 h-5 rounded-full bg-white transition-transform",
          isOn ? "translate-x-[22px]" : "translate-x-0.5"
        )}
      />
    </button>
  );
};

/* ════════════════ CHECKBOX ══════════════════════════════════ */
/* 20×20 square, 1.5 px ink border, green fill on. */
const Checkbox = ({ checked, defaultChecked = false, onCheckedChange, className = "", ...props }) => {
  const [internal, setInternal] = React.useState(defaultChecked);
  const isOn = checked ?? internal;
  const toggle = () => {
    setInternal(!isOn);
    onCheckedChange?.(!isOn);
  };
  return (
    <button
      role="checkbox"
      aria-checked={isOn}
      onClick={toggle}
      className={cn(
        "peer w-5 h-5 shrink-0 rounded-none border-[1.5px] flex items-center justify-center transition-colors",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(0,176,0)] focus-visible:ring-offset-2",
        "disabled:cursor-not-allowed disabled:opacity-50",
        isOn
          ? "bg-[rgb(0,176,0)] border-[rgb(0,176,0)]"
          : "bg-white border-[rgb(163,170,185)]",
        className
      )}
      {...props}
    >
      {isOn && (
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 6 9 17 4 12" />
        </svg>
      )}
    </button>
  );
};

/* ════════════════ RADIO ═════════════════════════════════════ */
const Radio = ({ checked = false, onChange, className = "", ...props }) => (
  <button
    role="radio"
    aria-checked={checked}
    onClick={onChange}
    className={cn(
      "w-5 h-5 shrink-0 rounded-full border-[1.5px] flex items-center justify-center transition-colors",
      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(0,176,0)] focus-visible:ring-offset-2",
      checked ? "border-[rgb(0,176,0)]" : "border-[rgb(163,170,185)]",
      className
    )}
    {...props}
  >
    {checked && <span className="w-2.5 h-2.5 rounded-full bg-[rgb(0,176,0)]" />}
  </button>
);

/* ════════════════ AVATAR ════════════════════════════════════ */
/* Round, colored bg (defaults to muted w/ ink text, like the
   "ES" company chip in the dashboard header). */
const Avatar = ({ initials, src, size = 32, className = "", ...props }) => (
  <div
    style={{ width: size, height: size }}
    className={cn(
      "inline-flex shrink-0 overflow-hidden rounded-full",
      "bg-[rgb(208,212,220)] text-[rgb(9,10,11)]",
      "items-center justify-center text-[12px] font-bold font-sans uppercase",
      className
    )}
    {...props}
  >
    {src
      ? <img src={src} alt="" className="h-full w-full object-cover" />
      : <span>{initials}</span>}
  </div>
);

/* ════════════════ PROFILE PILL (header broker card) ═════════ */
/* Reproduces the "Empresa Social Corretora" pill in the dashboard. */
const ProfilePill = ({ initials, name, className = "", ...props }) => (
  <div
    className={cn(
      "inline-flex items-center gap-2 h-12 px-4 rounded-[4px] bg-[rgb(243,244,246)]",
      "cursor-pointer hover:bg-[rgb(228,230,234)] transition-colors",
      className
    )}
    {...props}
  >
    <Avatar initials={initials} size={32} />
    <span className="text-[12px] font-bold font-sans text-[rgb(9,10,11)] truncate max-w-[140px]">
      {name}
    </span>
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-[rgb(9,10,11)]">
      <polyline points="6 9 12 15 18 9" />
    </svg>
  </div>
);

/* ════════════════ AI PILL ("Pergunte-me qualquer coisa…") ═══ */
const AIPill = ({ placeholder = "Pergunte-me qualquer coisa…", className = "", ...props }) => (
  <div
    className={cn(
      "inline-flex items-center gap-2 h-12 px-4 rounded-[4px] bg-[rgb(237,249,237)]",
      "cursor-pointer hover:bg-[rgb(220,242,220)] transition-colors",
      className
    )}
    {...props}
  >
    {/* 4-point sparkle icon */}
    <svg width="20" height="20" viewBox="0 0 20 20" fill="rgb(0,87,0)">
      <path d="M10 2 L11.2 8.8 L18 10 L11.2 11.2 L10 18 L8.8 11.2 L2 10 L8.8 8.8 Z" />
    </svg>
    <span className="text-[12px] font-bold font-sans text-[rgb(0,87,0)]">
      {placeholder}
    </span>
  </div>
);

/* ════════════════ LINK CTA (inline "Ver mais →") ═══════════ */
/* Green Bold text + chevron. NO underline. */
const LinkCTA = ({ children, className = "", size = "sm", ...props }) => {
  const sizes = {
    sm: "text-[12px]",
    md: "text-[14px]",
  };
  return (
    <a
      className={cn(
        "inline-flex items-center gap-1 font-bold font-sans leading-[1.5]",
        "text-[rgb(0,176,0)] hover:text-[rgb(0,150,0)] cursor-pointer",
        sizes[size],
        className
      )}
      {...props}
    >
      {children}
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="9 18 15 12 9 6" />
      </svg>
    </a>
  );
};

/* ════════════════ DIALOG ════════════════════════════════════ */
/* Flat white, 0 radius, 24 px padding. Overlay = ink 60% alpha. */
const Dialog = ({ open, onOpenChange, children }) => {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      <div
        className="fixed inset-0 bg-[rgb(9,10,11)]/50 animate-fade-in"
        onClick={() => onOpenChange?.(false)}
      />
      <div className="relative z-10 max-w-[560px] w-[calc(100%-32px)] animate-fade-in">
        {children}
      </div>
    </div>
  );
};
const DialogContent = ({ className = "", ...props }) => (
  <div
    className={cn(
      "bg-white text-[rgb(9,10,11)] rounded-none p-6",
      className
    )}
    {...props}
  />
);
const DialogHeader = ({ className = "", ...props }) => (
  <div className={cn("flex flex-col gap-2 mb-6", className)} {...props} />
);
const DialogTitle = ({ className = "", ...props }) => (
  <h3 className={cn("text-[20px] font-bold font-sans leading-[1.4] text-black", className)} {...props} />
);
const DialogDescription = ({ className = "", ...props }) => (
  <p className={cn("text-[14px] font-medium font-sans leading-[1.44] text-[rgb(80,89,105)]", className)} {...props} />
);
const DialogFooter = ({ className = "", ...props }) => (
  <div className={cn("flex justify-end gap-2 mt-6", className)} {...props} />
);
const DialogClose = ({ onClick, className = "", ...props }) => (
  <button
    onClick={onClick}
    aria-label="Fechar"
    className={cn(
      "absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full",
      "text-[rgb(9,10,11)] hover:bg-[rgb(243,244,246)] transition-colors",
      className
    )}
    {...props}
  >
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="6" />
      <line x1="18" y1="18" x2="6" y2="6" />
    </svg>
  </button>
);

/* ════════════════ PROGRESS BAR ══════════════════════════════ */
const Progress = ({ value = 0, tone = "green", className = "", ...props }) => {
  const tones = {
    green:  "bg-[rgb(0,176,0)]",
    yellow: "bg-[rgb(249,191,9)]",
    red:    "bg-[rgb(255,68,68)]",
  };
  return (
    <div
      className={cn("h-1.5 w-full bg-[rgb(243,244,246)] overflow-hidden rounded-full", className)}
      {...props}
    >
      <div
        className={cn("h-full transition-all", tones[tone])}
        style={{ width: `${Math.max(0, Math.min(100, value))}%` }}
      />
    </div>
  );
};

/* ════════════════ SIDEBAR NAV ITEM ══════════════════════════ */
/* Active = white text + Bold. Inactive = soft-green-ish light text. */
const SidebarItem = ({ active = false, icon, children, className = "", ...props }) => (
  <a
    className={cn(
      "flex items-center gap-4 h-10 px-0 cursor-pointer",
      "text-[14px] font-bold font-sans leading-[1.44]",
      active ? "text-white" : "text-[rgba(255,255,255,0.7)] hover:text-white",
      className
    )}
    {...props}
  >
    {icon && <span className="w-6 h-6 shrink-0 flex items-center justify-center">{icon}</span>}
    <span>{children}</span>
  </a>
);

/* ════════════════ EXPOSE TO WINDOW ══════════════════════════ */
Object.assign(window, {
  cn,
  Button, IconButton,
  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
  Input, Label,
  Badge, CounterPill,
  Alert, AlertTitle, AlertDescription,
  Separator,
  Tabs, TabsList, TabsTrigger, TabsContent,
  Switch, Checkbox, Radio,
  Avatar, ProfilePill, AIPill,
  LinkCTA,
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose,
  Progress,
  SidebarItem,
});