import type { Meta, StoryObj } from "@storybook/preact";
import { ToastContainer, showToast } from "./Toast";

const ICONS: Record<string, string> = { success: "✓", error: "✕", info: "ℹ", warning: "⚠" };
const BORDERS: Record<string, string> = { success: "rgba(34,197,94,0.4)", error: "rgba(239,68,68,0.4)", info: "rgba(59,130,246,0.4)", warning: "rgba(234,179,8,0.4)" };
const ICON_COLORS: Record<string, string> = { success: "#4ade80", error: "#f87171", info: "#60a5fa", warning: "#facc15" };

const meta: Meta = { title: "Global/Toast", component: ToastContainer };
export default meta;
type Story = StoryObj;

export const Interactive: Story = {
  render: () => (
    <div class="flex flex-wrap gap-2">
      <ToastContainer />
      <button class="px-3 py-1.5 text-xs rounded-lg bg-green-500/10 text-green-400" onClick={() => showToast("Record saved successfully.", "success", "Saved")}>Success</button>
      <button class="px-3 py-1.5 text-xs rounded-lg bg-red-500/10 text-red-400" onClick={() => showToast("Failed to delete record.", "error", "Error")}>Error</button>
      <button class="px-3 py-1.5 text-xs rounded-lg bg-blue-500/10 text-blue-400" onClick={() => showToast("3 records were updated.", "info")}>Info</button>
      <button class="px-3 py-1.5 text-xs rounded-lg bg-yellow-500/10 text-yellow-400" onClick={() => showToast("This action cannot be undone.", "warning", "Warning")}>Warning</button>
    </div>
  ),
};

export const AllVariants: Story = {
  render: () => (
    <div class="flex flex-col gap-3 max-w-sm">
      {(["success", "error", "info", "warning"] as const).map((type) => (
        <div key={type} class="flex items-start gap-2.5 px-4 py-3 rounded-[var(--z-radius-card)] shadow-lg" style={{ background: "var(--z-surface)", border: `1px solid ${BORDERS[type]}` }}>
          <span class="text-sm mt-0.5" style={{ color: ICON_COLORS[type] }}>{ICONS[type]}</span>
          <div>
            <p class="text-xs font-semibold mb-0.5" style={{ textTransform: "capitalize" }}>{type}</p>
            <p class="text-[var(--z-font-md)]" style={{ color: "var(--z-muted)" }}>This is a {type} toast message.</p>
          </div>
        </div>
      ))}
    </div>
  ),
};
