import {
  Avatar,
  AvatarFallback,
  AvatarImage,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  ListRow,
} from "@godxjp/ui/data-display";
import { Button, Text } from "@godxjp/ui/general";
import { Flex, PageContainer } from "@godxjp/ui/layout";
import { Building2, KeyRound, ShieldCheck, Sparkles } from "lucide-react";

import portraitAmber from "../assets/portrait-amber.svg";
import portraitClay from "../assets/portrait-clay.svg";
import portraitIndigo from "../assets/portrait-indigo.svg";
import portraitIris from "../assets/portrait-iris.svg";
import portraitMoss from "../assets/portrait-moss.svg";
import portraitPlum from "../assets/portrait-plum.svg";
import portraitSlate from "../assets/portrait-slate.svg";

/* The portraits are committed SVG files under docs/assets, imported so the bundler rewrites each
 * URL against PREVIEW_BASE — an absolute "/assets/…" would 404 wherever the site is served from a
 * sub-path.
 *
 * A docs page must never fetch a THIRD-PARTY image: without the public internet it cannot render,
 * and on CI it does not merely look wrong, it hangs — the request never settles, `networkidle`
 * never fires, and `page.goto` times out. Committed files cost no request that can hang and no
 * service that can disappear.
 */

/**
 * Avatar — identity image with a readable fallback (users, teams, entities).
 * Always compose AvatarImage + AvatarFallback so broken/missing images degrade
 * gracefully. Size on the control ladder with `size` (xs/sm/md/lg, the same
 * --control-height tier Button reads); className only for sizes off that ladder.
 * Composed only from real @godxjp/ui components.
 */
export default function Demo() {
  return (
    <PageContainer title="Avatar" subtitle="Identity image with a readable fallback">
      <Flex direction="col" gap="lg">
        <Card>
          <CardHeader>
            <CardTitle level={2}>Image + fallback</CardTitle>
            <CardDescription>
              Compose AvatarImage with AvatarFallback: a loaded photo shows the image, an avatar
              with no image shows initials.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="row" wrap align="center" gap="md">
              <Avatar>
                <AvatarImage src={portraitSlate} alt="担当者" />
                <AvatarFallback>NA</AvatarFallback>
              </Avatar>
              <Avatar>
                <AvatarImage src={portraitPlum} alt="担当者" />
                <AvatarFallback>TK</AvatarFallback>
              </Avatar>
              <Avatar>
                <AvatarFallback>VB</AvatarFallback>
              </Avatar>
              <Avatar>
                <AvatarFallback>経理</AvatarFallback>
              </Avatar>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Fallback on a broken image</CardTitle>
            <CardDescription>
              When the src fails to load, AvatarImage swaps in the AvatarFallback automatically,
              never a blank circle. delayMs holds the fallback back briefly so it does not flash
              before a slow image arrives.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="row" wrap align="center" gap="md">
              <Avatar>
                <AvatarImage src="/__missing-avatar.png" alt="退職済みの担当者" />
                <AvatarFallback>YM</AvatarFallback>
              </Avatar>
              <Avatar>
                <AvatarImage src="/__missing-avatar.png" alt="未設定の担当者" />
                <AvatarFallback delayMs={600}>HS</AvatarFallback>
              </Avatar>
            </Flex>
          </CardContent>
        </Card>

        {/* shape="square" — the entity-header organization / service mark */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>エンティティヘッダー · shape=&quot;square&quot;</CardTitle>
            <CardDescription>
              組織・サービスのマークは shape=&quot;square&quot; (角丸スクエア +
              ブランド面)、人物は既定の shape=&quot;circle&quot;。 半径・サイズ・配色はすべて
              --avatar-square-* トークン所有なので、サービス側は className を上書きせずテーマ 1
              か所で調整できる。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Flex direction="row" align="center" gap="md">
                <Avatar shape="square">
                  <AvatarFallback>山</AvatarFallback>
                </Avatar>
                <Flex direction="col">
                  <Text weight="medium">株式会社山田商事</Text>
                  <Text size="xs" tone="muted">
                    組織 · 取引先コード 100482
                  </Text>
                </Flex>
              </Flex>
              <Flex direction="row" wrap align="center" gap="md">
                <Avatar shape="square">
                  <AvatarImage src={portraitIndigo} alt="組織ロゴ" />
                  <AvatarFallback>山</AvatarFallback>
                </Avatar>
                <Avatar shape="square">
                  <AvatarFallback>経理</AvatarFallback>
                </Avatar>
                <Avatar shape="square" className="size-12">
                  <AvatarFallback>DX</AvatarFallback>
                </Avatar>
                <Avatar shape="circle">
                  <AvatarFallback>田</AvatarFallback>
                </Avatar>
              </Flex>
            </Flex>
          </CardContent>
        </Card>

        {/* appearance="tinted" — the capability medallion */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>
              ケイパビリティ メダリオン · appearance=&quot;tinted&quot;
            </CardTitle>
            <CardDescription>
              機能・ケイパビリティのアイコンは、淡いロール地の角丸スクエア（メダリオン）に載せる。
              メダリオンは Avatar + Lucide グリフの合成パターン（docs/COMPOSITION-VS-COMPONENT.md）
              なので、ライブラリが持つべきは「淡色」そのもの · appearance=&quot;tinted&quot;。
              これが無いと消費側は hsl(var(--primary) / 0.1) をページ CSS
              に書き写すか、素のグリフを置くしかなかった。 shape と直交するので、円形メダリオンも
              同じ 1 語で得られる。配色は --avatar-tinted-* トークン所有。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              {/* The left-aligned capability card: medallion, title, one line of prose. */}
              <Flex direction="row" align="center" gap="md">
                <Avatar shape="square" appearance="tinted">
                  <AvatarFallback>
                    <ShieldCheck aria-hidden="true" />
                  </AvatarFallback>
                </Avatar>
                <Flex direction="col">
                  <Text weight="medium">シングルサインオン</Text>
                  <Text size="xs" tone="muted">
                    1 つの ID で全サービスへ
                  </Text>
                </Flex>
              </Flex>
              <Flex direction="row" wrap align="center" gap="md">
                <Avatar shape="square" appearance="tinted">
                  <AvatarFallback>
                    <KeyRound aria-hidden="true" />
                  </AvatarFallback>
                </Avatar>
                <Avatar shape="square" appearance="tinted">
                  <AvatarFallback>
                    <Building2 aria-hidden="true" />
                  </AvatarFallback>
                </Avatar>
                <Avatar appearance="tinted">
                  <AvatarFallback>
                    <Sparkles aria-hidden="true" />
                  </AvatarFallback>
                </Avatar>
                {/* Solid entity mark beside it — the two treatments are different jobs. */}
                <Avatar shape="square">
                  <AvatarFallback>山</AvatarFallback>
                </Avatar>
              </Flex>
            </Flex>
          </CardContent>
        </Card>

        {/* presence — the realtime reachability dot */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>プレゼンス · presence</CardTitle>
            <CardDescription>
              「今つながるか」はマークの上に出る。presence を渡すとドットとローカライズ済みの
              sr-only テキストが同時に付く（色だけで状態を伝えない · WCAG 1.4.1）。 4
              つの値は色に加えて形でも区別する。online は塗り、away は下半分塗り、busy
              は横棒入り、offline は中空リング。 グレースケールでも、色覚特性があっても、Windows
              ハイコントラストでも 4 状態が判別できる。 直径・食い込み・リング幅・リング色は
              --avatar-presence-* トークン所有（#44 / #45）。 直径はマークに対する比率なので、size-8
              でも size-12 でも組織マークでも同じ 1 つの値で追従する。 presence
              を渡さない＝「プレゼンスという概念が無い」（組織マーク）で、DOM
              には何も出ない。presence=&quot;offline&quot; は「不在だと分かっている」で、別の意味。
            </CardDescription>
          </CardHeader>
          <CardContent flush>
            <ListRow
              leading={
                <Avatar presence="online">
                  <AvatarImage src={portraitSlate} alt="" />
                  <AvatarFallback>田</AvatarFallback>
                </Avatar>
              }
              title="田中 未来"
              description="プロダクト · #general"
            />
            <ListRow
              leading={
                <Avatar presence="busy">
                  <AvatarImage src={portraitPlum} alt="" />
                  <AvatarFallback>佐</AvatarFallback>
                </Avatar>
              }
              title="佐藤 玲"
              description="デザイン · #general"
            />
            <ListRow
              leading={
                <Avatar presence="away">
                  <AvatarFallback>鈴</AvatarFallback>
                </Avatar>
              }
              title="鈴木 大輔"
              description="エンジニアリング · #general"
            />
            <ListRow
              leading={
                <Avatar presence="offline">
                  <AvatarFallback>山</AvatarFallback>
                </Avatar>
              }
              title="山本 彩"
              description="サポート · #general"
            />
            {/* No presence at all — an organization mark has no reachability to report. */}
            <ListRow
              leading={
                <Avatar shape="square">
                  <AvatarFallback>山</AvatarFallback>
                </Avatar>
              }
              title="株式会社山田商事"
              description="組織 · プレゼンスの概念なし"
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>プレゼンス · 4 状態と寸法追従</CardTitle>
            <CardDescription>
              上段は 4 状態を写真の上に重ねたもの。リングが写真から
              ドットを切り離すために幅を稼いでいることが分かる。 中段は同じ
              presence=&quot;online&quot; を size-8 / 既定 / size-12 / 組織マークに載せたもので、
              ドットが px 固定ではなくマーク比で追従することを示す。下段は密度の高い行（36px
              マーク）での見え方。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Flex direction="row" wrap align="center" gap="md">
                <Avatar presence="online">
                  <AvatarImage src={portraitMoss} alt="オンライン" />
                  <AvatarFallback>在</AvatarFallback>
                </Avatar>
                <Avatar presence="away">
                  <AvatarImage src={portraitAmber} alt="離席中" />
                  <AvatarFallback>離</AvatarFallback>
                </Avatar>
                <Avatar presence="busy">
                  <AvatarImage src={portraitClay} alt="取り込み中" />
                  <AvatarFallback>取</AvatarFallback>
                </Avatar>
                <Avatar presence="offline">
                  <AvatarImage src={portraitIris} alt="オフライン" />
                  <AvatarFallback>離</AvatarFallback>
                </Avatar>
              </Flex>
              <Flex direction="row" wrap align="center" gap="md">
                <Avatar className="size-8" presence="online">
                  <AvatarFallback>S</AvatarFallback>
                </Avatar>
                <Avatar presence="online">
                  <AvatarFallback>D</AvatarFallback>
                </Avatar>
                <Avatar className="size-12" presence="online">
                  <AvatarFallback>L</AvatarFallback>
                </Avatar>
                <Avatar shape="square" presence="online">
                  <AvatarFallback>山</AvatarFallback>
                </Avatar>
              </Flex>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardContent flush>
            <ListRow
              density="compact"
              leading={
                <Avatar className="size-9" presence="busy" presenceLabel="会議中 · 15:00まで">
                  <AvatarFallback>佐</AvatarFallback>
                </Avatar>
              }
              title="佐藤 玲"
              description="presenceLabel でプロダクト側の言い回しに差し替え（表示はされない）"
            />
          </CardContent>
        </Card>

        {/* size — the control ladder (gh#716) */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>サイズ · size</CardTitle>
            <CardDescription>
              xs 24px / sm 28px / md 32px（既定） / lg 36px。すべて Button や Input と同じ
              --control-height の段なので、同じ段の Button
              と並べたときに高さがそろう。イニシャルの級数もグリフの箱も同じ段で動くため、小さい
              マークは「小さい」であって「切れている」ではない。shape=&quot;square&quot;
              も同じ段に乗る。 ラダーの外側のサイズ（プロフィール用の 96px マークなど）は従来どおり
              className。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Flex direction="row" wrap align="center" gap="md">
                <Avatar size="xs">
                  <AvatarFallback>XS</AvatarFallback>
                </Avatar>
                <Avatar size="sm">
                  <AvatarFallback>SM</AvatarFallback>
                </Avatar>
                <Avatar>
                  <AvatarFallback>MD</AvatarFallback>
                </Avatar>
                <Avatar size="lg">
                  <AvatarFallback>LG</AvatarFallback>
                </Avatar>
              </Flex>
              {/* square rides the identical ladder */}
              <Flex direction="row" wrap align="center" gap="md">
                <Avatar size="xs" shape="square">
                  <AvatarFallback>山</AvatarFallback>
                </Avatar>
                <Avatar size="sm" shape="square">
                  <AvatarFallback>山</AvatarFallback>
                </Avatar>
                <Avatar shape="square">
                  <AvatarFallback>山</AvatarFallback>
                </Avatar>
                <Avatar size="lg" shape="square">
                  <AvatarFallback>山</AvatarFallback>
                </Avatar>
              </Flex>
              {/* the glyph steps with the box, so a medallion is never clipped */}
              <Flex direction="row" wrap align="center" gap="md">
                <Avatar size="xs" shape="square" appearance="tinted">
                  <AvatarFallback>
                    <ShieldCheck aria-hidden="true" />
                  </AvatarFallback>
                </Avatar>
                <Avatar size="sm" shape="square" appearance="tinted">
                  <AvatarFallback>
                    <ShieldCheck aria-hidden="true" />
                  </AvatarFallback>
                </Avatar>
                <Avatar shape="square" appearance="tinted">
                  <AvatarFallback>
                    <ShieldCheck aria-hidden="true" />
                  </AvatarFallback>
                </Avatar>
                <Avatar size="lg" shape="square" appearance="tinted">
                  <AvatarFallback>
                    <ShieldCheck aria-hidden="true" />
                  </AvatarFallback>
                </Avatar>
              </Flex>
            </Flex>
          </CardContent>
        </Card>

        {/* The row that could not be built before #716 */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>行に入るマーク · size=&quot;sm&quot; と icon-sm</CardTitle>
            <CardDescription>
              行の高さが先に決まっている場所（28px の icon-sm トリガ、24/28px
              の密なテーブル行）では、マークの側が行に合わせる。#716 以前は箱が --control-height
              に固定されていたため、28px のトリガに 32px
              のマークが入って外へはみ出し、消費側に残された手は「行全体を 32px
              に上げる」だけだった。 下の 1 段目は同じ段の Button と並べたもの、2 段目は icon-sm
              トリガの中に入れたもの。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Flex direction="row" wrap align="center" gap="sm">
                <Avatar size="sm">
                  <AvatarImage src={portraitSlate} alt="" />
                  <AvatarFallback>田</AvatarFallback>
                </Avatar>
                <Button size="sm" variant="outline">
                  担当者を変更
                </Button>
                <Avatar size="xs">
                  <AvatarFallback>佐</AvatarFallback>
                </Avatar>
                <Button size="xs" variant="outline">
                  履歴
                </Button>
              </Flex>
              <Flex direction="row" wrap align="center" gap="sm">
                <Button size="icon-sm" variant="ghost" aria-label="担当者 田中 未来">
                  <Avatar size="sm">
                    <AvatarImage src={portraitMoss} alt="" />
                    <AvatarFallback>田</AvatarFallback>
                  </Avatar>
                </Button>
                <Button size="icon-xs" variant="ghost" aria-label="担当者 佐藤 玲">
                  <Avatar size="xs">
                    <AvatarFallback>佐</AvatarFallback>
                  </Avatar>
                </Button>
                <Text as="p" size="xs" tone="muted">
                  マークはトリガの内寸に収まる（28px の中に 28px、24px の中に 24px）。
                </Text>
              </Flex>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>ラダーの外 · className</CardTitle>
            <CardDescription>
              コントロール行の段に無いサイズ（プロフィールヘッダの大きなマークなど）は、従来どおり
              size-* ユーティリティで指定する。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="row" wrap align="center" gap="md">
              <Avatar className="size-10">
                <AvatarFallback>M</AvatarFallback>
              </Avatar>
              <Avatar className="size-12">
                <AvatarFallback>L</AvatarFallback>
              </Avatar>
            </Flex>
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}