import { useState } from "react";
import {
  Dialog,
  DialogAction,
  DialogCancel,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@godxjp/ui/feedback";
import { FormField, Textarea } from "@godxjp/ui/data-entry";
import {
  Badge,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@godxjp/ui/data-display";
import { Button, Text } from "@godxjp/ui/general";
import { Flex, PageContainer } from "@godxjp/ui/layout";

/** Every branch of DialogHeader's `tone`, in the order the vocabulary declares them. */
const headerTones = [
  "default",
  "success",
  "warning",
  "destructive",
  "info",
  "muted",
  "neutral",
] as const;

/** Order lines behind the non-modal payment dialog — they stay editable while it is open. */
const initialLines = [
  { id: "coffee", name: "ブレンドコーヒー", unitPrice: 480, quantity: 2 },
  { id: "sandwich", name: "ミックスサンド", unitPrice: 650, quantity: 1 },
  { id: "cake", name: "チーズケーキ", unitPrice: 520, quantity: 1 },
];

const yen = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" });

/**
 * Dialog · compound controlled modal for form-style flows. Always control via
 * open + onOpenChange. Include DialogHeader > DialogTitle (required for a11y).
 * Use DialogFooter for primary/cancel actions.
 */
export default function Demo() {
  const [createOpen, setCreateOpen] = useState(true);
  const [detailOpen, setDetailOpen] = useState(false);
  const [toneOpen, setToneOpen] = useState(false);
  const [headerTone, setHeaderTone] = useState<(typeof headerTones)[number]>("default");
  const [terminateOpen, setTerminateOpen] = useState(false);
  const [reason, setReason] = useState("");
  const [paymentOpen, setPaymentOpen] = useState(false);
  const [lines, setLines] = useState(initialLines);
  const total = lines.reduce((sum, line) => sum + line.unitPrice * line.quantity, 0);
  const changeQuantity = (id: string, delta: number) => {
    setLines((current) =>
      current.map((line) =>
        line.id === id ? { ...line, quantity: Math.max(0, line.quantity + delta) } : line,
      ),
    );
  };

  return (
    <PageContainer
      title="Dialog"
      subtitle="compound modal · form flows, detail pop-ups, multi-step wizards"
    >
      <Flex direction="col" gap="lg">
        <Card>
          <CardHeader>
            <CardTitle level={2}>Form-style modal (pre-opened)</CardTitle>
            <CardDescription>
              Controlled via open + onOpenChange. DialogTitle is required for screen-reader
              accessibility. Hold open while pending to prevent double-submit.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Dialog open={createOpen} onOpenChange={setCreateOpen}>
              <DialogTrigger asChild>
                {/* data-axe-open: check:frame-axe presses this before its overlay scan. */}
                <Button data-axe-open size="sm">
                  仕訳新規作成
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-lg">
                <DialogHeader>
                  <DialogTitle>新規仕訳を作成</DialogTitle>
                  <DialogDescription>
                    借方・貸方科目と金額を入力して保存してください。
                  </DialogDescription>
                </DialogHeader>
                <DialogBody>
                <Flex direction="col" gap="md">
                  <Flex direction="row" gap="sm" align="center">
                    <Text tone="muted" className="w-20 shrink-0">
                      借方科目
                    </Text>
                    <Text>売掛金</Text>
                  </Flex>
                  <Flex direction="row" gap="sm" align="center">
                    <Text tone="muted" className="w-20 shrink-0">
                      貸方科目
                    </Text>
                    <Text>売上高</Text>
                  </Flex>
                  <Flex direction="row" gap="sm" align="center">
                    <Text tone="muted" className="w-20 shrink-0">
                      金額
                    </Text>
                    <Text>¥ 120,000</Text>
                  </Flex>
                </Flex>
                </DialogBody>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setCreateOpen(false)}>
                    キャンセル
                  </Button>
                  <Button onClick={() => setCreateOpen(false)}>保存</Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Read-only detail pop-up</CardTitle>
            <CardDescription>
              No footer action buttons needed, just a close trigger. Suitable for audit trail,
              attachment preview, or approval history.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
              <DialogTrigger asChild>
                <Button variant="outline" size="sm">
                  取引詳細を見る
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-md">
                <DialogHeader>
                  <DialogTitle>取引 #JE-2024-0042</DialogTitle>
                  <DialogDescription>2024年3月31日 · 月次決算仕訳</DialogDescription>
                </DialogHeader>
                <DialogBody>
                <Flex direction="col" gap="sm">
                  <Flex direction="row" justify="between">
                    <Text tone="muted">借方</Text>
                    <Text>売掛金 ¥ 240,000</Text>
                  </Flex>
                  <Flex direction="row" justify="between">
                    <Text tone="muted">貸方</Text>
                    <Text>売上高 ¥ 240,000</Text>
                  </Flex>
                  <Flex direction="row" justify="between">
                    <Text tone="muted">摘要</Text>
                    <Text>3月売上計上</Text>
                  </Flex>
                </Flex>
                </DialogBody>
              </DialogContent>
            </Dialog>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>DialogHeader tone band (every branch)</CardTitle>
            <CardDescription>
              DialogHeader also takes a prop-driven form: title, subtitle and an extra slot, plus
              tone. tone tints only the header band and leaves the text at the foreground colour, so
              the dialog never turns into a loud solid fill. default paints no band at all; muted
              and neutral deliberately share the same quiet band. Close the pre-opened dialog above
              with Escape, then pick a branch: the same dialog re-opens with that header.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Flex direction="row" gap="sm" wrap>
                {headerTones.map((tone) => (
                  <Button
                    key={tone}
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      setHeaderTone(tone);
                      setToneOpen(true);
                    }}
                  >
                    {tone}
                  </Button>
                ))}
              </Flex>
              <Dialog open={toneOpen} onOpenChange={setToneOpen}>
                <DialogContent className="max-w-md">
                  <DialogHeader
                    tone={headerTone}
                    title="仕訳の取り込み結果"
                    subtitle={`見出し帯は tone="${headerTone}" で描画しています。`}
                    extra={<Badge tone={headerTone}>{headerTone}</Badge>}
                  />
                  <DialogBody>
                    <Text size="sm">
                      帯の色だけが tone に追従し、見出しと本文の文字色は変わりません。extra
                      スロットは帯の右端に固定され、閉じるボタンとは重なりません。
                    </Text>
                  </DialogBody>
                  <DialogFooter>
                    <Button variant="outline" onClick={() => setToneOpen(false)}>
                      閉じる
                    </Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Destructive confirmation with a required field</CardTitle>
            <CardDescription>
              variant is the one prop that decides three things that always travel together: the
              ARIA role, whether an outside click dismisses, and the primary action emphasis.
              variant=&quot;destructive&quot; renders role=&quot;alertdialog&quot;, ignores an
              outside click and tints DialogAction, while the surface stays a plain Dialog, so a
              required input can sit inside it. That combination used to need a rewrite: Dialog had
              the form but lost the role, AlertDialog had the role but its parts assume a two-button
              body. Escape still closes, exactly as the AlertDialog family already does.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Dialog open={terminateOpen} onOpenChange={setTerminateOpen} variant="destructive">
              <DialogTrigger asChild>
                <Button variant="destructive" size="sm">
                  提携を終了
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-md">
                <DialogHeader
                  tone="destructive"
                  title="提携を終了しますか？"
                  subtitle="この操作は元に戻せません。終了理由は監査ログに残ります。"
                />
                <DialogBody>
                  <FormField id="termination-reason" label="終了理由" required>
                    <Textarea
                      id="termination-reason"
                      value={reason}
                      onChange={(event) => setReason(event.target.value)}
                      placeholder="契約違反の内容を記載してください"
                    />
                  </FormField>
                </DialogBody>
                <DialogFooter>
                  <DialogCancel asChild>
                    <Button variant="ghost">キャンセル</Button>
                  </DialogCancel>
                  <DialogAction disabled={reason.trim().length === 0}>終了する</DialogAction>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Non-modal dialog: the list behind stays editable</CardTitle>
            <CardDescription>
              modal=&#123;false&#125; renders a non-modal dialog, a pattern WAI-ARIA APG allows. The
              page behind keeps working: no scrim, no scroll lock, nothing hidden from assistive
              tech, and a press outside does not close the dialog. Open the payment dialog, then
              change a quantity below. The total inside the dialog follows. Focus moves into the
              dialog on open, Tab can leave it, Escape closes it while focus is inside, and focus
              returns to the trigger.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              {lines.map((line) => (
                <Flex key={line.id} direction="row" align="center" justify="between" gap="sm">
                  <Text>{line.name}</Text>
                  <Flex direction="row" align="center" gap="sm">
                    <Button
                      variant="outline"
                      size="sm"
                      aria-label={`${line.name}を減らす`}
                      disabled={line.quantity === 0}
                      onClick={() => changeQuantity(line.id, -1)}
                    >
                      −
                    </Button>
                    <Text aria-live="polite">{line.quantity}</Text>
                    <Button
                      variant="outline"
                      size="sm"
                      aria-label={`${line.name}を増やす`}
                      onClick={() => changeQuantity(line.id, 1)}
                    >
                      ＋
                    </Button>
                  </Flex>
                </Flex>
              ))}
              <Dialog modal={false} open={paymentOpen} onOpenChange={setPaymentOpen}>
                <DialogTrigger asChild>
                  <Button size="sm">お会計へ</Button>
                </DialogTrigger>
                <DialogContent className="max-w-sm">
                  <DialogHeader title="お会計" subtitle="注文明細は背面で編集を続けられます。" />
                  <DialogBody>
                    <Flex direction="row" justify="between">
                      <Text tone="muted">合計</Text>
                      <Text>{yen.format(total)}</Text>
                    </Flex>
                  </DialogBody>
                  <DialogFooter>
                    <Button variant="outline" onClick={() => setPaymentOpen(false)}>
                      キャンセル
                    </Button>
                    <Button onClick={() => setPaymentOpen(false)}>支払いを確定</Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </Flex>
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}