Message

import {
  Message,
  MessageAvatar,
  MessageBubble,
  MessageBubbleContent,
  MessageContent,
  MessageFile,
  MessageFooter,
  MessageGroup,
  MessageHeader,
  MessageLink,
  MessageReactions,
  MessageSticker,
  MessageTime,
} from "@/components/ui/hiip-ui/message";

// Placeholder marks, not brand assets: every image and icon in these parts is a
// prop, so the demo supplies plain shapes rather than shipping someone's logo
// inside a registry payload.
function PlayPlate() {
  return (
    <div className="flex aspect-video w-full items-center justify-center bg-foreground">
      <svg viewBox="0 0 24 24" className="size-10 fill-background" role="img">
        <title>Video</title>
        <path d="M8 5v14l11-7z" />
      </svg>
    </div>
  );
}

function DocIcon() {
  return (
    <svg viewBox="0 0 24 24" className="fill-primary" role="img">
      <title>Document</title>
      <path d="M6 2h8l4 4v16H6z" opacity="0.25" />
      <path d="M8 12h8v1.5H8zm0 3h8v1.5H8zm0 3h5v1.5H8z" />
    </svg>
  );
}

function MessageDemo() {
  return (
    <MessageGroup className="w-full max-w-sm">
      {/* `variant` on the ROW, not on each bubble: one author, one fill, and a
          grouped run that cannot drift message by message. */}
      <Message variant="received">
        <MessageAvatar className="size-8 text-xs">CR</MessageAvatar>
        <MessageContent>
          {/* Name then time, written once. The header mirrors itself on the
              outgoing row below, so the same order reads correctly on both. */}
          <MessageHeader>
            Creator
            <span className="font-normal text-muted-foreground">
              18 days ago
            </span>
          </MessageHeader>
          <MessageBubble>
            <MessageBubbleContent>
              Can I still join the campaign?
            </MessageBubbleContent>
          </MessageBubble>
          {/* A grouped run: one author line, and only the LAST bubble carries
              a time. */}
          <MessageBubble>
            <MessageBubbleContent>
              Mình cf nha
              <MessageTime dateTime="2026-08-27">18 days ago</MessageTime>
            </MessageBubbleContent>
            {/* No `align`: it follows the row, so the badge hangs on the side
                facing the thread rather than out at the margin. */}
            <MessageReactions>❤️</MessageReactions>
          </MessageBubble>
        </MessageContent>
      </Message>

      <Message align="end" variant="sent">
        <MessageAvatar className="size-8 bg-primary text-xs text-primary-foreground">
          OP
        </MessageAvatar>
        <MessageContent>
          <MessageHeader>
            Operator
            <span className="font-normal text-muted-foreground">
              18 days ago
            </span>
          </MessageHeader>
          <MessageBubble>
            <MessageBubbleContent>
              You can — briefing is open until Friday.
            </MessageBubbleContent>
          </MessageBubble>
          <MessageBubble>
            <MessageBubbleContent>
              <MessageFile
                icon={<DocIcon />}
                name="sample-document-with-a-long-filename.pdf"
                meta="PDF · 1004.3 KB"
                action={
                  <button
                    type="button"
                    aria-label="Download sample-document-with-a-long-filename.pdf"
                    className="flex size-9 items-center justify-center rounded-full bg-foreground text-background"
                  >
                    <svg
                      viewBox="0 0 24 24"
                      className="size-4 fill-current"
                      role="img"
                    >
                      <title>Download</title>
                      <path d="M12 3v10.6l3.3-3.3 1.4 1.4L12 17.4l-4.7-5.7 1.4-1.4 3.3 3.3V3zM5 19h14v2H5z" />
                    </svg>
                  </button>
                }
              />
              <MessageTime dateTime="2026-09-08">6 days ago</MessageTime>
            </MessageBubbleContent>
          </MessageBubble>
          {/* The footer is the STATUS slot, now that the timestamp lives inside
              the bubble. Two different facts, so two different places. */}
          <MessageFooter>Seen</MessageFooter>
        </MessageContent>
      </Message>

      {/* No avatar and no header — a row is still a row without them. */}
      <Message variant="received">
        <MessageContent>
          <MessageBubble>
            <MessageBubbleContent>
              <MessageLink
                href="https://example.com/media/0000000000000000000"
                media={<PlayPlate />}
                site="example.com"
                title="Watch the campaign cut"
                description="A 30-second edit for the brand channel, ready to re-upload."
              />
            </MessageBubbleContent>
          </MessageBubble>
        </MessageContent>
      </Message>

      {/* A lone bubble in the row: `align="end"` reverses the row, so it packs
          right with no content column to put it there. */}
      <Message align="end">
        <MessageBubble>
          <MessageSticker>
            <span className="block p-4 text-5xl leading-none">🎉</span>
            <MessageTime dateTime="2026-08-14">a month ago</MessageTime>
          </MessageSticker>
        </MessageBubble>
      </Message>
    </MessageGroup>
  );
}