import { useState } from "react";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@godxjp/ui/data-display";
import { Calendar } from "@godxjp/ui/data-entry";
import { Button } from "@godxjp/ui/general";
import { Flex, PageContainer } from "@godxjp/ui/layout";
import { CalendarIcon } from "lucide-react";
import { ja } from "react-day-picker/locale";
import type { DateRange } from "react-day-picker";

/**
 * Calendar — styled react-day-picker grid for single, multiple, or range
 * selection. Embed inside a Popover for picker UX; use DatePicker /
 * `DatePicker range` for form-submittable inputs instead. Composed only from
 * real @godxjp/ui components.
 */
export default function Demo() {
  const [issueDate, setIssueDate] = useState<Date | undefined>(new Date(2026, 3, 15));
  const [range, setRange] = useState<DateRange | undefined>({
    from: new Date(2026, 3, 1),
    to: new Date(2026, 3, 30),
  });
  const [ruledRange, setRuledRange] = useState<DateRange | undefined>({
    from: new Date(2026, 3, 13),
    to: new Date(2026, 3, 22),
  });
  const [shiftDays, setShiftDays] = useState<Date[] | undefined>([
    new Date(2026, 3, 6),
    new Date(2026, 3, 13),
    new Date(2026, 3, 20),
  ]);

  return (
    <PageContainer
      title="Calendar"
      subtitle="カレンダーグリッド · 常時表示またはポップオーバー内で使用"
    >
      <Flex direction="col" gap="lg">
        <Card>
          <CardHeader>
            <CardTitle level={2}>単一日付選択 (インライン常時表示)</CardTitle>
            <CardDescription>
              mode="single" で日付を選択。フォームに送信が必要な場合は DatePicker を使用する。ja
              ロケールで曜日・月名を日本語表示。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Calendar
              mode="single"
              selected={issueDate}
              onSelect={setIssueDate}
              defaultMonth={issueDate}
              locale={ja}
              disabled={{ before: new Date(2026, 0, 1) }}
              footer={
                issueDate
                  ? `選択日: ${issueDate.toLocaleDateString("ja-JP")}`
                  : "発行日を選択してください"
              }
              aria-label="発行日カレンダー"
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>
              罫線 (bordered) · 既定で表示 / bordered={"{false}"} で解除
            </CardTitle>
            <CardDescription>
              日と日の間に罫線を引くのが既定。線色は --calendar-grid-border-color (既定 --border、
              背景に対し約 1.15:1)。表の行やカードの枠と同じ段なので、罫線が枠より濃くなることは
              ない。選択日・今日・範囲の始点/中間/終点・無効日・前後月の日が
              罫線の中でも判別できる。罫線なしの浮いたボタン表示にしたい場合のみ bordered=
              {"{false}"} を渡す。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex gap="lg" wrap>
              <Calendar
                mode="range"
                selected={ruledRange}
                onSelect={setRuledRange}
                defaultMonth={new Date(2026, 3, 1)}
                today={new Date(2026, 3, 8)}
                locale={ja}
                disabled={[new Date(2026, 3, 5), new Date(2026, 3, 27)]}
                aria-label="罫線あり (既定) の期間カレンダー"
                data-testid="calendar-ruled"
              />
              <Calendar
                mode="range"
                selected={ruledRange}
                onSelect={setRuledRange}
                defaultMonth={new Date(2026, 3, 1)}
                today={new Date(2026, 3, 8)}
                locale={ja}
                disabled={[new Date(2026, 3, 5), new Date(2026, 3, 27)]}
                bordered={false}
                aria-label="罫線なし (bordered=false) の期間カレンダー"
                data-testid="calendar-unruled"
              />
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>範囲選択 · Popover 内</CardTitle>
            <CardDescription>
              mode="range" でポップオーバー内に配置。DatePicker range
              はこのパターンにフォーム送信を加えた上位コンポーネント。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Popover>
              <PopoverTrigger asChild>
                <Button variant="outline">
                  <CalendarIcon />
                  期間を選択
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto" style={{ padding: 0 }} align="start">
                <Calendar
                  mode="range"
                  selected={range}
                  onSelect={setRange}
                  defaultMonth={range?.from}
                  locale={ja}
                  numberOfMonths={2}
                  disabled={{ after: new Date(2027, 2, 31) }}
                  autoFocus
                  aria-label="レポート期間カレンダー"
                />
              </PopoverContent>
            </Popover>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>年月ドロップダウン (captionLayout="dropdown")</CardTitle>
            <CardDescription>
              過去の会計期間に素早くジャンプする場合に便利。startMonth / endMonth
              でナビゲーション範囲を絞る。captionLayout は dropdown-months / dropdown-years
              で月のみ・年のみのドロップダウンにも切り替え可能。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Calendar
              mode="single"
              selected={issueDate}
              onSelect={setIssueDate}
              defaultMonth={issueDate}
              locale={ja}
              captionLayout="dropdown"
              startMonth={new Date(2020, 0, 1)}
              endMonth={new Date(2030, 11, 31)}
              aria-label="会計期間カレンダー"
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>複数日選択 (mode="multiple")</CardTitle>
            <CardDescription>
              mode="multiple" で個別の複数日を選択 (Date[])。max
              で選択上限を制限できる。ここでは出勤シフト日を最大 5 日まで選択。showOutsideDays=
              {"{false}"} で前後月のはみ出し日を非表示にしている。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Calendar
              mode="multiple"
              selected={shiftDays}
              onSelect={setShiftDays}
              defaultMonth={shiftDays?.[0]}
              locale={ja}
              max={5}
              showOutsideDays={false}
              footer={
                shiftDays && shiftDays.length > 0
                  ? `選択日数: ${shiftDays.length} 日`
                  : "出勤日を選択してください"
              }
              aria-label="出勤シフトカレンダー"
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>フッター操作 (showToday / showClose)</CardTitle>
            <CardDescription>
              showToday で「今日」へジャンプして選択、showClose で onClose を呼ぶ。両方とも既定は
              off。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Calendar
              mode="single"
              selected={issueDate}
              onSelect={setIssueDate}
              defaultMonth={issueDate}
              locale={ja}
              showToday
              showClose
              onClose={() => setIssueDate(undefined)}
              aria-label="請求日カレンダー (フッター付き)"
            />
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}