import { cn } from "@code/ui/lib/utils";
import {
  ArrowLeft,
  ArrowUp,
  Check,
  ChevronRight,
  FileText,
  ListChecks,
  Mic,
  MoreHorizontal,
  Paperclip,
  Plus,
  Sparkles,
  X,
} from "lucide-react";
import type { FormEvent, ReactNode } from "react";

export type MobileWorkspaceVariant =
  | "character-pass"
  | "expanded-work-unit"
  | "home-expanded-in-place"
  | "stacked-final"
  | "stacked-final-check"
  | "stacked-work-units"
  | "vertical-work-stack"
  | "work-units-home";

export interface MobileWorkspaceRendererProps {
  composerValue: string;
  onBack?: () => void;
  onComposerChange: (value: string) => void;
  onComposerSubmit: (event: FormEvent<HTMLFormElement>) => void;
  onOpenAssistant?: () => void;
  onOpenUnit?: () => void;
  onViewWork?: () => void;
  statusMessage?: string;
  variant: MobileWorkspaceVariant;
}

const BrandGlyph = ({ className }: { className?: string }) => (
  <span
    aria-hidden="true"
    className={cn(
      "inline-flex h-[23px] w-[9px] items-center justify-center bg-black text-[4px] leading-none font-bold tracking-[-0.08em] text-white [writing-mode:vertical-rl]",
      className
    )}
  >
    ZOPU
  </span>
);

interface ProductHeaderProps {
  assistant?: boolean;
  avatar?: boolean;
  letterLogo?: boolean;
  onAssistant?: () => void;
  profileInset?: boolean;
  subtitle?: string;
}

const ProductHeader = ({
  assistant = false,
  avatar = false,
  letterLogo = false,
  onAssistant,
  profileInset = false,
  subtitle = "Workspace is active",
}: ProductHeaderProps) => (
  <header className="flex h-20 shrink-0 items-center bg-white px-4">
    <div className="flex size-10 items-center justify-center rounded-[14px] bg-[#c8ff00] text-[20px] font-bold text-black">
      {letterLogo ? "Z" : <BrandGlyph />}
    </div>
    <div className="ml-3">
      <h1 className="text-[20px] leading-6 font-semibold tracking-[-0.03em] text-[#0b0b0a]">
        Zopu
      </h1>
      <p className="mt-0.5 flex items-center gap-2 text-[13px] leading-4 text-[#7c7772]">
        <span className="size-1.5 rounded-full bg-[#64ad1f]" />
        {subtitle}
      </p>
    </div>
    {avatar ? (
      <>
        {assistant ? (
          <button
            aria-label="Open Zopu assistant"
            className="ml-auto flex size-10 items-center justify-center rounded-full bg-[#f2f3ef]"
            onClick={onAssistant}
            type="button"
          >
            <BrandGlyph className="h-[20px] w-[8px]" />
          </button>
        ) : null}
        <button
          aria-label="Open profile"
          className={cn(
            "flex items-center justify-center rounded-full bg-[#0b0b0a] text-[13px] font-semibold text-white",
            assistant ? "ml-2 size-10" : "ml-auto size-[42px]",
            profileInset && "mr-[31px]"
          )}
          type="button"
        >
          YM
        </button>
      </>
    ) : (
      <>
        <button
          aria-label="Open Zopu assistant"
          className="ml-auto flex size-10 items-center justify-center rounded-full bg-[#f2f3ef]"
          onClick={onAssistant}
          type="button"
        >
          <BrandGlyph className="h-[20px] w-[8px]" />
        </button>
        <button
          aria-label="More options"
          className="ml-2 flex size-10 items-center justify-center rounded-full bg-[#f2f3ef]"
          type="button"
        >
          <MoreHorizontal className="size-5" />
        </button>
      </>
    )}
  </header>
);

interface ComposerProps {
  contextLabel?: string;
  deviceHomeIndicator?: boolean;
  hint?: string;
  homeIndicator?: boolean;
  onChange: (value: string) => void;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  placeholder: string;
  sendBlue?: boolean;
  statusMessage?: string;
  value: string;
}

const ReferenceComposer = ({
  contextLabel,
  deviceHomeIndicator = false,
  hint,
  homeIndicator = false,
  onChange,
  onSubmit,
  placeholder,
  sendBlue = false,
  statusMessage,
  value,
}: ComposerProps) => (
  <footer
    className={cn(
      "relative shrink-0 border-t border-[#eff0ec] bg-white px-[14px]",
      contextLabel ? "h-[144px] pt-[13px]" : "h-[120px] pt-[14px]",
      !homeIndicator && !contextLabel && "h-[100px]",
      deviceHomeIndicator && "h-[125px]"
    )}
  >
    {contextLabel ? (
      <div className="mb-2 flex h-6 w-fit items-center gap-2 rounded-full bg-[#dbe6ff] px-2.5 text-[10px] font-semibold text-[#315dc0]">
        <span className="size-1.5 rounded-full bg-[#315dc0]" />
        {contextLabel}
        <X className="size-3" />
      </div>
    ) : null}
    <form
      className="flex h-[60px] items-center rounded-[30px] bg-[#f2f3ef] p-2"
      onSubmit={onSubmit}
    >
      <button
        aria-label="Add attachment"
        className="flex size-11 shrink-0 items-center justify-center rounded-full bg-white text-[#5e5a56]"
        type="button"
      >
        <Plus className="size-5" strokeWidth={1.8} />
      </button>
      <label className="ml-2 min-w-0 flex-1">
        <span className="sr-only">{placeholder}</span>
        <textarea
          className="block h-5 w-full resize-none overflow-hidden bg-transparent text-[14px] leading-5 text-[#282622] outline-none placeholder:text-[#b3afab]"
          onChange={(event) => onChange(event.target.value)}
          placeholder={placeholder}
          rows={1}
          value={value}
        />
        {hint || statusMessage ? (
          <span className="block truncate text-[10px] leading-4 text-[#c0bcb7]">
            {statusMessage ?? hint}
          </span>
        ) : null}
      </label>
      <button
        aria-label="Send"
        className={cn(
          "ml-2 flex size-11 shrink-0 items-center justify-center rounded-full text-white",
          sendBlue ? "bg-[#315dc0]" : "bg-black",
          !value.trim() && "opacity-100"
        )}
        type="submit"
      >
        <ArrowUp className="size-5" strokeWidth={2.2} />
      </button>
    </form>
    {homeIndicator ? (
      <span className="absolute bottom-[13px] left-1/2 h-[5px] w-[120px] -translate-x-1/2 rounded-full bg-black" />
    ) : null}
  </footer>
);

interface FocusCardProps {
  final: boolean;
  finalStateLeadingArticle?: boolean;
  onOpen?: () => void;
}

const FocusCard = ({
  final,
  finalStateLeadingArticle = false,
  onOpen,
}: FocusCardProps) => (
  <article
    className={cn(
      "absolute top-[77px] z-30 rounded-[30px] bg-[#e8efff] px-5 text-[#14265f]",
      final ? "inset-x-5 h-[378px] pt-5" : "inset-x-6 h-[370px] pt-5"
    )}
  >
    <div className="flex h-7 items-center">
      <span className="inline-flex h-6 items-center rounded-full bg-[#d6e2ff] px-2 text-[10px] font-semibold text-[#315dc0]">
        IN PROGRESS
      </span>
      <span className="ml-2 text-[10px] text-[#6e83b4]">
        {final ? "FLOW-08" : "· ID: FLOW-08"}
      </span>
      <MoreHorizontal className="ml-auto size-5 text-[#315dc0]" />
    </div>
    <h3
      className={cn(
        "font-semibold tracking-[-0.045em]",
        final
          ? "mt-[14px] text-[25px] leading-[27px]"
          : "mt-4 text-[29px] leading-[31px]"
      )}
    >
      Launch onboarding flow
    </h3>
    {final ? (
      <>
        <p className="mt-2 text-[13px] leading-5 text-[#60718e]">
          Customer experience · Updated 4 min ago
        </p>
        <div className="mt-[5px] border-t border-[#315dc0]/15 pt-3">
          <p className="text-[10px] font-semibold text-[#6e83b4]">
            CURRENT STATE
          </p>
          <p className="mt-1 overflow-hidden text-[14px] leading-5 whitespace-nowrap text-[#33405c]">
            {finalStateLeadingArticle
              ? "The flow is mapped. Welcome copy and the activation checklist are being drafted."
              : "Flow mapped. Welcome copy and activation checklist are being drafted."}
          </p>
        </div>
        <div className="mt-[30px] h-[7px] overflow-hidden rounded-full bg-[#315dc0]/15">
          <div className="h-full w-[68%] rounded-full bg-[#315dc0]" />
        </div>
        <div className="mt-1.5 flex text-[10px] font-semibold text-[#315dc0]">
          68% COMPLETE
          <span className="ml-auto font-normal text-[#6e83b4]">On track</span>
        </div>
      </>
    ) : (
      <>
        <div className="mt-[48px] border-t border-[#315dc0]/15 pt-4">
          <p className="text-[10px] font-semibold text-[#6e83b4]">
            STATUS SUMMARY
          </p>
          <p className="mt-1 overflow-hidden text-[14px] leading-5 whitespace-nowrap text-[#33405c]">
            Flow mapped. Zopu is drafting the welcome sequence.
          </p>
        </div>
        <div className="mt-4 h-[7px] overflow-hidden rounded-full bg-[#315dc0]/15">
          <div className="h-full w-[68%] rounded-full bg-[#315dc0]" />
        </div>
        <div className="mt-1.5 flex text-[10px] font-semibold text-[#315dc0]">
          68% COMPLETE
          <span className="ml-auto font-normal text-[#6e83b4]">4 min ago</span>
        </div>
      </>
    )}
    <div
      className={cn(
        "flex items-center border-t border-[#315dc0]/15",
        final ? "mt-[21px] pt-[18px]" : "mt-[18px] pt-[14px]"
      )}
    >
      <span className="flex size-10 shrink-0 items-center justify-center rounded-[14px] bg-white text-[#315dc0]">
        <Check className="size-5" />
      </span>
      <div className="ml-2.5 min-w-0">
        <p className="text-[10px] font-semibold text-[#6e83b4]">NEXT ACTION</p>
        <p className="truncate text-[14px] font-semibold">
          Review welcome copy
        </p>
        {final ? (
          <p className="text-[10px] text-[#6e83b4]">About 5 minutes</p>
        ) : null}
      </div>
      <button
        className={cn(
          "ml-auto flex h-[52px] items-center justify-center gap-1 rounded-[20px] bg-[#c8ff00] px-4 text-[13px] font-semibold text-black",
          final ? "min-w-[110px]" : "min-w-[104px]"
        )}
        onClick={onOpen}
        type="button"
      >
        Open unit
        <ChevronRight className="size-4" />
      </button>
    </div>
  </article>
);

interface FocusStackScreenProps extends ComposerProps {
  final: boolean;
  letterLogo?: boolean;
  onOpen?: () => void;
  polishedText?: boolean;
}

const FocusStackScreen = ({
  final,
  letterLogo = false,
  onChange,
  onOpen,
  onSubmit,
  polishedText = false,
  statusMessage,
  value,
}: FocusStackScreenProps) => (
  <div className="mx-auto flex h-[min(100dvh,844px)] w-full max-w-[390px] flex-col overflow-hidden bg-white text-[#0b0b0a]">
    <ProductHeader
      assistant={final}
      avatar={final}
      letterLogo={letterLogo}
      subtitle={final ? "4 active work units" : "Workspace is active"}
    />
    <main className="relative min-h-0 flex-1 bg-[#f7f8f5]">
      <div className={cn("absolute inset-x-5", final ? "top-8" : "top-[25px]")}>
        <div className="flex items-center">
          <h2 className="text-[29px] leading-9 font-semibold tracking-[-0.05em]">
            Daily focus
          </h2>
          {final ? (
            <span className="ml-auto rounded-full bg-white px-3 py-1.5 text-[11px] font-semibold text-[#5f5b57]">
              MON 20
            </span>
          ) : null}
        </div>
        <p className="mt-1 text-[14px] leading-5 text-[#807b76]">
          {final
            ? "One priority is moving. Two items need attention."
            : "You have 4 active work units today."}
        </p>
      </div>
      <section
        aria-label="Stacked work units"
        className={cn(
          "absolute inset-x-0 h-[509px]",
          final ? "top-[135px]" : "top-[142px]"
        )}
      >
        <div
          className={cn(
            "absolute top-0 z-10 flex h-24 items-start gap-2 rounded-[26px] bg-[#f1e8ff] px-4 pt-4",
            final ? "inset-x-16" : "inset-x-[58px]"
          )}
        >
          <span className="rounded-full bg-[#e7d8ff] px-2 py-1 text-[10px] font-semibold text-[#7137ef]">
            RESEARCHING
          </span>
          <span className="pt-1 text-[10px] text-[#9a7ac5]">WORK-402</span>
        </div>
        <div
          className={cn(
            "absolute top-[37px] z-20 flex h-24 items-start gap-2 rounded-[27px] bg-[#fff0e8] px-4 pt-4",
            final ? "inset-x-11" : "inset-x-[42px]"
          )}
        >
          <span className="rounded-full bg-[#ffe0cf] px-2 py-1 text-[10px] font-semibold text-[#c53c08]">
            BLOCKED
          </span>
          <span className="pt-1 text-[10px] text-[#c68168]">BUG-12</span>
        </div>
        <FocusCard
          final={final}
          finalStateLeadingArticle={final && !letterLogo}
          onOpen={onOpen}
        />
        <div
          className={cn(
            "absolute inset-x-0 flex justify-center gap-2",
            final ? "bottom-[22px]" : "bottom-[39px]"
          )}
        >
          <span className="h-1.5 w-6 rounded-full bg-black" />
          <span className="size-1.5 rounded-full bg-[#d4d3cf]" />
          <span className="size-1.5 rounded-full bg-[#d4d3cf]" />
          <span
            className={cn(
              "size-1.5 rounded-full bg-[#d4d3cf]",
              final && "hidden"
            )}
          />
        </div>
      </section>
      {polishedText ? (
        <span className="sr-only">Polished stacked work-unit reference</span>
      ) : null}
    </main>
    <ReferenceComposer
      homeIndicator={final}
      onChange={onChange}
      onSubmit={onSubmit}
      placeholder={
        final
          ? "Ask Zopu or create new work..."
          : "Ask anything or create new work..."
      }
      statusMessage={statusMessage}
      value={value}
      {...(final ? { hint: "Use @ to reference a work unit" } : {})}
    />
  </div>
);

const WorkFeedScreen = ({
  onChange,
  onOpenAssistant,
  onOpen,
  onSubmit,
  onViewWork,
  statusMessage,
  value,
}: ComposerProps & {
  onOpen?: () => void;
  onOpenAssistant?: () => void;
  onViewWork?: () => void;
}) => (
  <div className="mx-auto flex h-[min(100dvh,844px)] w-full max-w-[390px] flex-col overflow-hidden bg-white text-[#0b0b0a]">
    <ProductHeader onAssistant={onOpenAssistant} />
    <main className="min-h-0 flex-1 bg-[#f7f8f5] px-4 pt-4">
      <h2 className="text-[29px] leading-9 font-semibold tracking-[-0.05em]">
        Good morning.
      </h2>
      <p className="text-[14px] leading-5 text-[#807b76]">
        Your work is moving. Two things need you.
      </p>
      <div className="mt-2 grid h-[55px] grid-cols-3 gap-2">
        <div className="rounded-[18px] bg-white px-2.5 py-2">
          <p className="text-[9px] font-semibold text-[#aaa6a1]">ACTIVE</p>
          <p className="text-[17px] leading-5 font-semibold">4 units</p>
        </div>
        <div className="rounded-[18px] bg-[#fff0e8] px-2.5 py-2 text-[#9a3215]">
          <p className="text-[9px] font-semibold">NEEDS YOU</p>
          <p className="text-[17px] leading-5 font-semibold">2 blockers</p>
        </div>
        <div className="rounded-[18px] bg-[#e8f7ef] px-2.5 py-2 text-[#23633d]">
          <p className="text-[9px] font-semibold">SHIPPED</p>
          <p className="text-[17px] leading-5 font-semibold">3 this week</p>
        </div>
      </div>
      <div className="mt-[18px] flex items-center">
        <h3 className="text-[14px] font-semibold">Now</h3>
        <button
          className="ml-auto text-[12px] text-[#807b76]"
          onClick={onViewWork}
          type="button"
        >
          View all 6
        </button>
      </div>
      <article className="mt-3 h-[190px] rounded-[27px] bg-[#e8efff] p-[14px] text-[#14265f]">
        <div className="flex items-center">
          <span className="flex size-[26px] items-center justify-center rounded-[9px] bg-white text-[#315dc0]">
            ↗
          </span>
          <div className="ml-2">
            <p className="text-[10px] font-semibold text-[#315dc0]">
              IN PROGRESS · 68%
            </p>
            <p className="text-[10px] text-[#60718e]">
              Updated 4 min ago by Zopu
            </p>
          </div>
          <ChevronRight className="ml-auto size-4 text-[#315dc0]" />
        </div>
        <h3 className="mt-3 text-[20px] leading-6 font-semibold tracking-[-0.035em]">
          Launch the new onboarding flow
        </h3>
        <p className="mt-1 overflow-hidden text-[13px] leading-5 whitespace-nowrap text-[#526482]">
          First-run flow mapped. Zopu is drafting the welcome sequence.
        </p>
        <div className="mt-3 h-[7px] rounded-full bg-[#315dc0]/15">
          <div className="h-full w-[68%] rounded-full bg-[#315dc0]" />
        </div>
        <div className="mt-[10px] flex h-[42px] gap-2">
          <div className="min-w-0 flex-1 rounded-[14px] bg-white px-2 py-1.5">
            <p className="text-[9px] font-semibold text-[#8a97b5]">
              NEXT ACTION
            </p>
            <p className="truncate text-[12px] font-semibold">
              Review the welcome copy
            </p>
          </div>
          <button
            className="rounded-[14px] bg-[#c8ff00] px-4 text-[12px] font-semibold text-black"
            onClick={onOpen}
            type="button"
          >
            Open unit →
          </button>
        </div>
      </article>
      <article className="mt-[14px] h-[116px] rounded-[25px] bg-[#fff0e8] p-[14px] text-[#8a2e13]">
        <div className="flex items-center text-[10px] font-semibold text-[#c53c08]">
          <span className="mr-2 size-2 rounded-full bg-[#ff7620]" />
          WAITING ON YOU
          <ChevronRight className="ml-auto size-4" />
        </div>
        <h3 className="mt-[13px] text-[18px] leading-5 font-semibold">
          Fix GitHub authentication bug
        </h3>
        <div className="mt-2 flex items-center">
          <div>
            <p className="text-[12px]">Blocked by missing Safari repro logs</p>
            <p className="text-[10px] text-[#b3aaa5]">
              Zopu can continue as soon as they’re attached.
            </p>
          </div>
          <button
            className="ml-auto rounded-[13px] bg-white px-5 py-2 text-[11px] font-semibold"
            type="button"
          >
            Add logs
          </button>
        </div>
      </article>
      <div className="mt-[14px] grid h-[94px] grid-cols-2 gap-[10px]">
        <article className="rounded-[24px] bg-[#f1e8ff] p-3 text-[#3e0b74]">
          <div className="flex text-[10px] font-semibold text-[#7137ef]">
            RESEARCHING
            <span className="ml-auto font-normal">42%</span>
          </div>
          <h3 className="mt-3 text-[15px] font-semibold">
            Pricing page rewrite
          </h3>
          <p className="mt-1 text-[11px] text-[#7f7190]">
            Comparing 8 competitors
          </p>
        </article>
        <article className="rounded-[24px] bg-[#e8f7ef] p-3 text-[#105c35]">
          <div className="flex text-[10px] font-semibold text-[#238050]">
            READY
            <Check className="ml-auto size-3" />
          </div>
          <h3 className="mt-3 text-[15px] font-semibold">Q3 launch brief</h3>
          <p className="mt-1 text-[11px] text-[#668678]">
            Draft ready for review
          </p>
        </article>
      </div>
    </main>
    <footer className="h-[100px] shrink-0 border-t border-[#eff0ec] bg-white px-3 pt-[10px]">
      <div className="mb-[7px] flex h-5 w-fit items-center gap-2 rounded-full bg-[#f1f2ef] px-2 text-[10px] font-semibold text-[#5f5b57]">
        <span className="size-1.5 rounded-full bg-[#c8ff00]" />
        GLOBAL MODE
      </div>
      <form
        className="flex h-[52px] items-center rounded-[26px] bg-[#f2f3ef] p-2"
        onSubmit={onSubmit}
      >
        <button
          aria-label="Add attachment"
          className="flex size-9 items-center justify-center rounded-full bg-white"
          type="button"
        >
          <Plus className="size-5" />
        </button>
        <input
          className="min-w-0 flex-1 bg-transparent px-2 text-[14px] outline-none placeholder:text-[#b3afab]"
          onChange={(event) => onChange(event.target.value)}
          placeholder="Ask anything or create new work..."
          value={value}
        />
        <button
          aria-label="Send"
          className="flex size-9 items-center justify-center rounded-full bg-black text-white"
          type="submit"
        >
          <ArrowUp className="size-5" />
        </button>
      </form>
      {statusMessage ? <span className="sr-only">{statusMessage}</span> : null}
    </footer>
  </div>
);

const DeviceFrame402 = ({ children }: { children: ReactNode }) => (
  <div className="mx-auto h-[min(100dvh,855px)] w-full max-w-[402px] overflow-hidden bg-black p-[5px] pb-0">
    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-white">
      {children}
    </div>
  </div>
);

const ExpandedWorkUnitContent = ({
  compact = false,
}: {
  compact?: boolean;
}) => (
  <article
    className={cn(
      "rounded-[30px] bg-[#e8efff] p-5 text-[#14265f]",
      compact ? "h-[500px]" : "h-[610px]"
    )}
  >
    <div className="flex items-center">
      <span className="rounded-full bg-[#d6e2ff] px-2 py-1 text-[10px] font-semibold text-[#315dc0]">
        IN PROGRESS
      </span>
      <span className="ml-auto text-[11px] text-[#6e83b4]">68%</span>
    </div>
    <h1
      className={cn(
        "font-semibold tracking-[-0.045em]",
        compact
          ? "mt-4 text-[27px] leading-[30px]"
          : "mt-5 text-[29px] leading-[31px]"
      )}
    >
      Launch onboarding flow
    </h1>
    <p
      className={cn(
        "text-[14px] leading-5 text-[#60718e]",
        compact ? "mt-3" : "mt-[43px]"
      )}
    >
      Create a calm first-run experience that helps new users reach their first
      meaningful outcome.
    </p>
    <div className="mt-[14px] h-[7px] rounded-full bg-[#315dc0]/15">
      <div className="h-full w-[68%] rounded-full bg-[#315dc0]" />
    </div>
    <div className="mt-1.5 flex text-[10px] font-semibold text-[#315dc0]">
      ON TRACK
      <span className="ml-auto font-normal text-[#6e83b4]">
        {compact ? "4m ago" : "Updated 4m ago"}
      </span>
    </div>
    <div className="mt-[18px] border-t border-[#315dc0]/15 pt-[14px]">
      <p className="text-[10px] font-semibold text-[#6e83b4]">CURRENT STATE</p>
      <p className="mt-1 text-[14px] leading-5 text-[#33405c]">
        {compact
          ? "Flow mapped. Welcome copy and the activation checklist are being drafted."
          : "The first-run flow is mapped. Zopu is drafting the welcome sequence and activation checklist."}
      </p>
    </div>
    <section
      className={cn(
        "flex items-center rounded-[19px] bg-white p-3",
        compact ? "mt-5" : "mt-[35px]"
      )}
    >
      <span className="flex size-10 shrink-0 items-center justify-center rounded-[13px] bg-[#c8ff00] text-black">
        <Check className="size-5" />
      </span>
      <div className="ml-3 min-w-0">
        <p className="text-[10px] font-semibold text-[#6e83b4]">
          NEXT MILESTONE
        </p>
        <p className="truncate text-[14px] font-semibold">
          Review the welcome copy
        </p>
        <p className="text-[10px] text-[#6e83b4]">
          Ready for your feedback · about 5 min
        </p>
      </div>
    </section>
    <div className="mt-[14px] grid h-[78px] grid-cols-2 gap-[10px]">
      <div className="rounded-[19px] bg-[#dce6fc] p-3">
        <p className="text-[10px] font-semibold text-[#6e83b4]">ARTIFACTS</p>
        <strong className="mt-1 block text-xl">2</strong>
        <span className="text-[10px] text-[#60718e]">
          Flow map · Copy draft
        </span>
      </div>
      <div className="rounded-[19px] bg-[#dce6fc] p-3">
        <p className="text-[10px] font-semibold text-[#6e83b4]">ACTIVITY</p>
        <strong className="mt-1 block text-xl">12</strong>
        <span className="text-[10px] text-[#60718e]">Actions this week</span>
      </div>
    </div>
    {compact ? (
      <div className="mt-[14px] flex items-center gap-3">
        <span className="flex size-[30px] items-center justify-center rounded-[10px] bg-white text-[#315dc0]">
          Z
        </span>
        <div>
          <p className="text-[11px] font-semibold text-[#33405c]">
            Activation checklist updated
          </p>
          <p className="text-[10px] text-[#6e83b4]">Zopu · 4 minutes ago</p>
        </div>
      </div>
    ) : (
      <>
        <div className="mt-[14px] flex text-[10px] font-semibold text-[#6e83b4]">
          RECENT ACTIVITY
          <span className="ml-auto font-normal text-[#315dc0]">View all</span>
        </div>
        <div className="mt-3 grid gap-3">
          <div className="flex items-center gap-3">
            <span className="flex size-7 items-center justify-center rounded-[9px] bg-white text-[#315dc0]">
              Z
            </span>
            <div>
              <p className="text-[11px] font-semibold text-[#33405c]">
                Zopu updated the activation checklist
              </p>
              <p className="text-[10px] text-[#6e83b4]">4 minutes ago</p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <span className="flex size-7 items-center justify-center rounded-[9px] bg-white text-[#315dc0]">
              ↗
            </span>
            <div>
              <p className="text-[11px] font-semibold text-[#33405c]">
                Welcome copy draft was attached
              </p>
              <p className="text-[10px] text-[#6e83b4]">18 minutes ago</p>
            </div>
          </div>
        </div>
      </>
    )}
  </article>
);

const WorkUnitScreen = ({
  onBack,
  onChange,
  onSubmit,
  statusMessage,
  value,
}: ComposerProps & { onBack?: () => void }) => (
  <DeviceFrame402>
    <header className="flex h-20 shrink-0 items-center bg-white px-4">
      <button
        aria-label="Back to work units"
        className="flex size-10 items-center justify-center rounded-full bg-[#fbfcf9]"
        onClick={onBack}
        type="button"
      >
        <ArrowLeft className="size-5" />
      </button>
      <div className="min-w-0 flex-1 text-center">
        <p className="text-[16px] font-semibold">Work unit</p>
        <p className="text-[11px] text-[#807b76]">FLOW-08 · In progress</p>
      </div>
      <button
        aria-label="More work unit actions"
        className="flex size-10 items-center justify-center rounded-full bg-[#fbfcf9]"
        type="button"
      >
        <MoreHorizontal className="size-5" />
      </button>
    </header>
    <main className="min-h-0 flex-1 bg-[#f7f8f5] px-[17px] pt-4">
      <ExpandedWorkUnitContent />
    </main>
    <ReferenceComposer
      contextLabel="LAUNCH ONBOARDING FLOW"
      hint="Message stays in this card’s context"
      onChange={onChange}
      onSubmit={onSubmit}
      placeholder="Ask about this work unit..."
      sendBlue
      statusMessage={statusMessage}
      value={value}
    />
  </DeviceFrame402>
);

const VerticalStack = ({
  onChange,
  onOpen,
  onSubmit,
  statusMessage,
  value,
}: ComposerProps & { onOpen?: () => void }) => (
  <DeviceFrame402>
    <ProductHeader
      avatar
      letterLogo
      profileInset
      subtitle="4 active work units"
    />
    <main className="relative min-h-0 flex-1 bg-[#f7f8f5] px-5 pt-8">
      <div className="flex items-center">
        <h2 className="text-[29px] leading-9 font-semibold tracking-[-0.05em]">
          Work in motion
        </h2>
        <span className="ml-auto rounded-full bg-white px-3 py-1.5 text-[11px] font-semibold text-[#5f5b57]">
          MON 20
        </span>
      </div>
      <p className="mt-1 text-[14px] leading-5 text-[#807b76]">
        Scroll vertically. Tap a card to expand it in place.
      </p>
      <div className="mt-[34px] flex text-[12px]">
        <span className="font-semibold">ACTIVE WORK</span>
        <span className="ml-auto text-[#807b76]">4 units</span>
      </div>
      <section className="absolute inset-x-5 top-[142px] h-[500px]">
        <article className="absolute inset-x-[13px] top-0 h-[150px] rounded-[28px] bg-[#f1e8ff] p-5 text-[#3e0b74]">
          <span className="text-[10px] font-semibold text-[#7137ef]">
            RESEARCHING
          </span>
          <span className="float-right text-[10px] text-[#9a7ac5]">
            WORK-402
          </span>
          <strong className="mt-4 block text-[22px]">
            Rewrite pricing page
          </strong>
        </article>
        <article className="absolute inset-x-[7px] top-[70px] h-[150px] rounded-[28px] bg-[#fff0e8] p-5 text-[#8a2e13]">
          <span className="text-[10px] font-semibold text-[#c53c08]">
            BLOCKED
          </span>
          <span className="float-right text-[10px] text-[#c68168]">BUG-12</span>
          <strong className="mt-4 block text-[22px]">
            Fix GitHub authentication
          </strong>
        </article>
        <article className="absolute inset-x-1 top-[142px] h-[150px] rounded-[28px] bg-[#e8f7ef] p-5 text-[#105c35]">
          <span className="text-[10px] font-semibold text-[#238050]">
            READY FOR REVIEW
          </span>
          <span className="float-right text-[10px] text-[#61a17e]">
            BRIEF-03
          </span>
          <strong className="mt-4 block text-[22px]">Q3 launch brief</strong>
        </article>
        <article className="absolute inset-x-px top-[218px] h-[285px] rounded-[30px] bg-[#e8efff] p-5 text-[#14265f]">
          <div className="flex items-center">
            <span className="rounded-full bg-[#d6e2ff] px-2 py-1 text-[10px] font-semibold text-[#315dc0]">
              IN PROGRESS
            </span>
            <span className="ml-auto text-[10px] text-[#6e83b4]">FLOW-08</span>
          </div>
          <h3 className="mt-4 text-[24px] leading-[27px] font-semibold tracking-[-0.04em]">
            Launch onboarding flow
          </h3>
          <p className="mt-2 text-[13px] text-[#60718e]">
            Welcome copy and activation checklist are being drafted.
          </p>
          <div className="mt-4 h-[7px] rounded-full bg-[#315dc0]/15">
            <div className="h-full w-[68%] rounded-full bg-[#315dc0]" />
          </div>
          <div className="mt-2 flex text-[10px] font-semibold text-[#315dc0]">
            68% COMPLETE
            <span className="ml-auto font-normal text-[#6e83b4]">On track</span>
          </div>
          <button
            className="mt-5 flex w-full items-center border-t border-[#315dc0]/15 pt-4 text-left"
            onClick={onOpen}
            type="button"
          >
            <span className="flex size-10 items-center justify-center rounded-[14px] bg-white text-[#315dc0]">
              ↗
            </span>
            <span className="ml-3">
              <span className="block text-[10px] font-semibold text-[#6e83b4]">
                NEXT MILESTONE
              </span>
              <span className="block text-[14px] font-semibold">
                Review welcome copy
              </span>
              <span className="block text-[10px] text-[#6e83b4]">
                2 artifacts · Updated 4 minutes ago
              </span>
            </span>
          </button>
        </article>
      </section>
    </main>
    <ReferenceComposer
      deviceHomeIndicator
      hint="Use @ to reference a work unit"
      homeIndicator
      onChange={onChange}
      onSubmit={onSubmit}
      placeholder="Ask Zopu or create new work..."
      statusMessage={statusMessage}
      value={value}
    />
  </DeviceFrame402>
);

const HomeExpanded = ({
  onChange,
  onOpen,
  onSubmit,
  statusMessage,
  value,
}: ComposerProps & { onOpen?: () => void }) => (
  <DeviceFrame402>
    <ProductHeader
      avatar
      letterLogo
      profileInset
      subtitle="4 active work units"
    />
    <main className="relative min-h-0 flex-1 bg-[#f7f8f5] px-5 pt-[27px]">
      <div className="flex items-center">
        <h2 className="text-[29px] leading-9 font-semibold tracking-[-0.05em]">
          Work in motion
        </h2>
        <span className="ml-auto rounded-full bg-white px-3 py-1.5 text-[11px] font-semibold text-[#5f5b57]">
          MON 20
        </span>
      </div>
      <p className="mt-1 text-[14px] leading-5 text-[#807b76]">
        One work unit is expanded in the stack.
      </p>
      <div className="absolute inset-x-[31px] top-[97px] h-24 rounded-[28px] bg-[#f1e8ff] px-4 pt-4 text-[10px] font-semibold text-[#7137ef]">
        RESEARCHING
      </div>
      <div className="absolute inset-x-[26px] top-[117px] h-24 rounded-[28px] bg-[#fff0e8] px-4 pt-4 text-[10px] font-semibold text-[#c53c08]">
        BLOCKED
      </div>
      <div className="absolute inset-x-[17px] top-[139px]">
        <ExpandedWorkUnitContent compact />
        <button
          aria-label="Open launch onboarding flow"
          className="absolute inset-0 rounded-[30px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#315dc0]"
          onClick={onOpen}
          type="button"
        />
      </div>
    </main>
    <ReferenceComposer
      contextLabel="LAUNCH ONBOARDING FLOW"
      hint="Chat is scoped to the selected card"
      onChange={onChange}
      onSubmit={onSubmit}
      placeholder="Ask about this work unit..."
      sendBlue
      statusMessage={statusMessage}
      value={value}
    />
  </DeviceFrame402>
);

const CharacterChat = ({
  onChange,
  onSubmit,
  statusMessage,
  value,
}: ComposerProps) => (
  <div className="mx-auto h-[min(100dvh,858px)] w-full max-w-[390px] overflow-hidden bg-black">
    <main className="relative h-full overflow-hidden rounded-[30px] bg-white px-4 text-[#11110f]">
      <header className="absolute inset-x-4 top-8 flex items-center">
        <span className="flex size-9 items-center justify-center rounded-[13px] bg-[#c8ff00]">
          <Sparkles className="size-5" />
        </span>
        <div className="ml-3">
          <h1 className="text-[18px] leading-5 font-semibold">Zopu</h1>
          <p className="mt-0.5 flex items-center gap-2 text-[12px] text-[#55524f]">
            <span className="size-1.5 rounded-full bg-[#18c973]" />
            Ready to help
          </p>
        </div>
        <MoreHorizontal className="ml-auto size-5" />
      </header>
      <div className="absolute top-[106px] left-4 rounded-full bg-[#f4f4f2] px-2.5 py-1.5 text-[10px] text-[#aaa7a3]">
        TODAY&nbsp;&nbsp;•&nbsp;&nbsp;9:41 AM
      </div>
      <section className="absolute inset-x-4 top-[148px]">
        <div className="flex items-center gap-2 text-[14px] text-[#55524f]">
          <span className="flex size-6 items-center justify-center rounded-[8px] bg-[#f4f4f2]">
            <Sparkles className="size-4" />
          </span>
          <strong>Zopu</strong>
          <span className="text-[#b5b2ae]">• a fresh start</span>
        </div>
        <p className="mt-3 text-[17px] leading-5">
          Good morning. What are we making clearer today?
        </p>
        <div className="mt-4 flex gap-7 text-[12px] font-semibold text-[#55524f]">
          <button className="flex items-center gap-2" type="button">
            <FileText className="size-4" />
            Summarize
          </button>
          <button className="flex items-center gap-2" type="button">
            <ListChecks className="size-4" />
            Plan
          </button>
          <button className="flex items-center gap-2" type="button">
            ◉ Explore
          </button>
        </div>
      </section>
      <div className="absolute top-[278px] right-4 max-w-[275px] rounded-[22px] bg-[#0c0c0b] px-4 py-3 text-[17px] leading-6 text-white">
        Turn my messy notes into a focused plan.
      </div>
      <p className="absolute top-[344px] right-4 text-[10px] text-[#b5b2ae]">
        9:42 AM&nbsp; <span className="text-[#18c973]">✓</span>
      </p>
      <section className="absolute inset-x-4 top-[374px]">
        <div className="flex items-center gap-2">
          <span className="flex size-7 items-center justify-center rounded-[9px] bg-[#c8ff00]">
            <Sparkles className="size-4" />
          </span>
          <strong className="text-[14px]">Zopu</strong>
          <span className="rounded-full bg-[#f1f1ef] px-2 py-1 text-[9px] text-[#aaa7a3]">
            THINKING PARTNER
          </span>
        </div>
        <p className="mt-3 text-[16px] leading-[19px]">
          Absolutely. I’ll turn the noise into a small set of next steps, then
          leave room for the unexpected.
        </p>
        <section className="mt-px h-[127px] rounded-[22px] bg-[#f4f4f2] p-[14px]">
          <div className="flex items-center">
            <span className="flex size-8 items-center justify-center rounded-[10px] bg-[#c8ff00]">
              ↗
            </span>
            <div className="ml-3">
              <h2 className="text-[15px] leading-4 font-semibold">
                Weekly reset
              </h2>
              <p className="text-[10px] text-[#b5b2ae]">
                3 focus areas · drafted just now
              </p>
            </div>
            <ChevronRight className="ml-auto size-4" />
          </div>
          <ul className="mt-2 space-y-1 text-[13px] leading-[18px]">
            <li>
              <span className="mr-2 text-[#c8ff00]">●</span>
              Finish the launch brief
              <span className="ml-2 text-[10px] text-[#b5b2ae]">today</span>
            </li>
            <li>
              <span className="mr-2">●</span>
              Block two hours for deep work
              <span className="ml-2 text-[10px] text-[#b5b2ae]">Tue</span>
            </li>
            <li>
              <span className="mr-2 text-[#b5b2ae]">●</span>
              Leave an hour for cleanup
              <span className="ml-2 text-[10px] text-[#b5b2ae]">Fri</span>
            </li>
          </ul>
        </section>
      </section>
      <form
        className="absolute inset-x-3 bottom-[34px] flex h-[53px] items-center rounded-[27px] bg-[#f4f4f2] p-2"
        onSubmit={onSubmit}
      >
        <button
          aria-label="Attach file"
          className="flex size-10 items-center justify-center rounded-full bg-white"
          type="button"
        >
          <Paperclip className="size-5" />
        </button>
        <input
          className="min-w-0 flex-1 bg-transparent px-2 text-[14px] outline-none placeholder:text-[#b5b2ae]"
          onChange={(event) => onChange(event.target.value)}
          placeholder="Ask anything..."
          value={value}
        />
        <button
          aria-label="Record voice message"
          className="flex size-10 items-center justify-center rounded-full bg-white"
          type="button"
        >
          <Mic className="size-5" />
        </button>
        <button
          aria-label="Send"
          className="ml-1 flex size-10 items-center justify-center rounded-full bg-black text-white"
          type="submit"
        >
          <ArrowUp className="size-5" />
        </button>
      </form>
      <p className="absolute inset-x-0 bottom-[13px] text-center text-[9px] text-[#b5b2ae]">
        {statusMessage ?? "Press Enter to send · Shift + Enter for a new line"}
      </p>
    </main>
  </div>
);

export const MobileWorkspaceScreenRenderer = ({
  composerValue,
  onBack,
  onComposerChange,
  onComposerSubmit,
  onOpenAssistant,
  onOpenUnit,
  onViewWork,
  statusMessage,
  variant,
}: MobileWorkspaceRendererProps) => {
  const composerProps = {
    onChange: onComposerChange,
    onSubmit: onComposerSubmit,
    placeholder: "",
    statusMessage,
    value: composerValue,
  };

  if (variant === "character-pass") {
    return <CharacterChat {...composerProps} />;
  }
  if (variant === "expanded-work-unit") {
    return <WorkUnitScreen {...composerProps} onBack={onBack} />;
  }
  if (variant === "home-expanded-in-place") {
    return <HomeExpanded {...composerProps} onOpen={onOpenUnit} />;
  }
  if (variant === "vertical-work-stack") {
    return <VerticalStack {...composerProps} onOpen={onOpenUnit} />;
  }
  if (variant === "work-units-home") {
    return (
      <WorkFeedScreen
        {...composerProps}
        onOpen={onOpenUnit}
        onOpenAssistant={onOpenAssistant}
        onViewWork={onViewWork}
      />
    );
  }
  if (variant === "stacked-final" || variant === "stacked-final-check") {
    return (
      <FocusStackScreen
        {...composerProps}
        final
        letterLogo={variant === "stacked-final-check"}
        onOpen={onOpenUnit}
      />
    );
  }
  return (
    <FocusStackScreen
      {...composerProps}
      final={false}
      onOpen={onOpenUnit}
      polishedText={variant === "stacked-work-units"}
    />
  );
};
