import { useState } from "react";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
import { Button, Text } from "@godxjp/ui/general";
import { Flex, PageContainer } from "@godxjp/ui/layout";
import { Steps } from "@godxjp/ui/navigation";

/**
 * Steps — multi-step progress indicator. Horizontal or vertical, default or dot style.
 * Drive current from state; use status='error' to mark the active step failed.
 * Composed only from real @godxjp/ui components.
 */
const approvalSteps = [
  { title: "申請", description: "申請者が提出" },
  { title: "一次審査", description: "部門長レビュー" },
  { title: "経理承認", description: "経理部チェック" },
  { title: "完了", description: "支払処理済" },
];

const onboardingSteps = [
  { title: "基本情報", subtitle: "必須" },
  { title: "法人設定", subtitle: "税務情報" },
  { title: "銀行口座", subtitle: "入出金" },
  { title: "確認・完了" },
];

export default function Demo() {
  const [approvalCurrent, setApprovalCurrent] = useState(1);
  const [wizardCurrent, setWizardCurrent] = useState(0);
  /* Seeded TRUE so `status="error"` paints on mount. The toggle below is still the point of the
   * demo, but starting from `false` meant the error state was reachable only by clicking —
   * and a surface that needs an interaction is a surface no sweep measures (gh#612), which is
   * how `.ui-steps-title[data-status="error"]` kept the destructive FILL tier unnoticed. */
  const [hasError, setHasError] = useState(true);

  return (
    <PageContainer
      title="Steps"
      subtitle="Horizontal + vertical, default + dot · drive current from state"
    >
      <Flex direction="col" gap="lg">
        {/* Horizontal — default style with descriptions */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>水平 · default スタイル (経費承認フロー)</CardTitle>
            <CardDescription>
              items に title + description を渡す。current は 0-based index。 前のステップは
              finish、現在は process、後のステップは wait。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Steps value={approvalCurrent} items={approvalSteps} />
          </CardContent>
        </Card>

        {/* Interactive — advance/retreat */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>インタラクティブ · ステップを進む / 戻る</CardTitle>
            <CardDescription>
              onValueChange を渡すと各ステップがクリッカブルになる。ボタンで value
              を制御することもできる。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Steps
                value={approvalCurrent}
                items={approvalSteps}
                onValueChange={setApprovalCurrent}
              />
              <Flex direction="row" gap="sm">
                <Button
                  size="sm"
                  variant="outline"
                  disabled={approvalCurrent === 0}
                  onClick={() => setApprovalCurrent((c) => c - 1)}
                >
                  戻る
                </Button>
                <Button
                  size="sm"
                  disabled={approvalCurrent >= approvalSteps.length - 1}
                  onClick={() => setApprovalCurrent((c) => c + 1)}
                >
                  次へ
                </Button>
              </Flex>
            </Flex>
          </CardContent>
        </Card>

        {/* Error status on current step */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>status=&quot;error&quot; — 現在ステップをエラー表示</CardTitle>
            <CardDescription>
              status prop を error にするとアクティブステップが赤くなる。
              バリデーション失敗時にフォームと組み合わせて使う。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Steps value={2} status={hasError ? "error" : "process"} items={approvalSteps} />
              <Button size="sm" variant="outline" onClick={() => setHasError((e) => !e)}>
                {hasError ? "エラーをクリア" : "エラーを発生させる"}
              </Button>
            </Flex>
          </CardContent>
        </Card>

        {/* Vertical — default style */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>垂直 · default スタイル (法人オンボーディング)</CardTitle>
            <CardDescription>
              orientation=&quot;vertical&quot; でサイドバーやサイドパネルに収まる縦型レイアウト。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="row" gap="xl">
              <Steps
                orientation="vertical"
                value={wizardCurrent}
                items={onboardingSteps}
                onValueChange={setWizardCurrent}
              />
              <Flex direction="col" gap="md" className="flex-1">
                <Text as="p" weight="medium">
                  ステップ {wizardCurrent + 1}: {onboardingSteps[wizardCurrent].title}
                </Text>
                <Text as="p" tone="muted">
                  このステップのフォームコンテンツがここに表示されます。
                </Text>
                <Flex direction="row" gap="sm">
                  <Button
                    size="sm"
                    variant="outline"
                    disabled={wizardCurrent === 0}
                    onClick={() => setWizardCurrent((c) => c - 1)}
                  >
                    戻る
                  </Button>
                  <Button
                    size="sm"
                    disabled={wizardCurrent >= onboardingSteps.length - 1}
                    onClick={() => setWizardCurrent((c) => c + 1)}
                  >
                    次へ
                  </Button>
                </Flex>
              </Flex>
            </Flex>
          </CardContent>
        </Card>

        {/* size union — md (default) vs sm */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>size · md (既定) / sm</CardTitle>
            <CardDescription>
              size は各ステップのタイトルと説明の文字サイズを決める。size=&quot;md&quot;
              が既定でページ見出し直下の主要フローに使う。size=&quot;sm&quot;
              はカードヘッダやサイドパネルなど、周囲の密度に合わせて縮める場合に使う。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="lg">
              <Flex direction="col" gap="sm">
                <Text as="p" size="sm" tone="muted">
                  size=&quot;md&quot;
                </Text>
                <Steps size="md" value={1} items={approvalSteps} />
              </Flex>
              <Flex direction="col" gap="sm">
                <Text as="p" size="sm" tone="muted">
                  size=&quot;sm&quot;
                </Text>
                <Steps size="sm" value={1} items={approvalSteps} />
              </Flex>
            </Flex>
          </CardContent>
        </Card>

        {/* 320px stress */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>320px stress · 長いタイトル</CardTitle>
            <CardDescription>
              狭いコンテナで水平 Steps の長い日本語タイトルと説明を確認する。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Card className="max-w-80">
              <CardContent>
                <Steps
                  value={1}
                  items={[
                    { title: "会社情報の入力", description: "法人番号と所在地" },
                    { title: "本人確認書類のアップロード", description: "代表者の確認" },
                    { title: "申請内容の最終確認", description: "送信前の確認" },
                  ]}
                />
              </CardContent>
            </Card>
          </CardContent>
        </Card>

        {/* Dot style — compact */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>Dot スタイル · コンパクト (type=&quot;dot&quot;)</CardTitle>
            <CardDescription>
              type=&quot;dot&quot; + size=&quot;sm&quot; で最小フットプリントのプログレスガイド。
              サイドバーのオンボーディングチェックリストに最適。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Steps
              type="dot"
              size="sm"
              orientation="vertical"
              defaultValue={2}
              titlePlacement="horizontal"
              items={[
                { title: "会社情報", status: "finish" },
                { title: "代表者情報", status: "finish" },
                { title: "税務署設定" },
                { title: "銀行口座" },
                { title: "完了確認" },
              ]}
            />
          </CardContent>
        </Card>

        {/* Inline row — the hosted-identity / device progression */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>
              Inline 行 · 区切りグリフ (type=&quot;inline&quot; · separator)
            </CardTitle>
            <CardDescription>
              認証・デバイス系の 1 行プログレス。区切りは既定が chevron (›)、 正典のホステッド ID
              画面は arrow (→) — chevron は「掘り下げる」、arrow
              は「次へ」を意味し、ステップ行の意味は後者。 番号の強調（既定は太字 /
              正典はアクセント色）は --steps-inline-index-color / --steps-inline-index-font-weight
              で、アプリ CSS を書かずに切り替える。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Steps
                type="inline"
                value={1}
                items={[{ title: "コード入力" }, { title: "確認" }, { title: "完了" }]}
              />
              <Steps
                type="inline"
                separator="arrow"
                value={1}
                items={[{ title: "コード入力" }, { title: "確認" }, { title: "完了" }]}
              />
              {/* status="error" on the INLINE form too. The vertical/horizontal error title had a
                  route; `.ui-steps-inline-item[data-status="error"] .ui-steps-inline-control` did
                  not, and it reads the same tone token (gh#612). */}
              <Steps
                type="inline"
                status="error"
                value={1}
                items={[{ title: "コード入力" }, { title: "確認" }, { title: "完了" }]}
              />
            </Flex>
          </CardContent>
        </Card>

        {/* Ant Design parity surface — percent + navigation */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>percent · navigation (Ant Design パリティ)</CardTitle>
            <CardDescription>
              percent は antd と同じく「現在ステップ」の進捗のみ(0–100
              にクランプ)。マーカーの周りに確定アークを描き、role=&quot;progressbar&quot;
              として読み上げられる。type=&quot;navigation&quot; は antd
              のスラブ型ナビゲーションバーで、既定のヘアライン
              コネクタは切られ、代わりにシェブロンで繋がる。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="lg">
              <div id="antd-steps-percent">
                <Steps
                  value={1}
                  percent={40}
                  items={[{ title: "申込" }, { title: "審査" }, { title: "完了" }]}
                />
              </div>
              <div id="antd-steps-navigation">
                <Steps
                  type="navigation"
                  value={1}
                  onValueChange={() => {}}
                  items={[
                    { title: "申込", description: "受付済" },
                    { title: "審査", description: "書類確認中" },
                    { title: "完了", description: "未着手" },
                  ]}
                />
              </div>
            </Flex>
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}