import { useState } from "react";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
import {
  FormField,
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@godxjp/ui/data-entry";
import { Flex, PageContainer } from "@godxjp/ui/layout";

/**
 * InputOTP — compound one-time-code input: InputOTP > InputOTPGroup > InputOTPSlot.
 * ONE field with paste, arrow-key, and caret handling built in.
 * Never use N separate Input fields for OTP. Composed only from real @godxjp/ui components.
 */
export default function Demo() {
  const [emailCode, setEmailCode] = useState("");
  const [smsCode, setSmsCode] = useState("");
  const [inviteCode, setInviteCode] = useState("");
  const [centeredCode, setCenteredCode] = useState("");

  // Auto-submit pattern — onComplete fires when every slot is filled.
  const [completeCode, setCompleteCode] = useState("123456");
  const [verified, setVerified] = useState("123456");

  // Error path — a wrong code seeded at rest so the invalid styling is visible
  // without typing. FormField wires aria-invalid + aria-errormessage onto the field.
  const [wrongCode, setWrongCode] = useState("000000");

  return (
    <PageContainer title="InputOTP" subtitle="ワンタイムコード入力 · 2FA・SMS認証・招待コード">
      <Flex direction="col" gap="lg">
        <Card>
          <CardHeader>
            <CardTitle level={2}>メール認証コード（6桁）</CardTitle>
            <CardDescription>6スロット 1グループ · ペースト・矢印キー操作に対応。</CardDescription>
          </CardHeader>
          <CardContent>
            {/* この行の id は FIELD ではなく CONTROL 側にある。FormField はその id をそのまま
                使い、ラベルのクリックもその id を見る（gh#477：以前は FormField 自身の id を
                見ていたので、両者が食い違った瞬間にラベルがどこも指さなくなった）。 */}
            <FormField label="認証コード" required>
              <InputOTP id="email-otp" maxLength={6} value={emailCode} onChange={setEmailCode}>
                <InputOTPGroup>
                  <InputOTPSlot index={0} />
                  <InputOTPSlot index={1} />
                  <InputOTPSlot index={2} />
                  <InputOTPSlot index={3} />
                  <InputOTPSlot index={4} />
                  <InputOTPSlot index={5} />
                </InputOTPGroup>
              </InputOTP>
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>SMS認証コード（3+3）</CardTitle>
            <CardDescription>
              InputOTPSeparator で 2 グループに分割して視認性を高める。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="sms-otp" label="SMSコード" required>
              <InputOTP maxLength={6} value={smsCode} onChange={setSmsCode}>
                <InputOTPGroup>
                  <InputOTPSlot index={0} />
                  <InputOTPSlot index={1} />
                  <InputOTPSlot index={2} />
                </InputOTPGroup>
                <InputOTPSeparator />
                <InputOTPGroup>
                  <InputOTPSlot index={3} />
                  <InputOTPSlot index={4} />
                  <InputOTPSlot index={5} />
                </InputOTPGroup>
              </InputOTP>
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>招待コード（4桁PIN）</CardTitle>
            <CardDescription>4スロット · 数字のみ許可する pattern を指定。</CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="invite-pin" label="招待PIN" helper="メールに記載された4桁の数字">
              <InputOTP
                maxLength={4}
                pattern="^[0-9]+$"
                value={inviteCode}
                onChange={setInviteCode}
              >
                <InputOTPGroup>
                  <InputOTPSlot index={0} />
                  <InputOTPSlot index={1} />
                  <InputOTPSlot index={2} />
                  <InputOTPSlot index={3} />
                </InputOTPGroup>
              </InputOTP>
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>自動送信（onComplete）</CardTitle>
            <CardDescription>
              全スロットが埋まると onComplete が発火し、ボタンを押さずに検証を実行する。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField
              id="autosubmit-otp"
              label="認証コード"
              helper={
                verified
                  ? `${verified} を検証済み · 自動送信されました。`
                  : "6桁を入力すると自動で送信されます。"
              }
              required
            >
              <InputOTP
                maxLength={6}
                value={completeCode}
                onChange={setCompleteCode}
                onComplete={(code) => setVerified(code)}
              >
                <InputOTPGroup>
                  <InputOTPSlot index={0} />
                  <InputOTPSlot index={1} />
                  <InputOTPSlot index={2} />
                  <InputOTPSlot index={3} />
                  <InputOTPSlot index={4} />
                  <InputOTPSlot index={5} />
                </InputOTPGroup>
              </InputOTP>
            </FormField>
          </CardContent>
        </Card>

        {/* Align — the centred challenge, without a consumer wrapper div */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>中央寄せ（align=&quot;center&quot;）</CardTitle>
            <CardDescription>
              認証画面のコード入力は中央寄せが定型。コンテナ要素は input-otp
              が所有していて消費側から触れないため、以前は必ず flex の div
              でラップする必要があった。align はそのラッパーを不要にする （テーマ全体なら
              --otp-container-align を 1 か所）。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="centered-otp" label="認証コード" required>
              <InputOTP
                maxLength={6}
                align="center"
                value={centeredCode}
                onChange={setCenteredCode}
              >
                <InputOTPGroup>
                  <InputOTPSlot index={0} />
                  <InputOTPSlot index={1} />
                  <InputOTPSlot index={2} />
                </InputOTPGroup>
                <InputOTPSeparator />
                <InputOTPGroup>
                  <InputOTPSlot index={3} />
                  <InputOTPSlot index={4} />
                  <InputOTPSlot index={5} />
                </InputOTPGroup>
              </InputOTP>
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>エラー（コードが一致しない）</CardTitle>
            <CardDescription>
              FormField の error で aria-invalid を付与 · スロットの枠が destructive 色に変わる。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField
              id="error-otp"
              label="認証コード"
              error="コードが正しくありません。もう一度入力してください。"
              required
            >
              <InputOTP maxLength={6} value={wrongCode} onChange={setWrongCode}>
                <InputOTPGroup>
                  <InputOTPSlot index={0} />
                  <InputOTPSlot index={1} />
                  <InputOTPSlot index={2} />
                  <InputOTPSlot index={3} />
                  <InputOTPSlot index={4} />
                  <InputOTPSlot index={5} />
                </InputOTPGroup>
              </InputOTP>
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>無効（再送クールダウン中）</CardTitle>
            <CardDescription>
              disabled · コード再送のクールダウンや検証中は入力をロックする。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="disabled-otp" label="認証コード" helper="60秒後に再入力できます。">
              <InputOTP disabled maxLength={6} value="42" onChange={() => {}}>
                <InputOTPGroup>
                  <InputOTPSlot index={0} />
                  <InputOTPSlot index={1} />
                  <InputOTPSlot index={2} />
                  <InputOTPSlot index={3} />
                  <InputOTPSlot index={4} />
                  <InputOTPSlot index={5} />
                </InputOTPGroup>
              </InputOTP>
            </FormField>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle level={2}>マスク・入力の正規化</CardTitle>
            <CardDescription>
              入力と貼り付けを大文字に変換。マスクは表示だけに適用されます。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="masked-code" label="確認コード">
              <InputOTP
                maxLength={4}
                defaultValue=""
                mask
                formatter={(value) => value.toUpperCase()}
              >
                <InputOTPGroup>
                  {[0, 1, 2, 3].map((index) => (
                    <InputOTPSlot key={index} index={index} />
                  ))}
                </InputOTPGroup>
              </InputOTP>
            </FormField>
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}