import {
  Alert,
  AlertActions,
  AlertContent,
  AlertDescription,
  AlertQueryError,
  AlertTitle,
  Banner,
} from "@godxjp/ui/feedback";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
import { Button } from "@godxjp/ui/general";
import { Flex, PageContainer } from "@godxjp/ui/layout";

/**
 * Alert · inline persistent banner for page-scoped feedback (errors, warnings,
 * success, info). NOT for transient toasts. Compose AlertTitle +
 * AlertDescription inside; add AlertActions for CTA buttons. Pass onDismiss to
 * show the built-in × button.
 */
export default function Demo() {
  return (
    <PageContainer
      title="Alert"
      subtitle="tone × variant × dismiss × actions · persistent inline banner (never use for transient feedback)"
    >
      <Flex direction="col" gap="lg">
        <Card>
          <CardHeader>
            <CardTitle level={2}>Every tone branch · variant</CardTitle>
            <CardDescription>
              All seven tone branches, in order: default, success, warning, destructive, info,
              muted, neutral. Tone sets the icon, the surface and the live-region politeness
              (destructive and warning announce assertively; the rest are polite). default, muted
              and neutral deliberately share the quiet neutral surface, so the caller names intent
              without adding colour. variant is the structural axis: the MEASURE of the box, never
              the colour: default (spelled out on the first banner) is this inset, rounded, inline
              alert; banner is the page-level strip shown at the bottom of this page.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Alert variant="default" tone="default">
                <AlertTitle>勘定科目マスタを更新しました</AlertTitle>
                <AlertDescription>変更内容は次回の仕訳入力から反映されます。</AlertDescription>
              </Alert>
              <Alert tone="success">
                <AlertTitle>インポートが完了しました</AlertTitle>
                <AlertDescription>1,240 件の仕訳を取り込みました。</AlertDescription>
              </Alert>
              <Alert tone="warning">
                <AlertTitle>3 件の打刻漏れがあります</AlertTitle>
                <AlertDescription>本日中に確認してください。</AlertDescription>
              </Alert>
              <Alert tone="destructive">
                <AlertTitle>請求書の保存に失敗しました</AlertTitle>
                <AlertDescription>
                  サーバーエラーが発生しました。内容を確認のうえ再度お試しください。
                </AlertDescription>
              </Alert>
              <Alert tone="info">
                <AlertTitle>電子帳簿保存法の保存要件が変更されます</AlertTitle>
                <AlertDescription>
                  2026年1月以降に受領した証憑が対象です。保存設定をご確認ください。
                </AlertDescription>
              </Alert>
              <Alert tone="muted">
                <AlertTitle>この請求書は下書きです</AlertTitle>
                <AlertDescription>送信するまで取引先には表示されません。</AlertDescription>
              </Alert>
              <Alert tone="neutral">
                <AlertTitle>8月10日 02:00 から 04:00 まで定期メンテナンスを行います</AlertTitle>
                <AlertDescription>作業中は仕訳の保存ができません。</AlertDescription>
              </Alert>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>AlertContent + cause-aware query recovery</CardTitle>
            <CardDescription>
              Content groups copy; transient errors expose an explicit retry.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Alert tone="default">
                <AlertContent>
                  <AlertTitle>同期状態</AlertTitle>
                  <AlertDescription>最終同期は 2 分前です。</AlertDescription>
                </AlertContent>
              </Alert>
              <AlertQueryError error={new Error("Service unavailable: 503")} onRetry={() => {}} />
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>AlertTitle + AlertDescription + AlertActions</CardTitle>
            <CardDescription>
              Wrap text in AlertTitle / AlertDescription; put CTA Buttons in AlertActions (renders
              in the action slot). Never place raw buttons as top-level Alert children.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Alert tone="warning">
              <AlertTitle>MF 連携トークンの有効期限が近づいています</AlertTitle>
              <AlertDescription>
                7 日以内にトークンが失効します。今すぐ再連携してください。
              </AlertDescription>
              <AlertActions>
                <Button size="sm">再連携する</Button>
              </AlertActions>
            </Alert>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Dismissible banner</CardTitle>
            <CardDescription>
              Pass onDismiss: the component renders an accessible × button automatically. Never
              hand-roll your own dismiss button.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Alert
              tone="destructive"
              onDismiss={() => {
                /* set session flag */
              }}
            >
              <AlertTitle>請求が未払いです</AlertTitle>
              <AlertDescription>
                期日を過ぎた請求書が 2 件あります。早急にご確認ください。
              </AlertDescription>
            </Alert>
          </CardContent>
        </Card>

        {/* Banner — the SAME component at the page measure. variant="banner" swaps only
            the box: square, edge-to-edge, ruled on the block-end edge, measured by the --banner-*
            tokens. Every tone, the icon, the actions grid and the dismiss ✕ are inherited from the
            inline alert above, so there is nothing new to learn and nothing duplicated.
            `CardContent flush` removes the card inset so the strip really does reach both edges —
            which is the whole point of the variant and cannot be shown inside a padded body. */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>Banner · page-level strip</CardTitle>
            <CardDescription>
              Mount it above PageHeader/PageContainer, or in AppShell to span every route. Use it
              only for page- or app-scoped messages (maintenance, trial expiry, read-only mode); a
              message about ONE section stays an inline Alert inside that section. Never stack two.
            </CardDescription>
          </CardHeader>
          <CardContent flush>
            <Flex direction="col">
              <Banner tone="info">
                <Banner.Title>8月10日 02:00〜04:00 に定期メンテナンスを実施します</Banner.Title>
                <Banner.Description>作業中は仕訳の保存ができません。</Banner.Description>
              </Banner>
              <Banner
                tone="warning"
                onDismiss={() => {
                  /* set session flag */
                }}
              >
                <Banner.Content>
                  <Banner.Title>お試し期間は残り 3 日です</Banner.Title>
                  <Banner.Description>期限までにプランを選択してください。</Banner.Description>
                </Banner.Content>
                <Banner.Actions>
                  <Button size="sm">プランを見る</Button>
                </Banner.Actions>
              </Banner>
              <Banner tone="neutral">
                <Banner.Title>閲覧専用モードで表示しています</Banner.Title>
                <Banner.Description>
                  サポート担当として代理ログイン中のため、編集操作は無効です。
                </Banner.Description>
              </Banner>
              <Banner tone="destructive">
                <Banner.Title>請求が未払いのため一部機能を停止しています</Banner.Title>
                <Banner.Description>
                  期日を過ぎた請求書が 2 件あります。お支払い後、数分で再開されます。
                </Banner.Description>
              </Banner>
              {/* Long EN / VI copy at the same measure — the strip wraps rather than truncating,
                  and the actions column keeps its minimum before dropping to its own row. This is
                  the 390px stress case: nothing here sets a width. */}
              <Banner tone="warning">
                <Banner.Content>
                  <Banner.Title>
                    Scheduled maintenance will pause synchronisation for all connected accounting
                    workspaces
                  </Banner.Title>
                  <Banner.Description>
                    Journal entries created during the window are queued and submitted automatically
                    once the service resumes. No action is required.
                  </Banner.Description>
                </Banner.Content>
                <Banner.Actions>
                  <Button size="sm" variant="outline">
                    View status page
                  </Button>
                </Banner.Actions>
              </Banner>
              <Banner tone="info">
                <Banner.Content>
                  <Banner.Title>
                    Việc đồng bộ dữ liệu hoá đơn sẽ tạm dừng trong thời gian bảo trì định kỳ
                  </Banner.Title>
                  <Banner.Description>
                    Các bút toán được tạo trong khoảng thời gian này sẽ được xếp hàng và gửi lại tự
                    động sau khi dịch vụ hoạt động trở lại.
                  </Banner.Description>
                </Banner.Content>
                <Banner.Actions>
                  <Button size="sm" variant="outline">
                    Xem trạng thái
                  </Button>
                </Banner.Actions>
              </Banner>
              {/* The remaining three tones. default / muted / neutral deliberately share the quiet
                  neutral surface — the caller names intent without adding colour — so all three
                  belong here: a reader has to SEE that they resolve alike, not be told. */}
              <Banner tone="default">
                <Banner.Title>新しい利用規約が2026年9月1日に発効します</Banner.Title>
                <Banner.Description>内容は設定画面からいつでも確認できます。</Banner.Description>
              </Banner>
              <Banner tone="success">
                <Banner.Title>すべてのサービスが正常に稼働しています</Banner.Title>
                <Banner.Description>直近のインシデントは解決済みです。</Banner.Description>
              </Banner>
              <Banner tone="muted">
                <Banner.Title>この組織はアーカイブされています</Banner.Title>
                <Banner.Description>
                  閲覧のみ可能で、新しい操作は記録されません。
                </Banner.Description>
              </Banner>
            </Flex>
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}