import { useState } from "react";
import { Flex, PageContainer, ResponsiveGrid, Separator, SplitPane } from "@godxjp/ui/layout";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Badge,
  StatCard,
} from "@godxjp/ui/data-display";
import { Button, Text } from "@godxjp/ui/general";
import { FileText, Building2, Calendar, CreditCard, ArrowRight } from "lucide-react";

/**
 * SplitPane · main + fixed aside panel.
 * Shows: main list + detail panel, asideWidth sm/md, nested inside PageContainer.
 * It OWNS its query container (container-type: inline-size), so the two-column split
 * is chosen from the PANE's own width (≥48rem), not the viewport — a narrow embedded
 * pane on a large screen correctly stays single-column.
 * Composed only from real @godxjp/ui components.
 *
 * NOTE: <Flex> defaults to direction="row"; vertical stacks set direction="col"
 * explicitly. Spacing comes from the Flex `gap` prop or valid 4-point utilities
 * (gap-3, pt-2, ml-3) · never named classes like `gap-md` (no such utility exists).
 */

type Invoice = {
  id: string;
  partner: string;
  date: string;
  amount: string;
  status: "承認済" | "保留中" | "未承認";
};

const INVOICES: Invoice[] = [
  {
    id: "INV-0241",
    partner: "株式会社アクメ",
    date: "2026-05-31",
    amount: "¥840,000",
    status: "承認済",
  },
  {
    id: "INV-0240",
    partner: "グローバル商事",
    date: "2026-05-29",
    amount: "¥320,000",
    status: "保留中",
  },
  {
    id: "INV-0239",
    partner: "イニテック有限会社",
    date: "2026-05-28",
    amount: "¥1,200,000",
    status: "承認済",
  },
  {
    id: "INV-0238",
    partner: "フューチャー工業",
    date: "2026-05-26",
    amount: "¥460,000",
    status: "未承認",
  },
  {
    id: "INV-0237",
    partner: "東京メディア",
    date: "2026-05-24",
    amount: "¥980,000",
    status: "承認済",
  },
];

const STATUS_TONE = {
  承認済: "success",
  保留中: "warning",
  未承認: "destructive",
} as const;

const CHANNEL_MESSAGES = [
  { author: "田中", at: "09:12", body: "今月の請求書、承認お願いします。" },
  { author: "佐藤", at: "09:20", body: "アクメ社の分だけ金額が前月と違うようです。" },
  { author: "鈴木", at: "09:31", body: "内訳を確認してスレッドに貼りました。" },
];

const THREAD_REPLIES = [
  { author: "鈴木", body: "追加の保守費用が乗っています。" },
  { author: "田中", body: "了解、契約書と突き合わせます。" },
  { author: "佐藤", body: "ではこのまま承認で問題なさそうです。" },
];

const yenFormat = new Intl.NumberFormat("ja-JP", {
  style: "currency",
  currency: "JPY",
  maximumFractionDigits: 0,
});
const yen = (n: number) => yenFormat.format(Math.round(n));
const toNumber = (amount: string) => Number(amount.replace(/[^0-9]/g, ""));

export default function Demo() {
  const [selectedId, setSelectedId] = useState<string>("INV-0241");
  const [asideWidth, setAsideWidth] = useState<"sm" | "md">("md");
  const [threadOpen, setThreadOpen] = useState(true);

  const selected = INVOICES.find((inv) => inv.id === selectedId) ?? INVOICES[0];
  const base = toNumber(selected.amount);

  return (
    <PageContainer
      title="SplitPane デモ"
      subtitle="請求書一覧 + 詳細パネル"
      breadcrumb={[{ label: "ホーム", to: "/" }, { label: "請求書一覧" }]}
      extra={
        <Flex direction="row" gap="sm">
          <Button
            size="sm"
            variant={asideWidth === "sm" ? "default" : "outline"}
            onClick={() => setAsideWidth("sm")}
          >
            asideWidth=&quot;sm&quot;
          </Button>
          <Button
            size="sm"
            variant={asideWidth === "md" ? "default" : "outline"}
            onClick={() => setAsideWidth("md")}
          >
            asideWidth=&quot;md&quot;
          </Button>
        </Flex>
      }
    >
      <Flex direction="col" gap="lg">
        {/* ── Example 1: Invoice list + detail panel ── */}
        <SplitPane
          asideLabel="請求書詳細"
          asideWidth={asideWidth}
          aside={
            <Flex direction="col" gap="md">
              <Card>
                <CardHeader>
                  <Flex direction="row" justify="between" align="center" gap="sm">
                    <CardTitle level={2} className="text-base">
                      {selected.id}
                    </CardTitle>
                    <Badge tone={STATUS_TONE[selected.status]}>{selected.status}</Badge>
                  </Flex>
                  <CardDescription>請求書詳細</CardDescription>
                </CardHeader>
                <CardContent>
                  <Flex direction="col" gap="md">
                    <Flex direction="row" align="center" gap="sm">
                      <Building2 className="text-muted-foreground size-4 shrink-0" />
                      <Flex direction="col" gap="xs">
                        <Text size="xs" tone="muted">
                          取引先
                        </Text>
                        <Text weight="medium">{selected.partner}</Text>
                      </Flex>
                    </Flex>
                    <Flex direction="row" align="center" gap="sm">
                      <Calendar className="text-muted-foreground size-4 shrink-0" />
                      <Flex direction="col" gap="xs">
                        <Text size="xs" tone="muted">
                          請求日
                        </Text>
                        <Text tabular>{selected.date}</Text>
                      </Flex>
                    </Flex>
                    <Flex direction="row" align="center" gap="sm">
                      <CreditCard className="text-muted-foreground size-4 shrink-0" />
                      <Flex direction="col" gap="xs">
                        <Text size="xs" tone="muted">
                          金額（税抜）
                        </Text>
                        <Text size="lg" weight="bold" tabular>
                          {selected.amount}
                        </Text>
                      </Flex>
                    </Flex>
                  </Flex>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle level={2} className="text-sm">
                    明細概要
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <Flex direction="col" gap="xs">
                    <Flex direction="row" justify="between">
                      <Text tone="muted">小計</Text>
                      <Text tabular>{selected.amount}</Text>
                    </Flex>
                    <Flex direction="row" justify="between">
                      <Text tone="muted">消費税 (10%)</Text>
                      <Text tabular>{yen(base * 0.1)}</Text>
                    </Flex>
                    <Separator />
                    <div>
                      <Flex direction="row" justify="between">
                        <Text weight="bold">合計</Text>
                        <Text weight="bold" tabular>
                          {yen(base * 1.1)}
                        </Text>
                      </Flex>
                    </div>
                  </Flex>
                </CardContent>
              </Card>

              <Flex direction="col" gap="sm">
                <Button className="w-full" disabled={selected.status === "承認済"}>
                  <ArrowRight />
                  承認
                </Button>
                <Button variant="outline" className="w-full">
                  PDF ダウンロード
                </Button>
              </Flex>
            </Flex>
          }
        >
          {/* Main: invoice list — gap="sm" so the bordered cards breathe (xs let the
              borders nearly collide against the airy gap="md" detail aside). */}
          <Flex direction="col" gap="sm">
            {INVOICES.map((inv) => {
              const active = selectedId === inv.id;
              return (
                <Card
                  key={inv.id}
                  role="button"
                  tabIndex={0}
                  aria-pressed={active}
                  aria-label={`請求書 ${inv.id} ${inv.partner}`}
                  className={`focus-visible:ring-ring hover:border-primary/40 cursor-pointer transition-colors focus-visible:ring-2 focus-visible:outline-none ${
                    active ? "border-primary bg-primary/5" : ""
                  }`}
                  onClick={() => setSelectedId(inv.id)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" || e.key === " ") {
                      e.preventDefault();
                      setSelectedId(inv.id);
                    }
                  }}
                >
                  <CardContent>
                    <Flex direction="row" align="center" gap="md">
                      <FileText className="text-muted-foreground size-5 shrink-0" />
                      <Flex direction="col" gap="xs" className="min-w-0 flex-1">
                        <Flex direction="row" justify="between" align="center" gap="sm">
                          <Text size="xs" tone="muted" mono>
                            {inv.id}
                          </Text>
                          <Badge tone={STATUS_TONE[inv.status]}>{inv.status}</Badge>
                        </Flex>
                        <Flex direction="row" justify="between" align="baseline" gap="sm">
                          <Text weight="medium" truncate>
                            {inv.partner}
                          </Text>
                          <Text weight="bold" tabular className="shrink-0">
                            {inv.amount}
                          </Text>
                        </Flex>
                        <Text size="xs" tone="muted" tabular>
                          {inv.date}
                        </Text>
                      </Flex>
                    </Flex>
                  </CardContent>
                </Card>
              );
            })}
          </Flex>
        </SplitPane>

        {/* ── Example 2: Summary stats + aside narration ── */}
        <SplitPane
          asideLabel="監査ログ詳細"
          asideWidth="sm"
          aside={
            <Card>
              <CardHeader>
                <CardTitle level={2} className="text-sm">
                  利用ガイド
                </CardTitle>
              </CardHeader>
              <CardContent>
                <Flex direction="col" gap="sm">
                  <Text as="p" tone="muted">
                    <Text as="strong" weight="bold">
                      asideWidth=&quot;sm&quot;
                    </Text>{" "}
                    (20rem) · フィルター、統計サマリー、クイック操作などのコンパクトパネル向け。
                  </Text>
                  <Text as="p" tone="muted">
                    <Text as="strong" weight="bold">
                      asideWidth=&quot;md&quot;
                    </Text>{" "}
                    (22rem) · 詳細フォーム、タイムライン、長いメタデータリスト向け。
                  </Text>
                  <Text as="p" tone="muted">
                    パネル自身の幅が 48rem 未満になると縦積みにフォールバックします
                    （ビューポートではなくコンテナ基準）。 常にサイドバイサイドが必要な場合は CSS
                    Grid を使用してください。
                  </Text>
                </Flex>
              </CardContent>
            </Card>
          }
        >
          <Flex direction="col" gap="md">
            <Text weight="medium">月次サマリー</Text>
            <ResponsiveGrid columns={{ sm: 2, md: 2, lg: 2 }} gap="md">
              <StatCard label="請求総額" value="¥3,800,000" delta="+8%" />
              <StatCard label="承認済件数" value="3" hint="全5件中" />
              <StatCard label="保留中" value="1" delta="-2" />
              <StatCard label="未承認" value="1" delta="+1" inverse />
            </ResponsiveGrid>
          </Flex>
        </SplitPane>

        {/* ── Example 3: Collapsible rail — aside={null} closes it WITHOUT remounting main ── */}
        <Card>
          <CardHeader>
            <CardTitle level={2}>開閉できるパネル · {"aside={null}"}</CardTitle>
            <CardDescription>
              {"aside={null}"} を渡すと <code>&lt;aside&gt;</code> は描画されず、1 カラム（gap
              なし）に戻る。ラッパー（scope / pane / main）は残るので <code>children</code> の React
              ツリー上の位置は変わらず、
              再マウントされない（＝一覧のスクロール位置と状態が保たれる）。 閉じるときに{" "}
              <code>SplitPane</code> ごと外す書き方は、ツリーの深さが変わるため
              主カラムが再マウントされる。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              <Flex direction="row" align="center" gap="sm">
                <Button
                  size="sm"
                  variant={threadOpen ? "default" : "outline"}
                  onClick={() => setThreadOpen((open) => !open)}
                >
                  {threadOpen ? "スレッドを閉じる" : "スレッドを開く"}
                </Button>
                <Text size="xs" tone="muted" mono>
                  {threadOpen ? "aside={<Thread />}" : "aside={null}"}
                </Text>
              </Flex>
              <SplitPane
                asideLabel="スレッド"
                asideWidth="md"
                aside={
                  threadOpen ? (
                    <Card>
                      <CardHeader>
                        <CardTitle level={3} className="text-sm">
                          スレッド
                        </CardTitle>
                        <CardDescription>返信 3 件</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <Flex direction="col" gap="sm">
                          {THREAD_REPLIES.map((reply) => (
                            <Flex key={reply.author} direction="col" gap="xs">
                              <Text size="xs" tone="muted">
                                {reply.author}
                              </Text>
                              <Text>{reply.body}</Text>
                            </Flex>
                          ))}
                        </Flex>
                      </CardContent>
                    </Card>
                  ) : null
                }
              >
                <Card>
                  <CardHeader>
                    <CardTitle level={3} className="text-sm">
                      #general
                    </CardTitle>
                    <CardDescription>
                      パネルを開閉しても、この一覧は再マウントされない
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Flex direction="col" gap="sm">
                      {CHANNEL_MESSAGES.map((message) => (
                        <Flex key={message.author} direction="col" gap="xs">
                          <Flex direction="row" justify="between" align="baseline" gap="sm">
                            <Text weight="medium">{message.author}</Text>
                            <Text size="xs" tone="muted" tabular>
                              {message.at}
                            </Text>
                          </Flex>
                          <Text tone="muted">{message.body}</Text>
                        </Flex>
                      ))}
                    </Flex>
                  </CardContent>
                </Card>
              </SplitPane>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Container stress · narrow vs wide embed</CardTitle>
            <CardDescription>
              大きな viewport 内でも、パネル自身の幅で分割が決まる。狭い埋め込み（約 28rem）は 1
              カラムに潰れ、広い埋め込み（約 56rem）は 2 カラムに分割する。ビューポート 幅は同一。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="col" gap="md">
              {/* Narrow embed → stays single column (the container is < 48rem). */}
              <Card className="max-w-md">
                <CardContent>
                  <Text size="xs" tone="muted">
                    約 28rem のコンテナ → 縦積み
                  </Text>
                  <SplitPane
                    asideLabel="補助パネル（狭い埋め込み）"
                    asideWidth="sm"
                    aside={
                      <Card variant="muted">
                        <CardContent>補助パネル</CardContent>
                      </Card>
                    }
                  >
                    <Card variant="muted">
                      <CardContent>メインコンテンツ</CardContent>
                    </Card>
                  </SplitPane>
                </CardContent>
              </Card>
              {/* Wide embed → splits into two columns (the container is ≥ 48rem). */}
              <Card className="max-w-4xl">
                <CardContent>
                  <Text size="xs" tone="muted">
                    約 56rem のコンテナ → 2 カラム
                  </Text>
                  <SplitPane
                    asideLabel="補助パネル（広い埋め込み）"
                    asideWidth="sm"
                    aside={
                      <Card variant="muted">
                        <CardContent>補助パネル</CardContent>
                      </Card>
                    }
                  >
                    <Card variant="muted">
                      <CardContent>メインコンテンツ</CardContent>
                    </Card>
                  </SplitPane>
                </CardContent>
              </Card>
            </Flex>
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}