// ~/src/siteplane/components/attachment/attachment.tsx

"use client";

import * as React from "react";

import { cn } from "../../system/utils/cn";
import { slotClass } from "../../system/utils/slot-class";
import { Button, type ButtonBaseProps, type ButtonProps } from "../button";
import { KitButton } from "../button/button-internal";
import { MotionItem, MotionList, MotionShimmer } from "../motion";
import { ScrollArea } from "../scroll-area";

import "./attachment.css";

/**
 * Where an attachment is in its life: `idle` was picked and waits, `uploading`
 * and `processing` are under way (the name shimmers), `error` failed and
 * `done` is there. The AI SDK's file parts carry no state, so the app maps
 * its upload's own state to one of these words.
 */
export type AttachmentState =
  "idle" | "uploading" | "processing" | "error" | "done";

export type AttachmentSize = "sm" | "md";

export type AttachmentOrientation = "horizontal" | "vertical";

type AttachmentContextValue = {
  orientation: AttachmentOrientation;
  state: AttachmentState;
};

// The parts read the state and the orientation of their card. Outside a card
// they show as a finished, horizontal one.
const AttachmentContext = React.createContext<AttachmentContextValue>({
  orientation: "horizontal",
  state: "done",
});

export type AttachmentProps = React.ComponentProps<"div"> & {
  /** The upload state. It styles the card and shimmers the name while the file is on its way. */
  state?: AttachmentState | undefined;
  size?: AttachmentSize | undefined;
  /** `horizontal` puts the media beside the text; `vertical` stacks it above, for image cards. */
  orientation?: AttachmentOrientation | undefined;
};

/**
 * A file or an image attached to a draft or a message: media, a name with its
 * details, actions and, over the whole card, an optional trigger. The app owns
 * the files and their upload; the card shows the state it is given.
 */
export function Attachment({
  className,
  orientation = "horizontal",
  size = "md",
  state = "done",
  ...props
}: AttachmentProps): React.ReactElement {
  const context = React.useMemo(
    () => ({ orientation, state }),
    [orientation, state],
  );
  const busy = state === "uploading" || state === "processing";

  return (
    <AttachmentContext.Provider value={context}>
      <div
        aria-busy={busy || undefined}
        className={cn(slotClass("attachment", props), className)}
        data-orientation={orientation}
        data-size={size}
        data-slot="attachment"
        data-state={state}
        {...props}
      />
    </AttachmentContext.Provider>
  );
}

export type AttachmentMediaProps = React.ComponentProps<"div"> & {
  /** `icon` is a tile for an icon or a file type icon; `image` holds an `img` that fills it. */
  variant?: "icon" | "image" | undefined;
};

export function AttachmentMedia({
  className,
  variant = "icon",
  ...props
}: AttachmentMediaProps): React.ReactElement {
  return (
    <div
      className={cn(slotClass("attachment-media", props), className)}
      data-slot="attachment-media"
      data-variant={variant}
      {...props}
    />
  );
}

/** The column of the name and its details. It may shrink below its text (rulebook K5). */
export function AttachmentContent({
  className,
  ...props
}: React.ComponentProps<"div">): React.ReactElement {
  return (
    <div
      className={cn(slotClass("attachment-content", props), className)}
      data-slot="attachment-content"
      {...props}
    />
  );
}

/**
 * The name of the file. It ends in an ellipsis where it meets the edge of the
 * card and carries its full text as its title; while the file uploads or is
 * processed, the shimmer runs over it.
 */
export function AttachmentTitle({
  children,
  className,
  ...props
}: React.ComponentProps<"span">): React.ReactElement {
  const { state } = React.useContext(AttachmentContext);

  return (
    <span
      className={cn(slotClass("attachment-title", props), className)}
      data-slot="attachment-title"
      title={typeof children === "string" ? children : undefined}
      {...props}
    >
      <MotionShimmer active={state === "uploading" || state === "processing"}>
        {children}
      </MotionShimmer>
    </span>
  );
}

/** The details of the file: its type and size, the upload progress or why it failed, in words. */
export function AttachmentDescription({
  children,
  className,
  ...props
}: React.ComponentProps<"span">): React.ReactElement {
  return (
    <span
      className={cn(slotClass("attachment-description", props), className)}
      data-slot="attachment-description"
      title={typeof children === "string" ? children : undefined}
      {...props}
    >
      {children}
    </span>
  );
}

export function AttachmentActions({
  className,
  ...props
}: React.ComponentProps<"div">): React.ReactElement {
  return (
    <div
      className={cn(slotClass("attachment-actions", props), className)}
      data-slot="attachment-actions"
      {...props}
    />
  );
}

export type AttachmentActionProps = Omit<ButtonBaseProps, "aria-label"> & {
  /** Names the action and its file, such as "Remove brief.pdf". The icon alone says nothing. */
  "aria-label": string;
};

/**
 * An icon action of the card, such as remove, retry or download: a Button.
 * Beside the text it is the muted bare action of rulebook T2 in the 24 px
 * square target; over the image of a vertical card it is the opaque default
 * Button, which reads on any picture. Any Button prop replaces these.
 */
export function AttachmentAction({
  className,
  ...props
}: AttachmentActionProps): React.ReactElement {
  const { orientation } = React.useContext(AttachmentContext);
  const look: ButtonProps =
    orientation === "vertical"
      ? { variant: "default" }
      : { profile: "inline", profileTone: "muted", variant: "text" };

  return (
    <Button
      className={className}
      data-slot="attachment-action"
      shape="square"
      size="icon-xs"
      {...look}
      {...props}
    />
  );
}

export type AttachmentTriggerProps = Omit<ButtonBaseProps, "aria-label"> & {
  /** Says what activating the card does, such as "Open brief.pdf". The trigger has no text of its own. */
  "aria-label": string;
};

/**
 * A button laid over the whole card, behind the actions, that opens the file
 * or a preview of it. It is the full-cell Button profile; pass `render` for a
 * link, or put it in a DialogTrigger's `render`. Its hover tint and keyboard
 * ring are the Button's own.
 */
export function AttachmentTrigger({
  className,
  ...props
}: AttachmentTriggerProps): React.ReactElement {
  return (
    <KitButton
      className={cn("absolute inset-0 z-10 size-full", className)}
      data-slot="attachment-trigger"
      profile="full-cell-action"
      variant="ghost"
      {...props}
    />
  );
}

export type AttachmentGroupProps = React.ComponentProps<"div"> & {
  /**
   * Names the row of files for assistive technology, such as "Attachments".
   * The name goes to the row's scroll viewport, a labelled region, because
   * that is what joins the tab order once the row scrolls; a row that can
   * scroll should have one.
   */
  label?: string | undefined;
};

/**
 * A row of attachments that scrolls sideways, snaps card by card and fades the
 * edge that has more to show. Its cards are a list, and one that joins or
 * leaves fades in or out while the others glide (rulebook M6). Give each
 * Attachment a stable `key`.
 */
export function AttachmentGroup({
  children,
  className,
  label,
  ...props
}: AttachmentGroupProps): React.ReactElement {
  const attachments = React.Children.toArray(children).filter(
    React.isValidElement,
  );

  return (
    <div
      className={cn(slotClass("attachment-group", props), className)}
      data-slot="attachment-group"
      {...props}
    >
      <ScrollArea aria-label={label} scrollFade scrollbar="hidden">
        <MotionList className="sp-attachment-group-row" layout="flow">
          {attachments.map((attachment) => (
            <MotionItem
              className="sp-attachment-group-item"
              key={attachment.key}
            >
              {attachment}
            </MotionItem>
          ))}
        </MotionList>
      </ScrollArea>
    </div>
  );
}


// ~/src/siteplane/components/attachment/attachment.css

@layer theme, base, components, siteplane, utilities;

@layer siteplane {
  /* Attachment: a file or an image as a small card, with its media, its name
   * and details, its actions and, over the whole card, one optional trigger.
   * Every value is a kit token, so a theme or a radius override reaches it.
   * The card clips what it holds, so the square corners of the trigger's
   * hover tint follow the card's radius instead of a radius of their own.
   * The card is no control, so it keeps the plain cursor also inside a field,
   * whose addons show a text cursor; the trigger and the actions are Buttons
   * and show their own. */
  .sp-attachment {
    --sp-attachment-media: var(--sp-rw-space-10);
    --sp-attachment-padding: var(--sp-rw-space-2);

    position: relative;
    isolation: isolate;
    display: flex;
    box-sizing: border-box;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    gap: var(--sp-rw-space-2);
    overflow: clip;
    border: var(--sp-rw-border-default) solid var(--sp-rw-border-translucent);
    border-radius: var(--sp-rw-radius-surface);
    padding: var(--sp-attachment-padding);
    background: var(--sp-rw-bg-secondary);
    color: var(--sp-rw-fg-primary);
    cursor: default;
    font-size: var(--sp-rw-font-14);
    line-height: var(--sp-rw-line-18);
    transition-property: border-color, background-color;
    transition-duration: var(--motion-duration-fast);
    transition-timing-function: var(--motion-ease-state);
  }

  .sp-attachment[data-size="sm"] {
    --sp-attachment-media: var(--sp-rw-space-8);
    --sp-attachment-padding: var(--sp-rw-space-1-5);

    font-size: var(--sp-rw-font-12);
    line-height: var(--sp-rw-line-16);
  }

  .sp-attachment[data-orientation="horizontal"] {
    min-width: calc(var(--sp-rw-space) * 40);
  }

  /* A vertical card stacks its media over its text: 96 px wide with media
   * alone, 120 px with text. */
  .sp-attachment[data-orientation="vertical"] {
    width: calc(var(--sp-rw-space) * 24);
    flex-direction: column;
    align-items: stretch;
  }

  .sp-attachment[data-orientation="vertical"]:has(> .sp-attachment-content) {
    width: calc(var(--sp-rw-space) * 30);
  }

  /* A file that was selected and waits to upload is drawn with a dashed edge,
   * a failure with the destructive edge of an invalid field. The words of the
   * state stay in the description, so the color is never the only cue. */
  .sp-attachment[data-state="idle"] {
    border-style: dashed;
  }

  .sp-attachment[data-state="error"] {
    border-color: var(--sp-rw-border-destructive);
  }

  /* The media is a square tile for an icon, and the thumbnail of an image. */
  .sp-attachment-media {
    position: relative;
    display: flex;
    width: var(--sp-attachment-media);
    flex: none;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--sp-rw-radius-control);
    background: var(--sp-rw-bg-muted);
    color: var(--sp-rw-fg-secondary);
  }

  .sp-attachment[data-size="sm"] .sp-attachment-media {
    border-radius: var(--sp-rw-radius-sm);
  }

  .sp-attachment[data-orientation="vertical"] .sp-attachment-media {
    width: 100%;
  }

  /* A file type icon is a sheet with its own label, so it needs no tile. */
  .sp-attachment-media:has(> .sp-file-type-icon) {
    background: transparent;
  }

  .sp-attachment-media > svg:not([class*="size-"]) {
    width: var(--sp-rw-control-icon);
    height: var(--sp-rw-control-icon);
    flex: none;
    pointer-events: none;
  }

  .sp-attachment[data-orientation="vertical"]
    .sp-attachment-media
    > svg:not([class*="size-"]) {
    width: var(--sp-rw-space-6);
    height: var(--sp-rw-space-6);
  }

  .sp-attachment-media[data-variant="image"] > img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }

  /* An image that is still on its way shows dimmed. */
  .sp-attachment[data-state="uploading"]
    .sp-attachment-media[data-variant="image"],
  .sp-attachment[data-state="processing"]
    .sp-attachment-media[data-variant="image"] {
    opacity: 0.6;
  }

  .sp-attachment[data-state="error"] .sp-attachment-media {
    background: var(--sp-rw-bg-destructive-translucent);
    color: var(--sp-rw-fg-destructive);
  }

  /* The text track may shrink below its text (rulebook K5), so a long name
   * ends in an ellipsis and never pushes the actions out of the card. */
  .sp-attachment-content {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 0%;
    flex-direction: column;
    gap: var(--sp-rw-space-0-5);
  }

  .sp-attachment[data-orientation="vertical"] .sp-attachment-content {
    padding-inline: var(--sp-rw-space-1);
  }

  .sp-attachment-title,
  .sp-attachment-description {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sp-attachment-title {
    font-weight: var(--sp-rw-font-weight-label);
  }

  .sp-attachment-description {
    color: var(--sp-rw-fg-tertiary);
    font-size: var(--sp-rw-font-12);
    line-height: var(--sp-rw-line-16);
  }

  .sp-attachment[data-state="error"] .sp-attachment-description {
    color: var(--sp-rw-fg-destructive);
  }

  /* The actions sit above the trigger, so both stay clickable. On a vertical
   * card they float 8 px inside the media's top-end corner. */
  .sp-attachment-actions {
    position: relative;
    z-index: 20;
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--sp-rw-space-0-5);
  }

  .sp-attachment[data-orientation="vertical"] .sp-attachment-actions {
    position: absolute;
    inset-block-start: calc(
      var(--sp-attachment-padding) + var(--sp-rw-space-2)
    );
    inset-inline-end: calc(var(--sp-attachment-padding) + var(--sp-rw-space-2));
    gap: var(--sp-rw-space-1);
  }

  /* The group is a row of cards that scrolls sideways and snaps card by card.
   * The ScrollArea fades the edge that has more to show; the snap clears
   * that fade, as the tabs of a scrolling rail do. */
  .sp-attachment-group {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .sp-attachment-group .sp-scroll-area-viewport {
    scroll-padding-inline: var(--fade-size);
    scroll-snap-type: x mandatory;
  }

  .sp-attachment-group-row {
    display: flex;
    width: max-content;
    min-width: 100%;
    align-items: flex-start;
    gap: var(--sp-rw-space-2);
  }

  .sp-attachment-group-item {
    display: flex;
    flex: none;
    scroll-snap-align: start;
  }

  /* A card in a row is at most 16 rem wide, so a long file name ends in an
   * ellipsis there too; a max-w utility on the card widens it. */
  .sp-attachment-group-item > .sp-attachment {
    max-width: calc(var(--sp-rw-space) * 64);
  }
}


// ~/src/siteplane/components/attachment/index.ts

export * from "./attachment";