import {
  Badge,
  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";

/**
 * Flex · canonical flex primitive (replaced Stack/Inline as named shortcuts).
 * The default direction is "row" — matching the CSS `display:flex` initial value.
 * Use direction="col" for vertical stacks (formerly Stack); direction="row" is the
 * default for horizontal groups (formerly Inline). Keep spacing in gap prop · same
 * token scale as Stack/Inline. align + justify expose cross-axis and main-axis control.
 * wrap allows chip clusters and action rows to reflow. Composed only from real
 * @godxjp/ui components.
 */
export default function Demo() {
  return (
    <PageContainer
      title="Flex"
      subtitle="方向・整列・間隔・折り返し · Stack/Inline を置き換えた汎用フレックスプリミティブ"
    >
      <Flex direction="col" gap="lg">
        <Card>
          <CardHeader>
            <CardTitle level={2}>既定 direction=&quot;row&quot; · CSS 標準</CardTitle>
            <CardDescription>
              direction を省略すると row（CSS の display:flex の初期値）。横並びが既定で、
              縦積みには direction=&quot;col&quot; を明示する。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex gap="sm" align="center">
              <Badge variant="outline">借方</Badge>
              <Badge variant="outline">貸方</Badge>
              <Badge variant="outline">残高</Badge>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>direction=&quot;col&quot; · 縦スタック</CardTitle>
            <CardDescription>
              縦積みは direction=&quot;col&quot; を明示する。gap
              トークンで間隔を均一に制御。className で raw gap-* を使わない。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="sm">
              <Card>
                <CardContent>
                  <Text tone="muted">行 1 · 仕訳入力</Text>
                </CardContent>
              </Card>
              <Card>
                <CardContent>
                  <Text tone="muted">行 2 · 補助元帳</Text>
                </CardContent>
              </Card>
              <Card>
                <CardContent>
                  <Text tone="muted">行 3 · 試算表</Text>
                </CardContent>
              </Card>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>
              direction=&quot;row&quot; + justify=&quot;between&quot; · ツールバー
            </CardTitle>
            <CardDescription>
              カードヘッダー内でタイトルとアクションを左右に配置する典型パターン。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="row" gap="sm" align="center" justify="between">
              <Text weight="medium">請求書一覧</Text>
              <Flex direction="row" gap="xs" align="center">
                <Button variant="outline" size="sm">
                  エクスポート
                </Button>
                <Button size="sm">新規作成</Button>
              </Flex>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>
              align=&quot;center&quot; + justify=&quot;center&quot; · センタリング
            </CardTitle>
            <CardDescription>
              空状態やローディングブロックを両軸で中央揃えにする用途。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" align="center" justify="center" gap="sm" className="min-h-32">
              <Text tone="muted">データがありません</Text>
              <Button variant="outline" size="sm">
                インポート
              </Button>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>align · 交差軸の整列（全 5 値）</CardTitle>
            <CardDescription>
              direction=&quot;row&quot; の交差軸（縦方向）の揃え方。高さの異なる子要素で
              start・center・end・baseline・stretch の違いを比較。baseline はテキストの
              ベースライン、stretch は子要素を行の高さまで引き伸ばす。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              {(["start", "center", "end", "stretch", "baseline"] as const).map((a) => (
                <Flex
                  key={a}
                  direction="row"
                  gap="sm"
                  align={a}
                  className="bg-muted min-h-20 rounded-md"
                  style={{ padding: "var(--space-2)" }}
                >
                  <Text size="xs" tone="muted" className="w-16">
                    {a}
                  </Text>
                  <Badge variant="outline">短</Badge>
                  <Text>標準テキスト</Text>
                  <Text size="2xl" weight="bold">
                    大
                  </Text>
                </Flex>
              ))}
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>justify · 主軸の配置（全 6 値）</CardTitle>
            <CardDescription>
              direction=&quot;row&quot; の主軸（横方向）の配置。固定幅トラックで余白の
              分配を比較。between は端寄せ、around は各要素の周囲、evenly は要素間と端を
              すべて均等にする。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              {(["start", "center", "end", "between", "around", "evenly"] as const).map((j) => (
                <Flex key={j} direction="row" gap="sm" align="center">
                  <Text size="xs" tone="muted" className="w-16">
                    {j}
                  </Text>
                  <Flex
                    direction="row"
                    gap="xs"
                    align="center"
                    justify={j}
                    className="bg-muted flex-1 rounded-md"
                    style={{ padding: "var(--space-2)" }}
                  >
                    <Badge variant="outline">借方</Badge>
                    <Badge variant="outline">貸方</Badge>
                    <Badge variant="outline">残高</Badge>
                  </Flex>
                </Flex>
              ))}
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>wrap · 折り返しの有無を比較</CardTitle>
            <CardDescription>
              wrap=&#123;true&#125;（既定の false に対して）。狭いトラックで折り返しの有無を
              並べて比較。false では子要素が一行に圧縮され、true では次行へ流れる。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="row" gap="md" align="start" wrap>
              <Flex direction="col" gap="xs" className="w-44">
                <Text size="xs" tone="muted">
                  wrap=&#123;false&#125;（既定）
                </Text>
                {/* ui-audit-disable-next-line no-utility-spacing — a tinted tile so the gap between children is visible; the box IS the subject */}
                <Flex direction="row" gap="xs" wrap={false} className="bg-muted rounded-md p-2">
                  <Badge variant="outline">勘定科目</Badge>
                  <Badge variant="outline">補助科目</Badge>
                  <Badge variant="outline">部門</Badge>
                </Flex>
              </Flex>
              <Flex direction="col" gap="xs" className="w-44">
                <Text size="xs" tone="muted">
                  wrap=&#123;true&#125;
                </Text>
                {/* ui-audit-disable-next-line no-utility-spacing — a tinted tile so the gap between children is visible; the box IS the subject */}
                <Flex direction="row" gap="xs" wrap className="bg-muted rounded-md p-2">
                  <Badge variant="outline">勘定科目</Badge>
                  <Badge variant="outline">補助科目</Badge>
                  <Badge variant="outline">部門</Badge>
                </Flex>
              </Flex>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>wrap · バッジ・チップクラスター</CardTitle>
            <CardDescription>
              direction=&quot;row&quot; + wrap=&#123;true&#125; でタグ・ステータスバッジが折り返す。
              gap トークンで均一スペーシング。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="row" wrap gap="xs" align="center">
              <Badge tone="success">承認済</Badge>
              <Badge tone="warning">保留中</Badge>
              <Badge tone="info">確認待ち</Badge>
              <Badge tone="destructive">却下</Badge>
              <Badge variant="secondary">下書き</Badge>
              <Badge variant="outline">アーカイブ</Badge>
              <Badge>既定</Badge>
              <Badge tone="neutral">中立</Badge>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>gap トークンスケール</CardTitle>
            <CardDescription>
              xs · sm · md（既定）· lg · xl。raw gap-* / space-* ユーティリティは使わない。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              {(["xs", "sm", "md", "lg", "xl"] as const).map((g) => (
                <Flex key={g} direction="row" gap={g} align="center">
                  <Text size="xs" tone="muted" className="w-6">
                    {g}
                  </Text>
                  <Badge variant="outline">勘定科目</Badge>
                  <Badge variant="outline">補助科目</Badge>
                  <Badge variant="outline">部門</Badge>
                </Flex>
              ))}
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>レスポンシブな操作行</CardTitle>
          </CardHeader>
          <CardContent>
            <Flex
              id="responsive-actions"
              direction={{ base: "col", lg: "row" }}
              gap="md"
              align="start"
            >
              <Flex fill>
                <Text>画面幅に合わせて操作をまとめます。</Text>
              </Flex>
              <Button>保存</Button>
              <Button variant="outline">キャンセル</Button>
            </Flex>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle level={2}>刻みにない幅で折りたたむ</CardTitle>
            <CardDescription>
              hideBelow の 4 段（40/48/64/80rem）に無い幅は hideBelowRaw / hideFromRaw
              で指定します。900px ちょうどでは「広い側」だけが残り、両方消える隙間はありません。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex align="center" gap="sm">
              <Flex id="raw-wide-nav" hideBelowRaw={900} align="center" gap="sm">
                <Button variant="ghost" size="sm">
                  機能
                </Button>
                <Button variant="ghost" size="sm">
                  料金
                </Button>
                <Button variant="ghost" size="sm">
                  導入事例
                </Button>
              </Flex>
              <Flex id="raw-narrow-nav" hideFromRaw={900} align="center" gap="sm">
                <Button variant="outline" size="sm">
                  メニュー
                </Button>
              </Flex>
            </Flex>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle level={2}>marker=&quot;none&quot; · 装飾のない意味的リスト</CardTitle>
            <CardDescription>
              as=&quot;ul&quot; は既定で中黒と字下げが付きます。設定メニューのような「行の一覧」では
              marker=&quot;none&quot; を指定すると、ul と li の意味づけと gap トークンは残したまま、
              中黒も字下げも消えます。行は ListRow as=&quot;li&quot;
              で、区切り線は行が自分で描きます。
            </CardDescription>
          </CardHeader>
          <CardContent flush>
            <Flex id="semantic-list" as="ul" marker="none" direction="col" gap="none">
              <ListRow
                as="li"
                title="二要素認証"
                description="認証アプリ · 有効"
                trailing={
                  <Button size="xs" variant="outline">
                    管理
                  </Button>
                }
              />
              <ListRow
                as="li"
                title="パスキー"
                description="2 件登録済み"
                trailing={
                  <Button size="xs" variant="outline">
                    管理
                  </Button>
                }
              />
              <ListRow
                as="li"
                title="回復コード"
                description="未発行"
                trailing={
                  <Button size="xs" variant="outline">
                    発行
                  </Button>
                }
              />
            </Flex>
          </CardContent>
          <CardContent>
            <Flex id="semantic-list-gap" as="ul" marker="none" gap="sm" wrap>
              <Flex as="li">
                <Badge variant="outline">監査ログ</Badge>
              </Flex>
              <Flex as="li">
                <Badge variant="outline">IP 制限</Badge>
              </Flex>
              <Flex as="li">
                <Badge variant="outline">SSO</Badge>
              </Flex>
            </Flex>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle level={2}>軽い強調と行アクション</CardTitle>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Flex id="hover-notice" surface="warning" pad={3} tabIndex={0}>
                <Text>締切を確認してください。</Text>
                <Flex reveal="hover" surface="popover" gap="xs" pad={1}>
                  <Button variant="ghost" size="sm">
                    編集
                  </Button>
                  <Button variant="ghost" size="sm">
                    解除
                  </Button>
                </Flex>
              </Flex>
              <Flex as="ul" direction="col" gap="xs">
                <li>添付ファイルを確認</li>
                <li>担当者を選択</li>
              </Flex>
              <Flex surface="muted" pad={{ block: 2, inline: 3 }}>
                <Text as="code" chip decoration="line-through">
                  old_status
                </Text>
                <Text>更新済み</Text>
              </Flex>
            </Flex>
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}