import { useState } from "react";

import {
  Avatar,
  AvatarFallback,
  Badge,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@godxjp/ui/data-display";
import {
  FormField,
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@godxjp/ui/data-entry";
import { Button } from "@godxjp/ui/general";
import { Flex, PageContainer } from "@godxjp/ui/layout";
import { X } from "lucide-react";

/**
 * Select — the single-select control. Prefer the data-driven `options` API
 * (handles search, grouping, async); compose sub-parts only for a custom
 * trigger. Never a raw <select>. Composed only from real @godxjp/ui components.
 */
export default function Demo() {
  const [status, setStatus] = useState("paid");
  const [currency, setCurrency] = useState("JPY");
  const [priority, setPriority] = useState("medium");
  const [priorityMd, setPriorityMd] = useState("medium");
  const [assignee, setAssignee] = useState("tanaka");
  const [reviewer, setReviewer] = useState("tanaka");
  const [reviewerAsync, setReviewerAsync] = useState("tanaka");
  const [reviewerCustom, setReviewerCustom] = useState("tanaka");
  const [reviewerLabel, setReviewerLabel] = useState("tanaka");
  const [prefixed, setPrefixed] = useState("JPY");
  const [tags, setTags] = useState<string[]>(["至急", "社内便"]);
  // antd `labelInValue`: the record arrives carrying its own label, before any option list loads.
  const [assignedTo, setAssignedTo] = useState<
    { value: string; label: React.ReactNode } | undefined
  >({ value: "52", label: "東京本社" });

  const people = [
    { value: "tanaka", label: "田中 太郎", sublabel: "tanaka@example.com" },
    { value: "suzuki", label: "鈴木 花子", sublabel: "suzuki@example.com" },
    { value: "sato", label: "佐藤 次郎", sublabel: "sato@example.com" },
  ];
  const avatarFor = (label: string) => (
    <Avatar className="size-5">
      <AvatarFallback>{label.slice(0, 1)}</AvatarFallback>
    </Avatar>
  );
  const peopleWithIcon = people.map((person) => ({ ...person, icon: avatarFor(person.label) }));

  // A real picker fetches + paginates server-side; we simulate latency so the loading state and the
  // selectedLabel / selectedIcon at-rest behaviour (option not loaded yet) are real.
  const loadPeople = async ({ query }: { query: string; page: number }) => {
    await new Promise((resolve) => setTimeout(resolve, 600));
    const needle = query.trim().toLowerCase();
    const list = needle
      ? peopleWithIcon.filter((person) => person.label.toLowerCase().includes(needle))
      : peopleWithIcon;
    return { options: list, hasMore: false };
  };

  // Async loaders can reject (network / 500). A rejected loader is a DISTINCT state from
  // "no results": the panel shows an error affordance, never a blank surface.
  const loadFailing = async () => {
    await new Promise((resolve) => setTimeout(resolve, 500));
    throw new Error("network error");
  };

  return (
    <PageContainer
      title="Select"
      subtitle="Single-select · data-driven options, searchable, or compound"
    >
      <Flex direction="col" gap="lg">
        <Card>
          <CardHeader>
            <CardTitle level={2}>Data-driven (options)</CardTitle>
            <CardDescription>
              Pass an options array; name= submits the value with the form.
            </CardDescription>
          </CardHeader>
          {/* data-axe-open on the REGION, not the trigger: the data-driven Select renders its own
              trigger and forwards no `data-*` to it, so the gate resolves the `[role="combobox"]`
              inside this element and presses that. See docs/FRAME-A11Y-CI.md. */}
          <CardContent data-axe-open>
            <FormField id="status" label="状態">
              <Select
                id="status"
                name="status"
                value={status}
                onValueChange={setStatus}
                placeholder="状態を選択"
                options={[
                  { value: "draft", label: "下書き" },
                  { value: "sent", label: "送付済" },
                  { value: "paid", label: "入金済" },
                  { value: "overdue", label: "期限超過" },
                ]}
              />
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Searchable + grouped</CardTitle>
            <CardDescription>
              showSearch enables client-side filtering; group buckets options.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="currency" label="通貨">
              <Select
                id="currency"
                name="currency"
                value={currency}
                onValueChange={setCurrency}
                showSearch
                searchPlaceholder="通貨を検索..."
                options={[
                  { value: "JPY", label: "日本円", group: "アジア" },
                  { value: "VND", label: "ベトナムドン", group: "アジア" },
                  { value: "EUR", label: "ユーロ", group: "ヨーロッパ" },
                  { value: "GBP", label: "英ポンド", group: "ヨーロッパ" },
                ]}
              />
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Searchable + clearable</CardTitle>
            <CardDescription>
              With a value set and allowClear (off by default, as in antd), an inline ✕ on the
              trigger resets the selection without opening the list.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="assignee" label="担当者">
              <Select
                id="assignee"
                name="assignee"
                value={assignee}
                onValueChange={setAssignee}
                showSearch
                allowClear
                searchPlaceholder="担当者を検索..."
                placeholder="担当者を選択"
                options={people}
              />
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Option icon · shown on the trigger too</CardTitle>
            <CardDescription>
              Give each option an `icon` (avatar / flag / lucide icon). It renders before the label
              in the list AND on the trigger once selected, with no `renderOption` needed.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="reviewer" label="レビュー担当">
              <Select
                id="reviewer"
                name="reviewer"
                value={reviewer}
                onValueChange={setReviewer}
                showSearch
                searchPlaceholder="担当者を検索..."
                placeholder="担当者を選択"
                options={peopleWithIcon}
              />
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Async (loadOptions) + selectedIcon</CardTitle>
            <CardDescription>
              With `loadOptions` and a preset value, `selectedLabel` + `selectedIcon` show the
              picked person's name AND avatar on the trigger at rest, before the async list has
              loaded.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="reviewer-async" label="レビュー担当 (async)">
              <Select
                id="reviewer-async"
                name="reviewer_async"
                value={reviewerAsync}
                onValueChange={setReviewerAsync}
                loadOptions={loadPeople}
                selectedLabel="田中 太郎"
                selectedIcon={avatarFor("田中 太郎")}
                searchPlaceholder="担当者を検索..."
                placeholder="担当者を選択"
              />
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Empty options · trigger disabled</CardTitle>
            <CardDescription>
              A static `options={[]}` list has nothing to pick, so the trigger disables itself and
              never opens a blank popover. Provide options (or an async loadOptions) to enable it.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="empty-static" label="部門">
              <Select id="empty-static" name="empty_static" options={[]} placeholder="部門を選択" />
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Async error state (errorMessage)</CardTitle>
            <CardDescription>
              When `loadOptions` rejects, the panel shows a distinct error affordance instead of a
              blank surface or a misleading “no results”. Override the localized default with
              `errorMessage`. Open it to see the loading row resolve into the error row.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="reviewer-error" label="レビュー担当 (error)">
              <Select
                id="reviewer-error"
                name="reviewer_error"
                loadOptions={loadFailing}
                errorMessage="担当者を読み込めませんでした"
                searchPlaceholder="担当者を検索..."
                placeholder="担当者を選択"
              />
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Custom rows (renderOption)</CardTitle>
            <CardDescription>
              `renderOption` (like Ant&apos;s optionRender) draws a fully custom row: avatar + name
              + email + a status badge. Use a flex ROW (`div className=&quot;flex
              items-center&quot;`), not a bare `Flex` which defaults to a column.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="reviewer-custom" label="レビュー担当 (custom)">
              <Select
                id="reviewer-custom"
                name="reviewer_custom"
                value={reviewerCustom}
                onValueChange={setReviewerCustom}
                showSearch
                searchPlaceholder="担当者を検索..."
                placeholder="担当者を選択"
                options={people}
                renderOption={(option) => (
                  <Flex align="center" gap="sm" className="w-full">
                    {avatarFor(option.label)}
                    <Flex direction="col" gap="xs" className="min-w-0">
                      <span className="truncate text-sm font-medium">{option.label}</span>
                      <span className="text-muted-foreground truncate text-xs">
                        {option.sublabel}
                      </span>
                    </Flex>
                    <Badge tone="success" className="ms-auto">
                      VIP
                    </Badge>
                  </Flex>
                )}
              />
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>labelRender · custom selected display</CardTitle>
            <CardDescription>
              `labelRender` customizes the SELECTED value shown on the trigger: here an avatar +
              name + a role badge. The placeholder still shows when nothing is selected.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="reviewer-label" label="レビュー担当 (labelRender)">
              <Select
                id="reviewer-label"
                name="reviewer_label"
                value={reviewerLabel}
                onValueChange={setReviewerLabel}
                showSearch
                searchPlaceholder="担当者を検索..."
                placeholder="担当者を選択"
                options={people}
                labelRender={({ label }) => (
                  <Flex align="center" gap="sm">
                    {avatarFor(String(label))}
                    <span className="truncate">{label}</span>
                    <Badge tone="info" icon={null}>
                      担当
                    </Badge>
                  </Flex>
                )}
              />
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Compound API (custom trigger)</CardTitle>
            <CardDescription>
              Compose sub-parts when the trigger needs custom content. SelectTrigger accepts size
              &quot;sm&quot; and &quot;md&quot;; &quot;md&quot; is the default and matches Input
              height in a form, &quot;sm&quot; fits a dense toolbar or table header.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <FormField id="priority-md" label="優先度 (size=md)">
                <Select value={priorityMd} onValueChange={setPriorityMd}>
                  <SelectTrigger size="md" id="priority-md" aria-labelledby="priority-md-label">
                    <SelectValue placeholder="優先度" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="high">高</SelectItem>
                    <SelectItem value="medium">中</SelectItem>
                    <SelectItem value="low">低</SelectItem>
                  </SelectContent>
                </Select>
              </FormField>
              <FormField id="priority" label="優先度 (size=sm)">
                <Select value={priority} onValueChange={setPriority}>
                  <SelectTrigger size="sm" id="priority" aria-labelledby="priority-label">
                    <SelectValue placeholder="優先度" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectGroup>
                      <SelectLabel>標準</SelectLabel>
                      <SelectItem value="high">高</SelectItem>
                      <SelectItem value="medium">中</SelectItem>
                      <SelectItem value="low">低</SelectItem>
                    </SelectGroup>
                    <SelectSeparator />
                    <SelectGroup>
                      <SelectLabel>追加レベル</SelectLabel>
                      {Array.from({ length: 24 }, (_, index) => (
                        <SelectItem key={index} value={`level-${index + 1}`}>
                          レベル {index + 1}
                        </SelectItem>
                      ))}
                    </SelectGroup>
                  </SelectContent>
                </Select>
              </FormField>
            </Flex>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle level={2}>複数選択・上限・検索</CardTitle>
            <CardDescription>
              最大 3 件を選択。選択行の再クリック・クリア・キーボード操作に対応。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="reviewers" label="レビュアー">
              <Select
                mode="multiple"
                name="reviewers[]"
                defaultValue={["tanaka"]}
                showSearch
                maxCount={3}
                maxTagCount={2}
                allowClear
                options={[
                  { value: "tanaka", label: "田中" },
                  { value: "sato", label: "佐藤" },
                  { value: "suzuki", label: "鈴木" },
                  { value: "ito", label: "伊藤" },
                ]}
              />
            </FormField>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle level={2}>
              Ant Design 6 · prefix・suffixIcon・placement・listHeight
            </CardTitle>
            <CardDescription>
              グループは options のネスト（{`{ label, options }`}）でも、行の group
              でも同じ一覧になります。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="prefixed" label="通貨">
              <Select
                id="prefixed"
                name="currency_prefixed"
                value={prefixed}
                onValueChange={setPrefixed}
                prefix={<Badge tone="muted">¥</Badge>}
                placement="bottomEnd"
                listHeight={220}
                options={[
                  {
                    label: "アジア",
                    options: [
                      { value: "JPY", label: "日本円" },
                      { value: "VND", label: "ベトナムドン" },
                    ],
                  },
                  {
                    label: "ヨーロッパ",
                    options: [{ value: "EUR", label: "ユーロ" }],
                  },
                ]}
              />
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>mode=&quot;tags&quot; · tokenSeparators・tagRender</CardTitle>
            <CardDescription>
              一覧にない値も入力できます。カンマ区切りの貼り付けは一度にまとめて確定します。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="tags" label="ラベル">
              <Select
                id="tags"
                name="labels[]"
                mode="tags"
                value={tags}
                onValueChange={setTags}
                tokenSeparators={[",", "\n"]}
                maxTagTextLength={6}
                options={[
                  { value: "至急", label: "至急" },
                  { value: "要確認", label: "要確認" },
                ]}
                tagRender={({ label, onClose }) => (
                  <Badge tone="info">
                    {label}
                    <Button
                      variant="ghost"
                      size="icon-xs"
                      aria-label={`${String(label)} を外す`}
                      onClick={onClose}
                    >
                      <X aria-hidden="true" />
                    </Button>
                  </Badge>
                )}
              />
            </FormField>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>labelInValue · 読み込み前でも名前が出る</CardTitle>
            <CardDescription>
              値が {`{ value, label }`} を持つので、選択肢がまだ届いていなくても ID
              ではなく名前を表示できます。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <FormField id="assigned" label="担当拠点">
              <Select
                id="assigned"
                name="office_id"
                labelInValue
                value={assignedTo}
                onValueChange={setAssignedTo}
                notFoundContent="拠点を読み込み中"
                options={[]}
              />
            </FormField>
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}