import { useState } from "react";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
import {
  Form,
  Upload,
  type UploadFileItem,
  type UploadRequestContext,
} from "@godxjp/ui/data-entry";
import { Button, Text } from "@godxjp/ui/general";
import { Flex, PageContainer } from "@godxjp/ui/layout";
import { FilePlus2, Plus } from "lucide-react";

/**
 * Upload — drag-and-drop / button / avatar / picture file uploader (6 variants).
 * Wire onUpload to your media-service; call collectUploadCommitActions on submit.
 * UploadCropDialog is embedded internally by variant="avatar-crop" — not a public import.
 * Composed only from real @godxjp/ui components.
 */

/** Simulated transport: progress, abort, and retry remain observable in the preview. */
async function demoUpload(file: File, _item: UploadFileItem, context: UploadRequestContext) {
  for (let percent = 0; percent <= 100; percent += 20) {
    await new Promise((resolve) => setTimeout(resolve, 180));
    context.signal.throwIfAborted();
    context.onProgress(percent);
  }
  if (file.name.startsWith("fail")) throw new Error("アップロードに失敗しました。再試行できます。");
  return { mediaId: crypto.randomUUID() };
}

export default function Demo() {
  const [submittedFiles, setSubmittedFiles] = useState<string[]>([]);
  const [dropzoneItems, setDropzoneItems] = useState<UploadFileItem[]>([]);
  const [buttonItems, setButtonItems] = useState<UploadFileItem[]>([]);
  const [triggerIconItems, setTriggerIconItems] = useState<UploadFileItem[]>([]);
  const [pictureCardItems, setPictureCardItems] = useState<UploadFileItem[]>([]);
  const [pictureItem, setPictureItem] = useState<UploadFileItem[]>([]);
  const [avatarItem, setAvatarItem] = useState<UploadFileItem[]>([]);
  const [avatarCropItem, setAvatarCropItem] = useState<UploadFileItem[]>([]);
  /** A test-result drawer: one screenshot, one machine-readable result, one log, one archive. */
  const mixedItems: UploadFileItem[] = [
    {
      uid: "mixed-screenshot",
      name: "screenshot.png",
      size: 184 * 1024,
      mimeType: "image/png",
      status: "done",
      previewUrl:
        "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72'><rect width='72' height='72' fill='%23c9c6bd'/><circle cx='26' cy='26' r='9' fill='%238a877d'/></svg>",
    },
    // Server media whose thumbnail has not been generated yet: still an image, still marked as one.
    { uid: "mixed-original", name: "photo-original.png", size: 4 * 1024 * 1024, status: "done" },
    { uid: "mixed-result", name: "result.json", size: 12 * 1024, status: "done" },
    { uid: "mixed-log", name: "run.txt", size: 3 * 1024, status: "done" },
    { uid: "mixed-bundle", name: "evidence.zip", size: 2 * 1024 * 1024, status: "done" },
    { uid: "mixed-spec", name: "spec.pdf", size: 640 * 1024, status: "done" },
    { uid: "mixed-dump", name: "device-dump", size: 96 * 1024, status: "done" },
  ];
  const failedItems: UploadFileItem[] = [
    {
      uid: "failed-invoice",
      name: "invoice-too-large.pdf",
      size: 25 * 1024 * 1024,
      mimeType: "application/pdf",
      status: "error",
      error: "20 MB 以下のファイルを選択してください",
    },
  ];

  return (
    <PageContainer
      title="Upload"
      subtitle="ファイルアップロード · 6バリアント（dropzone / button / picture-card / picture / avatar / avatar-crop）"
    >
      <Flex direction="col" gap="lg">
        <Card>
          <CardHeader>
            <CardTitle level={2}>Multipart form</CardTitle>
            <CardDescription>
              選択・ドロップ・貼り付けしたファイルをフォームでまとめて送信します。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Form
              onReset={() => setSubmittedFiles([])}
              onSubmit={(event) => {
                event.preventDefault();
                const data = new FormData(event.currentTarget);
                setSubmittedFiles(
                  data
                    .getAll("attachments[]")
                    .filter((value): value is File => value instanceof File)
                    .map((value) => value.name),
                );
              }}
            >
              <Upload name="attachments[]" pastable maxCount={3} />
              <Button type="submit">添付ファイルを確認</Button>
              <Button type="reset" variant="outline">
                リセット
              </Button>
              <Text>{submittedFiles.join("、")}</Text>
            </Form>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Dropzone</CardTitle>
            <CardDescription>
              ドラッグ＆ドロップエリア · PDF・Excel などの書類添付に使用。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Upload
              variant="dropzone"
              value={dropzoneItems}
              onValueChange={setDropzoneItems}
              accept=".pdf,.xlsx,.csv"
              pastable
              maxCount={5}
              maxSizeBytes={20 * 1024 * 1024}
              onUpload={demoUpload}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>List type · 添付ファイル一覧</CardTitle>
            <CardDescription>
              listType は variant と独立した軸です。dropzone のまま listType=&quot;picture&quot;
              にすると、画像はサムネイル、それ以外はファイル種別のアイコンで並びます。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Upload
              variant="dropzone"
              listType="picture"
              value={mixedItems}
              onValueChange={() => {}}
              onDownload={() => {}}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Error and recovery</CardTitle>
            <CardDescription>
              失敗したファイルは再試行できます。処理中のファイルはキャンセルできます。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Upload variant="button" value={failedItems} onValueChange={() => {}} removable />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Disabled · populated</CardTitle>
            <CardDescription>
              権限不足時も既存ファイル名を保ったまま操作を無効化する。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Upload variant="button" value={failedItems} onValueChange={() => {}} disabled />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Button</CardTitle>
            <CardDescription>
              コンパクトなボタン形式 · CSVインポートなどの管理画面向け。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Upload
              variant="button"
              value={buttonItems}
              onValueChange={setButtonItems}
              accept=".csv"
              onUpload={demoUpload}
            >
              CSVをインポート
            </Upload>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>triggerIcon · 「新規作成」がアップロードのとき</CardTitle>
            <CardDescription>
              variant=&quot;button&quot;
              のトリガーが描くグリフを差し替える。コンポーネントを渡す（triggerIcon=&#123;Plus&#125;、
              要素ではない）。triggerVariant
              は強弱しか変えられないので、実体はアップロードでも「新規作成」として並ぶボタンは
              これまで矢印を背負うしかなかった。クラスと余白と aria-hidden
              はライブラリ側が持ったままなので、差し替えても大きさは --upload-row-icon-size
              のまま、読み上げにも出ない。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Flex direction="row" gap="md" wrap align="center">
              <Upload
                variant="button"
                triggerIcon={Plus}
                triggerVariant="default"
                value={triggerIconItems}
                onValueChange={setTriggerIconItems}
                accept=".pdf"
                onUpload={demoUpload}
              >
                資料を追加
              </Upload>
              <Upload
                variant="button"
                triggerIcon={FilePlus2}
                triggerSize="icon-sm"
                triggerVariant="ghost"
                value={[]}
                onValueChange={() => {}}
                aria-label="請求書を添付"
              />
              <Upload variant="button" value={[]} onValueChange={() => {}}>
                既定のグリフ
              </Upload>
            </Flex>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Picture Card</CardTitle>
            <CardDescription>
              96×96 サムネイルグリッド · 商品ギャラリーや画像一覧に使用。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Upload
              variant="picture-card"
              value={pictureCardItems}
              onValueChange={setPictureCardItems}
              accept="image/*"
              maxCount={6}
              onUpload={demoUpload}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Picture</CardTitle>
            <CardDescription>
              単一画像プレビュー · コンテンツのカバー画像選択に使用。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Upload
              variant="picture"
              value={pictureItem}
              onValueChange={setPictureItem}
              accept="image/*"
              maxCount={1}
              onUpload={demoUpload}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Avatar</CardTitle>
            <CardDescription>円形の単一画像ピッカー · ユーザーアイコン変更に使用。</CardDescription>
          </CardHeader>
          <CardContent>
            <Upload
              variant="avatar"
              value={avatarItem}
              onValueChange={setAvatarItem}
              accept="image/*"
              onUpload={demoUpload}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle level={2}>Avatar Crop</CardTitle>
            <CardDescription>
              アバター選択後にトリミングダイアログを開く。UploadCropDialog は
              内部モーダルとして自動で埋め込まれるため、個別インポート不要。
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Upload
              variant="avatar-crop"
              value={avatarCropItem}
              onValueChange={setAvatarCropItem}
              accept="image/*"
              maxSizeBytes={5 * 1024 * 1024}
              onUpload={demoUpload}
            />
          </CardContent>
        </Card>
      </Flex>
    </PageContainer>
  );
}