import { useState } from "react";
import {
  Badge,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Popover,
  PopoverAnchor,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@godxjp/ui/data-display";
import {
  Checkbox,
  FormField,
  Input,
  Label,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@godxjp/ui/data-entry";
import { Button, Text } from "@godxjp/ui/general";
import { Flex, PageContainer } from "@godxjp/ui/layout";
import { Info, SlidersHorizontal } from "lucide-react";

/**
 * Popover — floating panel anchored to a trigger. Always compose
 * PopoverTrigger + PopoverContent; never a raw div overlay. Composed only from
 * real @godxjp/ui components.
 */
export default function Demo() {
  // Card 1 — controlled filter panel: open/onOpenChange drive the panel, and
  // 適用 closes it. Staged defaultOpen via initial state so the open panel is
  // visible at rest in a static screenshot.
  const [filterOpen, setFilterOpen] = useState(true);

  return (
    <PageContainer title="Popover" subtitle="Floating panel anchored to a trigger · click to open">
      <Flex direction="col" gap="lg">
        <Card>
          <CardHeader>
            <CardTitle level={2}>PopoverAnchor · non-trigger positioning reference</CardTitle>
            <CardDescription>Anchor positions content without becoming its toggle.</CardDescription>
          </CardHeader>
          <CardContent>
            <Popover defaultOpen>
              <PopoverAnchor asChild>
                <Badge variant="outline">請求額 ¥482,000</Badge>
              </PopoverAnchor>
              <PopoverContent side="right" aria-label="請求額の補足">
                <PopoverDescription>税額と支払条件の補足情報です。</PopoverDescription>
              </PopoverContent>
            </Popover>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Picker in a popover · Select defaultOpen</CardTitle>
            <CardDescription>
              Opening the popover opens the workspace list with it. The Select waits for the popover
              to finish sliding in, so the list sits below its trigger exactly as a click-open does
              and the first option is never covered.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Popover>
              <PopoverTrigger asChild>
                <Button variant="outline" data-picker-popover="">
                  ワークスペースを切り替え
                </Button>
              </PopoverTrigger>
              <PopoverContent aria-label="ワークスペース">
                <Select aria-label="ワークスペース" defaultOpen defaultValue="tokyo">
                  <SelectTrigger aria-label="ワークスペース" data-picker-trigger="">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="tokyo">東京本社</SelectItem>
                    <SelectItem value="osaka">大阪支社</SelectItem>
                    <SelectItem value="fukuoka">福岡拠点</SelectItem>
                  </SelectContent>
                </Select>
              </PopoverContent>
            </Popover>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Controlled trigger + content</CardTitle>
            <CardDescription>
              Common for compact filter / settings panels off a button. Controlled via open /
              onOpenChange so 適用 closes the panel. Shown open at rest.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Popover open={filterOpen} onOpenChange={setFilterOpen}>
              <PopoverTrigger asChild>
                {/* data-axe-open: check:frame-axe presses this before its overlay scan, so the
                    panel is measured OPEN as well as closed. See docs/FRAME-A11Y-CI.md. */}
                <Button data-axe-open variant="outline">
                  <SlidersHorizontal />
                  絞り込み
                </Button>
              </PopoverTrigger>
              <PopoverContent aria-label="絞り込みパネル">
                <Flex direction="col" gap="md">
                  <FormField id="min" label="最小金額">
                    <Input id="min" type="number" placeholder="0" />
                  </FormField>
                  <Flex direction="row" wrap align="center" gap="xs">
                    <Checkbox id="unpaid" />
                    <Label htmlFor="unpaid">未払いのみ</Label>
                  </Flex>
                  <Button size="sm" onClick={() => setFilterOpen(false)}>
                    適用
                  </Button>
                </Flex>
              </PopoverContent>
            </Popover>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Header / title / description slots</CardTitle>
            <CardDescription>
              The titled info-panel pattern: PopoverHeader › PopoverTitle + PopoverDescription, then
              body. Shown open at rest via defaultOpen.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Popover defaultOpen>
              <PopoverTrigger asChild>
                <Button variant="outline">
                  <Info />
                  保険料の内訳
                </Button>
              </PopoverTrigger>
              <PopoverContent aria-label="保険料の内訳">
                <Flex direction="col" gap="md">
                  <PopoverHeader>
                    <PopoverTitle>保険料の内訳</PopoverTitle>
                    <PopoverDescription>
                      健康保険・厚生年金・雇用保険の控除額を表示します。
                    </PopoverDescription>
                  </PopoverHeader>
                  <Flex direction="col" gap="xs">
                    <Flex direction="row" justify="between">
                      <span>健康保険</span>
                      <span>¥12,400</span>
                    </Flex>
                    <Flex direction="row" justify="between">
                      <span>厚生年金</span>
                      <span>¥22,800</span>
                    </Flex>
                  </Flex>
                </Flex>
              </PopoverContent>
            </Popover>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Placement · side</CardTitle>
            <CardDescription>
              PopoverContent accepts side: top / right / bottom (default) / left, with sideOffset.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="row" wrap gap="sm">
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline">side=top</Button>
                </PopoverTrigger>
                <PopoverContent side="top" aria-label="上側の配置例">
                  <PopoverDescription>上に開きます。</PopoverDescription>
                </PopoverContent>
              </Popover>
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline">side=right</Button>
                </PopoverTrigger>
                <PopoverContent side="right" aria-label="右側の配置例">
                  <PopoverDescription>右に開きます。</PopoverDescription>
                </PopoverContent>
              </Popover>
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline">side=bottom</Button>
                </PopoverTrigger>
                <PopoverContent side="bottom" aria-label="下側の配置例">
                  <PopoverDescription>下に開きます（既定）。</PopoverDescription>
                </PopoverContent>
              </Popover>
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline">side=left</Button>
                </PopoverTrigger>
                <PopoverContent side="left" aria-label="左側の配置例">
                  <PopoverDescription>左に開きます。</PopoverDescription>
                </PopoverContent>
              </Popover>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Alignment · align</CardTitle>
            <CardDescription>
              align: start / center (default) / end positions the panel along the trigger edge.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="row" wrap gap="sm">
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline">align=start</Button>
                </PopoverTrigger>
                <PopoverContent align="start" aria-label="開始端の配置例">
                  <PopoverDescription>開始端に揃えます。</PopoverDescription>
                </PopoverContent>
              </Popover>
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline">align=center</Button>
                </PopoverTrigger>
                <PopoverContent align="center" aria-label="中央の配置例">
                  <PopoverDescription>中央に揃えます（既定）。</PopoverDescription>
                </PopoverContent>
              </Popover>
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline">align=end</Button>
                </PopoverTrigger>
                <PopoverContent align="end" aria-label="終了端の配置例">
                  <PopoverDescription>終了端に揃えます。</PopoverDescription>
                </PopoverContent>
              </Popover>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>width · パネルの測り方</CardTitle>
            <CardDescription>
              既定の panel は --popover-width（18rem）。auto は中身に測らせます。自前の幅を持つもの
              （Calendar、チャート、固定幅のプレビュー）はこれ以外に正解がありません。trigger
              はアンカーに合わせます。className に w-*
              を書くのは呼び出し側の定数で、どのテーマからも retune できません。flush が padding
              側で避けているのと同じ話です。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="row" wrap gap="sm">
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline">panel（既定）</Button>
                </PopoverTrigger>
                <PopoverContent aria-label="既定の幅">
                  <Text size="sm">18rem のパネル幅。散文や、パネル自身が測るリスト向け。</Text>
                </PopoverContent>
              </Popover>
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline">auto</Button>
                </PopoverTrigger>
                <PopoverContent width="auto" aria-label="内容に合わせた幅">
                  <Text size="sm">中身が幅を決めます。</Text>
                </PopoverContent>
              </Popover>
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline">trigger に合わせる</Button>
                </PopoverTrigger>
                <PopoverContent width="trigger" aria-label="トリガーと同じ幅">
                  <Text size="sm">アンカーと同じ幅。</Text>
                </PopoverContent>
              </Popover>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Modal</CardTitle>
            <CardDescription>
              modal traps focus and blocks outside interaction while open, which also marks the rest
              of the page aria-hidden. Shown CLOSED at rest: an open modal layer would take the
              frame&apos;s own main landmark and heading out of the accessibility tree. Open it from
              the trigger to inspect it.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Popover modal>
              <PopoverTrigger asChild>
                <Button variant="outline">確認が必要</Button>
              </PopoverTrigger>
              <PopoverContent aria-label="下書きを削除しますか？">
                <Flex direction="col" gap="md">
                  <PopoverHeader>
                    <PopoverTitle>下書きを削除しますか？</PopoverTitle>
                    <PopoverDescription>この操作は取り消せません。</PopoverDescription>
                  </PopoverHeader>
                  <Flex direction="row" justify="end" gap="xs">
                    <Button variant="outline" size="sm">
                      キャンセル
                    </Button>
                    <Button variant="destructive" size="sm">
                      削除
                    </Button>
                  </Flex>
                </Flex>
              </PopoverContent>
            </Popover>
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}