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

import { TicketEscalatedMessage } from "../components/chat/ticket-escalated-message";

/**
 * `ticket_escalated` message segment — the handoff receipt (Figma:
 * `ai-assistant-info`, type=escalation).
 *
 * A first-class block on the wire, NOT something the client infers from an
 * escalation offer's state, so it also covers the inactivity auto-escalation —
 * a path that raises no offer at all.
 *
 * The body is whatever the backend authored, so the reason it gives stays
 * server-side: the card never branches on `data.reason`, which is why a reason
 * added server-side needs no client change. The body WRAPS rather than
 * truncating as the mock does — see the component for why — so the block is
 * 72px only while the text fits two lines.
 */

const baseData = {
	ticketId: "68a1f0c2b3d4e5f6a7b8c9d0",
	ticketNumber: 1002,
	reason: "INACTIVITY",
	text: "Automatically escalated to a human technician because the conversation had no new messages for an extended period.",
};

/** Fixed so the timestamp doesn't churn between snapshots. */
const TIMESTAMP = new Date("2026-08-07T14:47:00");

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

const meta = {
	title: "Chat/Client/TicketEscalatedMessage",
	component: TicketEscalatedMessage,
	tags: ["autodocs"],
	parameters: {
		docs: {
			description: {
				component:
					"Renders a `TICKET_ESCALATED` block: a bordered info tile, the fixed 'Handed Off to a Technician' title, the message timestamp, and the backend's explanation.",
			},
		},
	},
	decorators: [plainDecorator],
} satisfies Meta<typeof TicketEscalatedMessage>;

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

/** The inactivity auto-escalation — the only reason the wire defines today. */
export const Inactivity: Story = {
	args: { data: baseData, timestamp: TIMESTAMP },
};

/**
 * `text` is nullable on the wire; the card falls back to the design's generic
 * line rather than rendering an empty body.
 */
export const NoBodyFallback: Story = {
	args: { data: { ...baseData, text: undefined }, timestamp: TIMESTAMP },
};

/** No timestamp — the row collapses to title-only, body unchanged. */
export const WithoutTimestamp: Story = {
	args: { data: baseData },
};

/** Long explanation — wraps and the block grows; nothing is clipped. */
export const LongBody: Story = {
	args: {
		data: {
			...baseData,
			text: "Automatically escalated to a human technician because the conversation had no new messages for an extended period while the ticket was still assigned to the AI assistant, and no diagnostic step produced a resolution.",
		},
		timestamp: TIMESTAMP,
	},
};

/**
 * A reason the client has never seen. The open `TicketEscalationReason` union
 * plus rendering from `text` mean a reason added server-side needs no client
 * change — this story is the regression guard for that.
 */
export const UnknownReason: Story = {
	args: {
		data: {
			...baseData,
			reason: "USER_REQUESTED",
			text: "Escalated at the user's request.",
		},
		timestamp: TIMESTAMP,
	},
};