Callout

import { ui } from "@rezi-ui/core";

// Basic informational callout
ui.callout("This is an important message")

// With semantic variant
ui.callout("Operation completed successfully", { variant: "success" })
ui.callout("Please review before continuing", { variant: "warning" })
ui.callout("An error occurred", { variant: "error" })

// With title and custom icon
ui.callout("Check for updates regularly", {
  variant: "info",
  title: "Pro Tip",
  icon: "ui.lightbulb",
})

function CalloutShowcase() {
  return ui.column({ gap: 1, p: 1 }, [
    ui.text("Callout Variants", { variant: "heading" }),
    ui.divider(),
    
    ui.callout("This is an informational message.", { variant: "info" }),
    ui.callout("Operation completed successfully.", { variant: "success" }),
    ui.callout("Please review before continuing.", { variant: "warning" }),
    ui.callout("An error occurred during processing.", { variant: "error" }),
  ]);
}

function TitledCallouts() {
  return ui.column({ gap: 1 }, [
    ui.callout("New features are available in this release.", {
      variant: "info",
      title: "What's New",
    }),
    
    ui.callout("Your changes have been saved to the server.", {
      variant: "success",
      title: "Saved",
    }),
    
    ui.callout("This action cannot be undone. Please confirm before proceeding.", {
      variant: "warning",
      title: "Warning",
    }),
    
    ui.callout("Unable to connect to the database. Check your connection.", {
      variant: "error",
      title: "Connection Failed",
    }),
  ]);
}

type FormErrors = readonly string[];

function FormErrorCallout(errors: FormErrors) {
  if (errors.length === 0) return null;
  
  const message = errors.length === 1
    ? errors[0]
    : `${errors.length} validation errors:\n${errors.map(e => `• ${e}`).join("\n")}`;
  
  return ui.callout(message, {
    variant: "error",
    title: "Validation Failed",
  });
}

type ApiResponse = 
  | { success: true; message: string }
  | { success: false; error: string };

function ApiResponseCallout(response: ApiResponse | null) {
  if (!response) return null;
  
  if (response.success) {
    return ui.callout(response.message, {
      variant: "success",
      title: "Success",
    });
  }
  
  return ui.callout(response.error, {
    variant: "error",
    title: "Error",
  });
}

type SystemAlert = {
  id: string;
  severity: "info" | "warning" | "error";
  title: string;
  message: string;
  timestamp: Date;
};

function SystemAlerts(alerts: readonly SystemAlert[]) {
  if (alerts.length === 0) {
    return ui.callout("All systems operational", { variant: "success" });
  }
  
  return ui.column({ gap: 1 }, [
    ui.text("System Alerts", { variant: "heading" }),
    ...alerts.map((alert) =>
      ui.callout(alert.message, {
        key: alert.id,
        variant: alert.severity,
        title: `${alert.title} — ${alert.timestamp.toLocaleTimeString()}`,
      })
    ),
  ]);
}

type DeploymentStatus = 
  | { state: "pending"; message: string }
  | { state: "progress"; message: string; step: string }
  | { state: "success"; message: string }
  | { state: "failed"; message: string; error: string };

function DeploymentStatusCallout(status: DeploymentStatus) {
  switch (status.state) {
    case "pending":
      return ui.callout(status.message, {
        variant: "info",
        title: "Deployment Queued",
      });
    
    case "progress":
      return ui.callout(`${status.message}\nCurrent step: ${status.step}`, {
        variant: "info",
        title: "Deploying",
      });
    
    case "success":
      return ui.callout(status.message, {
        variant: "success",
        title: "Deployment Complete",
      });
    
    case "failed":
      return ui.callout(`${status.message}\nError: ${status.error}`, {
        variant: "error",
        title: "Deployment Failed",
      });
  }
}

function SetupWizard(step: number) {
  return ui.column({ gap: 1, p: 1 }, [
    ui.text(`Setup - Step ${step} of 3`, { variant: "heading" }),
    
    step === 1 && ui.callout(
      "Enter your API key from the dashboard settings page.",
      { variant: "info", title: "Tip" }
    ),
    
    step === 2 && ui.callout(
      "Select the regions where your application will be deployed.",
      { variant: "info", title: "Configuration" }
    ),
    
    step === 3 && ui.callout(
      "Review your settings before completing setup. You can change these later.",
      { variant: "warning", title: "Review" }
    ),
  ]);
}

function DangerousActionConfirm(state: { showWarning: boolean }) {
  return ui.column({ gap: 1 }, [
    ui.text("Delete Project", { variant: "heading" }),
    
    state.showWarning && ui.callout(
      "This will permanently delete the project and all associated data. This action cannot be undone.",
      {
        variant: "error",
        title: "Permanent Deletion",
      }
    ),
    
    ui.actions([
      ui.button({ id: "cancel", label: "Cancel" }),
      ui.button({
        id: "delete",
        label: "Delete",
        intent: "danger",
      }),
    ]),
  ]);
}

type Feature = {
  name: string;
  description: string;
  isNew: boolean;
};

function FeatureAnnouncement(feature: Feature) {
  return ui.column({ gap: 1 }, [
    feature.isNew && ui.callout(
      `${feature.name}: ${feature.description}`,
      {
        variant: "info",
        title: "New Feature",
        icon: "ui.sparkles",
      }
    ),
  ]);
}

type Maintenance = {
  scheduled: Date;
  duration: number;
  description: string;
};

function MaintenanceNotice(maintenance: Maintenance | null) {
  if (!maintenance) return null;
  
  const now = new Date();
  const hoursUntil = (maintenance.scheduled.getTime() - now.getTime()) / (1000 * 60 * 60);
  
  if (hoursUntil < 0) {
    return ui.callout(
      "System maintenance is in progress. Some features may be unavailable.",
      {
        variant: "warning",
        title: "Maintenance in Progress",
      }
    );
  }
  
  if (hoursUntil < 24) {
    return ui.callout(
      `${maintenance.description}\nScheduled: ${maintenance.scheduled.toLocaleString()}\nDuration: ${maintenance.duration} hours`,
      {
        variant: "warning",
        title: "Upcoming Maintenance",
      }
    );
  }
  
  return null;
}

function CalloutWithActions(state: { dismissed: boolean }) {
  if (state.dismissed) return null;
  
  return ui.column({ gap: 1 }, [
    ui.callout(
      "A new version is available with important security fixes.",
      {
        variant: "warning",
        title: "Update Available",
      }
    ),
    ui.actions([
      ui.button({ id: "dismiss", label: "Dismiss", intent: "secondary" }),
      ui.button({ id: "update", label: "Update Now", intent: "primary" }),
    ]),
  ]);
}

// Good: Appropriate variant for message type
ui.callout("File uploaded successfully", { variant: "success" })
ui.callout("Session will expire in 5 minutes", { variant: "warning" })
ui.callout("Failed to save changes", { variant: "error" })

// Avoid: Wrong variant for message severity
// Don't use "error" for non-critical messages