import type { Meta, StoryObj } from "@storybook/nextjs-vite";
import type React from "react";

import { EscalationOfferMessage } from "../components/chat/escalation-offer-message";

/**
 * `escalation_offer` message segment — Fae asking the client to confirm a
 * handoff to a human technician (Figma: fae chat › "escalation to admin").
 *
 * Renders THROUGH the client approval card rather than reimplementing it, so
 * it is pixel-identical to `Chat/Client/ApprovalRequestMessage` down to the
 * Approve/Reject labels and the resolved pill. What differs is the wiring:
 * approve/reject call the ticket-escalation GraphQL mutations, never the
 * tool-approval endpoint — which is why it is a distinct segment type.
 *
 * The body copy is backend-fixed; the client never composes it. `origin`
 * (TOOL / MANUAL / a trigger reason) is decoded for telemetry only — every
 * origin renders the same card.
 */

const OFFER_TEXT =
	"Having issues with the AI assistant? This ticket can be handed off to a technician. Fae will no longer respond in this conversation. A technician will review the ticket and reply when available.";

const baseData = { offerId: "offer-1", text: OFFER_TEXT, origin: "MANUAL" };

const plainDecorator = (Story: React.ComponentType) => (
	<div style={{ maxWidth: 600, background: "var(--color-bg)" }} className="p-4">
		<Story />
	</div>
);

const meta = {
	title: "Chat/Client/EscalationOfferMessage",
	component: EscalationOfferMessage,
	tags: ["autodocs"],
	parameters: {
		docs: {
			description: {
				component:
					"Renders an `escalation_offer` segment: the backend-fixed handoff prompt with Approve/Reject, or a resolved status pill. Approve performs the handoff (ticket → Tech Required, Fae goes silent); Reject just records the choice.",
			},
		},
	},
	decorators: [plainDecorator],
} satisfies Meta<typeof EscalationOfferMessage>;

export default meta;
type Story = StoryObj<typeof meta>;

/** Pending — the client has not decided yet. */
export const Pending: Story = {
	args: {
		data: baseData,
		status: "pending",
		onApprove: () => {},
		onReject: () => {},
	},
};

/** Approved — the handoff ran. Paired in the thread with `TicketEscalatedMessage`. */
export const ApprovedByUser: Story = {
	args: { data: baseData, status: "approved", resolvedByName: "John Smith" },
};

/** Declined — the client chose to keep working with Fae. */
export const DeclinedByUser: Story = {
	args: { data: baseData, status: "rejected", resolvedByName: "John Smith" },
};

/**
 * Superseded — the client typed a new message over the pending offer, which
 * the backend treats as declining it. Maps onto the shared `cancelled` status.
 */
export const Superseded: Story = {
	args: { data: baseData, status: "cancelled", resolvedByName: "John Smith" },
};

/** Raised by Fae's own `escalateToHuman` tool call rather than the header action. */
export const FromToolCall: Story = {
	args: {
		data: { ...baseData, origin: "TOOL" },
		status: "pending",
		onApprove: () => {},
		onReject: () => {},
	},
};