import { useState } from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  ScrollArea,
  StatCard,
} from "@godxjp/ui/data-display";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@godxjp/ui/data-entry";
import { Text } from "@godxjp/ui/general";
import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layout";

/**
 * ResponsiveGrid · equal-width multi-column tile grid with automatic responsive
 * collapse (CSS container queries, not viewport). It OWNS its query container
 * (container-type: inline-size), so it responds to the width available to the grid
 * with no external container-type declaration. Direct children are typically
 * StatCard (self-contained bordered card · never wrap in Card/CardContent) or
 * Card+CardContent for richer tile bodies. columns accepts a number OR breakpoint
 * object { base?, sm?, md?, lg? } — or use the named `preset` prop (e.g. "pricing-plans") for a
 * recognised collection shape instead of hand-rolling the breakpoint map. Composed only from
 * real @godxjp/ui components.
 */
const KANBAN_LANES = [
  { key: "todo", title: "未着手" },
  { key: "doing", title: "進行中" },
  { key: "done", title: "完了" },
] as const;

type KanbanLane = (typeof KANBAN_LANES)[number]["key"];

const KANBAN_TASKS: { id: string; title: string; lane: KanbanLane; priority: string }[] = [
  { id: "T-101", title: "請求書テンプレートの改訂", lane: "todo", priority: "high" },
  { id: "T-102", title: "取引先マスタの重複整理", lane: "todo", priority: "medium" },
  { id: "T-103", title: "月次締めチェックリスト", lane: "doing", priority: "low" },
];

export default function Demo() {
  // Kanban: which lane each card is in, moved by native drag and drop.
  const [tasks, setTasks] = useState(KANBAN_TASKS);
  const moveTask = (id: string, lane: KanbanLane) =>
    setTasks((current) => current.map((task) => (task.id === id ? { ...task, lane } : task)));
  return (
    <PageContainer
      title="ResponsiveGrid"
      subtitle="等幅タイルグリッド · KPI・カード比較・ダッシュボード行"
    >
      <Flex direction="col" gap="lg">
        <Card>
          <CardHeader>
            <CardTitle level={2}>Compact mobile metrics</CardTitle>
            <CardDescription>
              columns=&#123;&#123; base: 2, sm: 4 &#125;&#125; keeps two columns below the first
              container breakpoint and four above it.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveGrid columns={{ base: 2, sm: 4 }}>
              <StatCard label="Services" value="3" />
              <StatCard label="Members" value="14" />
              <StatCard label="Invitations" value="0" />
              <StatCard label="Invoices" value="2" />
            </ResponsiveGrid>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle level={2}>コンテナクエリで折り返し（自己所有のクエリコンテナ）</CardTitle>
            <CardDescription>
              同じ columns=&#123;4&#125; でも、コンテナ幅で列数が変わる。左の広い領域は 4
              列、右の狭いサイドバー（約 20rem）は 1 列に折り返す。ビューポート幅は同一なので、
              折り返しの基準がコンテナ幅であることが分かる。ResponsiveGrid は自身のクエリコンテナ
              （container-type: inline-size）を持つため、外側に @container を用意しなくても正しく
              折り返す。閾値はコンテナ幅 40 / 48 / 64rem。 列間の gap は var(--space-stack-md)
              が既定で、gap prop で変更できます。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <SplitPane
              asideWidth="sm"
              aside={
                <Flex direction="col" gap="sm">
                  <Text tone="muted">狭いコンテナ（約 20rem）→ sm=1 列</Text>
                  {/* No wrapping `@container` needed — ResponsiveGrid OWNS its query container. */}
                  <ResponsiveGrid columns={4}>
                    <StatCard label="今日の入金" value="¥420,000" />
                    <StatCard label="未処理" value="6 件" />
                  </ResponsiveGrid>
                </Flex>
              }
            >
              <Flex direction="col" gap="sm">
                <Text tone="muted">広いコンテナ → lg=4 列</Text>
                <ResponsiveGrid columns={4}>
                  <StatCard label="月次売上" value="¥12,400,000" delta="+8%" hint="先月比" />
                  <StatCard label="請求件数" value="486" delta="+12%" />
                  <StatCard label="売掛金残高" value="¥3,180,000" hint="未回収 23件" />
                  <StatCard label="回収率" value="97.2%" delta="+0.4%" />
                </ResponsiveGrid>
              </Flex>
            </SplitPane>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Container stress · 320 / 768px 相当（外側コンテナ不要）</CardTitle>
            <CardDescription>
              固定幅の親の中でも、同じ columns=&#123;4&#125; が親幅で列数を変える。親には
              container-type を付けていない。ResponsiveGrid が自身のスコープでクエリするため、
              外側にコンテナ宣言がなくても 1 列に潰れない。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              {["max-w-80", "max-w-3xl"].map((width) => (
                <div
                  key={width}
                  className={width}
                  style={{ border: "1px solid hsl(var(--border))", padding: "var(--space-2)" }}
                >
                  <ResponsiveGrid columns={4}>
                    {Array.from({ length: 4 }, (_, index) => (
                      <div
                        key={index}
                        className="bg-muted rounded text-center"
                        style={{ padding: "var(--space-3)" }}
                      >
                        {index + 1}
                      </div>
                    ))}
                  </ResponsiveGrid>
                </div>
              ))}
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>columns=&#123;4&#125; · KPI 行（StatCard 直置き）</CardTitle>
            <CardDescription>
              StatCard は自身がボーダー付き Card なので Card/CardContent でラップしない。 columns
              数値指定時は sm=min(n,2) / md=min(n,3) / lg=n に自動変換。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveGrid columns={4}>
              <StatCard label="月次売上" value="¥12,400,000" delta="+8%" hint="先月比" />
              <StatCard label="請求件数" value="486" delta="+12%" />
              <StatCard label="売掛金残高" value="¥3,180,000" hint="未回収 23件" />
              <StatCard label="回収率" value="97.2%" delta="+0.4%" />
            </ResponsiveGrid>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>columns=&#123;3&#125; · 法人比較（Card+CardContent）</CardTitle>
            <CardDescription>
              StatCard 以外のリッチなタイルは Card+CardContent で構成。 columns=&#123;3&#125; → sm=2
              / md=3 / lg=3 に自動変換。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveGrid columns={3}>
              <Card>
                <CardHeader>
                  <CardTitle>東京本社</CardTitle>
                  <CardDescription>JP-001</CardDescription>
                </CardHeader>
                <CardContent>
                  <Flex direction="col" gap="xs">
                    <Text>売上: ¥8,200,000</Text>
                    <Text tone="muted">取引先: 124社</Text>
                  </Flex>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle>大阪支社</CardTitle>
                  <CardDescription>JP-002</CardDescription>
                </CardHeader>
                <CardContent>
                  <Flex direction="col" gap="xs">
                    <Text>売上: ¥3,100,000</Text>
                    <Text tone="muted">取引先: 57社</Text>
                  </Flex>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle>福岡拠点</CardTitle>
                  <CardDescription>JP-003</CardDescription>
                </CardHeader>
                <CardContent>
                  <Flex direction="col" gap="xs">
                    <Text>売上: ¥1,060,000</Text>
                    <Text tone="muted">取引先: 31社</Text>
                  </Flex>
                </CardContent>
              </Card>
            </ResponsiveGrid>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>
              columns=&#123;&#123; sm: 1, md: 2, lg: 4 &#125;&#125; ·
              ブレークポイントオブジェクト（3 段制御）
            </CardTitle>
            <CardDescription>
              ブレークポイント指定オブジェクト: sm / md / lg
              キーでコンテナ幅ごとの列数を個別に制御。
              未指定キーは下位にフォールバック（lg→md→sm、md→sm、sm 既定 1）。 数値指定（sm=min(n,2)
              / md=min(n,3) / lg=n の自動変換）では作れない 「sm=1 / md=2 /
              lg=4」のような任意の組み合わせを表現できる。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
              <StatCard layout="inline" label="契約金額" value="¥4,800,000" />
              <StatCard layout="inline" label="消費税額" value="¥480,000" hint="税率 10%" />
              <StatCard layout="inline" label="支払済" value="¥2,400,000" delta="-50%" inverse />
              <StatCard layout="inline" label="残額" value="¥2,400,000" />
            </ResponsiveGrid>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>
              preset=&quot;pricing-plans&quot; · 課金プラン一覧（3/3/1）
            </CardTitle>
            <CardDescription>
              名前付きコレクション geometry: コンテナ幅が lg ステップ（64rem）に達するまでは 1
              列、そこから 3 列に切り替わる。ResponsiveGrid には lg
              より上のステップが無いため、1024px 相当でも 1440px 相当でも同じ 3 列になる ·
              課金プランカタログの「3/3/1」契約 （dxs-platform/platform#333）。`columns` の代わりに
              `preset` を渡すだけで、呼び出し側がブレークポイント値を自作する必要がない。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveGrid preset="pricing-plans">
              <Card>
                <CardHeader>
                  <CardTitle>スタンダード</CardTitle>
                  <CardDescription>¥9,800 / 月</CardDescription>
                </CardHeader>
                <CardContent>
                  <Text tone="muted">小規模チーム向けの基本プラン。</Text>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle>プロフェッショナル</CardTitle>
                  <CardDescription>¥29,800 / 月</CardDescription>
                </CardHeader>
                <CardContent>
                  <Text tone="muted">成長企業向けの推奨プラン。</Text>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle>エンタープライズ</CardTitle>
                  <CardDescription>お問い合わせ</CardDescription>
                </CardHeader>
                <CardContent>
                  <Text tone="muted">大規模組織向けのカスタムプラン。</Text>
                </CardContent>
              </Card>
            </ResponsiveGrid>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>
              flow=&quot;columns&quot; align=&quot;stretch&quot; · カンバンのレーン
            </CardTitle>
            <CardDescription>
              align=&quot;stretch&quot;（antd Row
              align）で全レーンが最も高いレーンと同じ高さになり、空の
              「完了」レーンも全高のドロップ先になる。省略時は columns フローが start、rows フローが
              stretch のまま。カードはドラッグでき、中の Select
              はドラッグ画像をカードの外へ広げない。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ScrollArea orientation="horizontal">
              <ResponsiveGrid flow="columns" align="stretch">
                {KANBAN_LANES.map((lane) => (
                  <Card
                    key={lane.key}
                    data-lane={lane.key}
                    onDragOver={(event) => event.preventDefault()}
                    onDrop={(event) => {
                      event.preventDefault();
                      moveTask(event.dataTransfer.getData("text/plain"), lane.key);
                    }}
                  >
                    <CardHeader>
                      <CardTitle>{lane.title}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <Flex direction="col" gap="sm">
                        {tasks
                          .filter((task) => task.lane === lane.key)
                          .map((task) => (
                            <Card
                              key={task.id}
                              draggable
                              data-task={task.id}
                              onDragStart={(event) =>
                                event.dataTransfer.setData("text/plain", task.id)
                              }
                            >
                              <CardContent>
                                <Flex direction="col" gap="xs">
                                  <Text tone="muted">{task.id}</Text>
                                  <Text>{task.title}</Text>
                                  <Select
                                    aria-label={`${task.id} 優先度`}
                                    name={`priority-${task.id}`}
                                    defaultValue={task.priority}
                                  >
                                    <SelectTrigger aria-label={`${task.id} 優先度`} size="sm">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="high">高</SelectItem>
                                      <SelectItem value="medium">中</SelectItem>
                                      <SelectItem value="low">低</SelectItem>
                                    </SelectContent>
                                  </Select>
                                </Flex>
                              </CardContent>
                            </Card>
                          ))}
                      </Flex>
                    </CardContent>
                  </Card>
                ))}
              </ResponsiveGrid>
            </ScrollArea>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>一覧と補助情報 2:1</CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveGrid columns={{ base: 1, lg: 3 }} pad={{ block: 2 }}>
              <ResponsiveGrid.Item span={{ base: 1, lg: 2 }}>
                <Flex id="grid-main" surface="muted" pad={3}>
                  <Text>メインの一覧</Text>
                </Flex>
              </ResponsiveGrid.Item>
              <ResponsiveGrid.Item>
                <Flex id="grid-rail" surface="muted" pad={3}>
                  <Text>補助情報</Text>
                </Flex>
              </ResponsiveGrid.Item>
            </ResponsiveGrid>
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}