import { lazy, Suspense, useState, type FormEvent } from 'react';
import { errorMessage } from '../api/client';
import { deleteModel, listModels, setPrimaryModel, updateModel, uploadModel } from '../api/endpoints';
import type { Model, ModelFormat, ModelUpdate, PublishStatus } from '../api/types';
import { MODEL_FORMATS } from '../api/types';
import { formatBytes, formatCount, formatDateTime } from '../lib/format';
import { MODEL_FORMAT_LABELS, STATUS_OPTIONS, drivableSummary, type DrivableSummary } from '../lib/labels';
import { hasErrors, requireText, validateSourceFields, type FieldErrors } from '../lib/validation';
import { useAsync } from '../lib/useAsync';
import {
  ConfirmDialog,
  Empty,
  ErrorBox,
  Field,
  FormatBadge,
  Loading,
  Modal,
  Notice,
  Pagination,
  SourceCell,
  SourceFieldsForm,
  StatusBadge,
  type SourceFormValue,
} from '../components/ui';

// three + @pixiv/three-vrm 体积较大，按需懒加载，避免拖慢其他页面首屏。
const VrmPreview = lazy(async () => {
  const module = await import('../components/VrmPreview');
  return { default: module.VrmPreview };
});

const PAGE_SIZE = 20;
const ACCEPT_EXT = '.vrm,.glb,.gltf,.fbx,.zip';

/** 能用 GLTFLoader 预览的格式：GLB / glTF 与 VRM 同属 glTF 家族，仅 FBX 不支持。 */
const PREVIEWABLE_FORMATS: ReadonlyArray<ModelFormat> = ['vrm', 'glb', 'gltf'];

/** 可驱动性 → 徽标配色（绿 / 黄 / 红）。 */
const DRIVABLE_BADGE: Record<DrivableSummary['kind'], string> = {
  ok: 'badge-published',
  warn: 'badge-pending',
  error: 'badge-rejected',
};

interface ModelFilters {
  q: string;
  format: string;
  status: PublishStatus | '';
  page: number;
}

interface ModelFormState extends SourceFormValue {
  name: string;
  status: PublishStatus;
  isPrimary: boolean;
}

interface ModelEditState extends SourceFormValue {
  name: string;
  status: PublishStatus;
}

const EMPTY_MODEL_FORM: ModelFormState = {
  name: '',
  status: 'draft',
  isPrimary: false,
  sourceType: '',
  sourceName: '',
  sourceUrl: '',
  license: '',
  author: '',
};

function validateModelForm(form: ModelFormState | ModelEditState): FieldErrors {
  const errors: FieldErrors = {};
  requireText(form.name, 'name', '模型名称', errors, 200);
  validateSourceFields(form, errors);
  return errors;
}

/* ------------------------------------------------------------ 上传弹窗 */

function ModelUploadModal({
  onClose,
  onSaved,
}: {
  onClose: () => void;
  onSaved: (message: string) => void;
}) {
  const [form, setForm] = useState<ModelFormState>(EMPTY_MODEL_FORM);
  const [file, setFile] = useState<File | null>(null);
  const [errors, setErrors] = useState<FieldErrors>({});
  const [saving, setSaving] = useState(false);
  const [serverError, setServerError] = useState<string | null>(null);

  const patch = (part: Partial<ModelFormState>): void => {
    setForm((previous) => ({ ...previous, ...part }));
  };

  const onSubmit = async (event: FormEvent): Promise<void> => {
    event.preventDefault();
    const nextErrors = validateModelForm(form);
    if (!file) nextErrors.file = '请选择模型文件';
    setErrors(nextErrors);
    if (hasErrors(nextErrors) || !file) return;
    if (form.sourceType === '') return;

    setSaving(true);
    setServerError(null);
    try {
      await uploadModel({
        file,
        name: form.name.trim(),
        isPrimary: form.isPrimary,
        status: form.status,
        sourceType: form.sourceType,
        sourceName: form.sourceName.trim(),
        sourceUrl: form.sourceUrl.trim(),
        license: form.license.trim(),
        author: form.author.trim(),
      });
      onSaved('模型已上传');
    } catch (cause) {
      setServerError(errorMessage(cause));
    } finally {
      setSaving(false);
    }
  };

  return (
    <Modal
      title="上传模型"
      size="xl"
      onClose={onClose}
      footer={
        <>
          <button type="button" className="btn btn-ghost" onClick={onClose} disabled={saving}>
            取消
          </button>
          <button type="submit" form="model-upload-form" className="btn btn-primary" disabled={saving}>
            {saving ? '上传中…' : '上传'}
          </button>
        </>
      }
    >
      <form id="model-upload-form" className="form" onSubmit={onSubmit}>
        {serverError ? <Notice kind="error">{serverError}</Notice> : null}

        <div className="form-grid">
          <Field
            label="模型文件 file"
            required
            error={errors.file}
            hint={`支持 ${ACCEPT_EXT}，单文件上限 512 MiB；上传 .zip（内含 .pmx 的 MMD 模型包）时服务端会自动解压并转换，转换成功即设为默认模型`}
          >
            <input
              type="file"
              accept={ACCEPT_EXT}
              onChange={(event) => setFile(event.target.files?.[0] ?? null)}
            />
          </Field>
          <Field label="模型名称 name" required error={errors.name}>
            <input
              type="text"
              value={form.name}
              maxLength={200}
              onChange={(event) => patch({ name: event.target.value })}
            />
          </Field>
          <Field label="状态 status">
            <select value={form.status} onChange={(event) => patch({ status: event.target.value as PublishStatus })}>
              {STATUS_OPTIONS.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </Field>
          <Field label="设为全局默认模型 isPrimary" hint="同一时刻全库至多一个默认模型（VRM 优先）">
            <input
              type="checkbox"
              checked={form.isPrimary}
              onChange={(event) => patch({ isPrimary: event.target.checked })}
            />
          </Field>
        </div>

        <SourceFieldsForm value={form} errors={errors} onChange={patch} disabled={saving} />
      </form>
    </Modal>
  );
}

/* ------------------------------------------------------------ 编辑弹窗 */

function ModelEditModal({
  model,
  onClose,
  onSaved,
}: {
  model: Model;
  onClose: () => void;
  onSaved: (message: string) => void;
}) {
  const [form, setForm] = useState<ModelEditState>({
    name: model.name,
    status: model.status,
    sourceType: model.sourceType,
    sourceName: model.sourceName,
    sourceUrl: model.sourceUrl,
    license: model.license,
    author: model.author,
  });
  const [errors, setErrors] = useState<FieldErrors>({});
  const [saving, setSaving] = useState(false);
  const [serverError, setServerError] = useState<string | null>(null);

  const patch = (part: Partial<ModelEditState>): void => {
    setForm((previous) => ({ ...previous, ...part }));
  };

  const onSubmit = async (event: FormEvent): Promise<void> => {
    event.preventDefault();
    const nextErrors = validateModelForm(form);
    setErrors(nextErrors);
    if (hasErrors(nextErrors) || form.sourceType === '') return;

    setSaving(true);
    setServerError(null);
    try {
      const payload: ModelUpdate = {
        name: form.name.trim(),
        status: form.status,
        sourceType: form.sourceType,
        sourceName: form.sourceName.trim(),
        sourceUrl: form.sourceUrl.trim(),
        license: form.license.trim(),
        author: form.author.trim(),
      };
      await updateModel(model.id, payload);
      onSaved('模型已更新');
    } catch (cause) {
      setServerError(errorMessage(cause));
    } finally {
      setSaving(false);
    }
  };

  return (
    <Modal
      title={`编辑模型 #${model.id}`}
      size="xl"
      onClose={onClose}
      footer={
        <>
          <button type="button" className="btn btn-ghost" onClick={onClose} disabled={saving}>
            取消
          </button>
          <button type="submit" form="model-edit-form" className="btn btn-primary" disabled={saving}>
            {saving ? '保存中…' : '保存'}
          </button>
        </>
      }
    >
      <form id="model-edit-form" className="form" onSubmit={onSubmit}>
        {serverError ? <Notice kind="error">{serverError}</Notice> : null}
        <div className="form-grid">
          <Field label="模型名称 name" required error={errors.name}>
            <input
              type="text"
              value={form.name}
              maxLength={200}
              onChange={(event) => patch({ name: event.target.value })}
            />
          </Field>
          <Field label="状态 status">
            <select value={form.status} onChange={(event) => patch({ status: event.target.value as PublishStatus })}>
              {STATUS_OPTIONS.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </Field>
        </div>
        <SourceFieldsForm value={form} errors={errors} onChange={patch} disabled={saving} />
      </form>
    </Modal>
  );
}

/* ------------------------------------------------------------------ 页面 */

export function ModelsPage() {
  const [filters, setFilters] = useState<ModelFilters>({ q: '', format: '', status: '', page: 1 });
  const [qInput, setQInput] = useState('');
  const [previewId, setPreviewId] = useState<number | null>(null);
  const [uploadOpen, setUploadOpen] = useState(false);
  const [editTarget, setEditTarget] = useState<Model | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<Model | null>(null);
  const [busyId, setBusyId] = useState<number | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [notice, setNotice] = useState<{ kind: 'success' | 'error'; text: string } | null>(null);

  const state = useAsync(
    () =>
      listModels({
        page: filters.page,
        pageSize: PAGE_SIZE,
        q: filters.q,
        format: filters.format,
        status: filters.status,
      }),
    [filters.q, filters.format, filters.status, filters.page],
  );

  const items = state.data?.items ?? [];
  const previewModel = items.find((model) => model.id === previewId) ?? null;

  const onSaved = (message: string): void => {
    setUploadOpen(false);
    setEditTarget(null);
    setNotice({ kind: 'success', text: message });
    state.reload();
  };

  const makePrimary = async (model: Model): Promise<void> => {
    setBusyId(model.id);
    try {
      await setPrimaryModel(model.id);
      setNotice({ kind: 'success', text: `已将「${model.name}」设为默认模型` });
      state.reload();
    } catch (cause) {
      setNotice({ kind: 'error', text: errorMessage(cause) });
    } finally {
      setBusyId(null);
    }
  };

  const confirmDelete = async (): Promise<void> => {
    if (!deleteTarget) return;
    setDeleting(true);
    try {
      await deleteModel(deleteTarget.id);
      if (previewId === deleteTarget.id) setPreviewId(null);
      setNotice({ kind: 'success', text: `已删除模型「${deleteTarget.name}」（软删除）` });
      setDeleteTarget(null);
      state.reload();
    } catch (cause) {
      setNotice({ kind: 'error', text: errorMessage(cause) });
    } finally {
      setDeleting(false);
    }
  };

  const previewUnsupported =
    previewModel && !PREVIEWABLE_FORMATS.includes(previewModel.format)
      ? `${MODEL_FORMAT_LABELS[previewModel.format]} 无法用 GLTFLoader 预览（契约中 FBX 仅归档，请先转换为 GLB/VRM）。`
      : null;

  return (
    <div className="page">
      <header className="page-head">
        <div>
          <h1>模型管理</h1>
          <p className="muted">T-WEB-009 · VRM 优先，来源五元组必填，支持 3D 预览与全局默认模型</p>
        </div>
        <div className="page-head-actions">
          <button type="button" className="btn btn-ghost" onClick={state.reload} disabled={state.loading}>
            {state.loading ? '刷新中…' : '刷新'}
          </button>
          <button type="button" className="btn btn-primary" onClick={() => setUploadOpen(true)}>
            + 上传模型
          </button>
        </div>
      </header>

      {notice ? (
        <Notice kind={notice.kind} onClose={() => setNotice(null)}>
          {notice.text}
        </Notice>
      ) : null}

      <form
        className="filter-bar"
        onSubmit={(event) => {
          event.preventDefault();
          setFilters((previous) => ({ ...previous, q: qInput.trim(), page: 1 }));
        }}
      >
        <input
          type="search"
          placeholder="搜索模型名称（q）"
          value={qInput}
          onChange={(event) => setQInput(event.target.value)}
        />
        <select
          value={filters.format}
          onChange={(event) =>
            setFilters((previous) => ({ ...previous, format: event.target.value, page: 1 }))
          }
        >
          <option value="">全部格式</option>
          {MODEL_FORMATS.map((format) => (
            <option key={format} value={format}>
              {MODEL_FORMAT_LABELS[format]}（{format}）
            </option>
          ))}
        </select>
        <select
          value={filters.status}
          onChange={(event) =>
            setFilters((previous) => ({
              ...previous,
              status: event.target.value as PublishStatus | '',
              page: 1,
            }))
          }
        >
          <option value="">全部状态</option>
          {STATUS_OPTIONS.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        <button type="submit" className="btn btn-ghost">
          查询
        </button>
        <button
          type="button"
          className="btn btn-ghost"
          onClick={() => {
            setQInput('');
            setFilters({ q: '', format: '', status: '', page: 1 });
          }}
        >
          重置
        </button>
      </form>

      <div className="split-layout">
        <section className="panel">
          {state.error ? <ErrorBox message={state.error} onRetry={state.reload} /> : null}
          {state.loading && !state.data ? <Loading text="正在加载模型…" /> : null}
          {!state.loading && !state.error && items.length === 0 ? (
            <Empty text="还没有模型，点击右上角上传第一个 VRM 模型。" />
          ) : null}

          {items.length > 0 ? (
            <div className="table-wrap">
              <table className="table">
                <thead>
                  <tr>
                    <th>预览缩略图</th>
                    <th className="col-name">名称</th>
                    <th>格式</th>
                    <th>VRM 版本</th>
                    <th>是否默认</th>
                    <th className="col-source">来源</th>
                    <th>许可</th>
                    <th>状态</th>
                    <th className="col-actions">操作</th>
                  </tr>
                </thead>
                <tbody>
                  {items.map((model) => (
                    <tr key={model.id} className={model.id === previewId ? 'row-active' : undefined}>
                      <td>
                        <button
                          type="button"
                          className="thumb-link"
                          onClick={() => setPreviewId(model.id)}
                          title="点击预览"
                        >
                          {model.thumbnailUrl ? (
                            <img
                              className="thumb-sm"
                              src={model.thumbnailUrl}
                              alt={`${model.name} 缩略图`}
                            />
                          ) : (
                            <FormatBadge format={model.format} kind="model" />
                          )}
                        </button>
                      </td>
                      <td className="col-name">
                        <div className="cell-title">{model.name}</div>
                        <div className="muted small">
                          #{model.id} · {formatBytes(model.fileSize)} · {formatDateTime(model.updatedAt)}
                        </div>
                      </td>
                      <td>
                        <FormatBadge format={model.format} kind="model" />
                        {!model.usable ? (
                          <span
                            className="badge badge-rejected"
                            title={model.unusableReason ?? '未产出 VRM，不进入客户端目录'}
                          >
                            不可用
                          </span>
                        ) : null}
                      </td>
                      <td className="mono">{model.vrmVersion ?? '—'}</td>
                      <td>
                        {model.isPrimary ? (
                          <span className="badge badge-primary">默认 ★</span>
                        ) : (
                          <span className="muted">—</span>
                        )}
                      </td>
                      <td className="col-source">
                        <SourceCell source={model} />
                      </td>
                      <td>
                        <div className="mono small">{model.license || '—'}</div>
                      </td>
                      <td>
                        <StatusBadge status={model.status} />
                      </td>
                      <td className="col-actions">
                        <button type="button" className="link-btn" onClick={() => setPreviewId(model.id)}>
                          预览
                        </button>
                        <button
                          type="button"
                          className="link-btn"
                          onClick={() => makePrimary(model)}
                          disabled={model.isPrimary || busyId === model.id}
                          title={model.isPrimary ? '已是默认模型' : 'POST /api/models/:id/primary'}
                        >
                          {busyId === model.id ? '设置中…' : '设为默认'}
                        </button>
                        <button type="button" className="link-btn" onClick={() => setEditTarget(model)}>
                          编辑
                        </button>
                        <button type="button" className="link-btn link-danger" onClick={() => setDeleteTarget(model)}>
                          删除
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : null}

          {state.data ? (
            <Pagination
              page={state.data.page ?? filters.page}
              pageSize={state.data.pageSize ?? PAGE_SIZE}
              total={state.data.total ?? 0}
              disabled={state.loading}
              onChange={(page) => setFilters((previous) => ({ ...previous, page }))}
            />
          ) : null}
        </section>

        <aside className="preview-column">
          <Suspense
            fallback={
              <div className="panel">
                <Loading text="正在加载 3D 预览模块…" />
              </div>
            }
          >
            <VrmPreview
              fileUrl={previewModel?.fileUrl ?? null}
              name={previewModel ? `${previewModel.name}（#${previewModel.id}）` : ''}
              unsupportedReason={previewUnsupported}
            />
          </Suspense>
          <div className="panel preview-meta">
            <header className="panel-head">
              <h2>预览说明</h2>
            </header>
            <div className="panel-body">
              <p className="muted small">
                通过 GLTFLoader + VRMLoaderPlugin 加载 <code>fileUrl</code>：VRM / GLB / glTF 同属 glTF
                家族，都走这条管线（非 VRM 的 GLB 按普通 glTF 渲染，VRM 0.x 自动执行 180° 旋转）；
                使用 <code>requestAnimationFrame</code> 循环调用 <code>vrm.update(delta)</code>，
                卸载时释放渲染器、几何体、材质与贴图。FBX 不在预览范围内。
              </p>
              {previewModel ? (
                <ul className="kv-list">
                  <li>
                    <span className="muted">文件地址</span>
                    <span className="break">{previewModel.fileUrl ?? '—'}</span>
                  </li>
                  <li>
                    <span className="muted">格式 / VRM 版本</span>
                    <span>
                      {MODEL_FORMAT_LABELS[previewModel.format]} / {previewModel.vrmVersion ?? '—'}
                    </span>
                  </li>
                  <li>
                    <span className="muted">是否默认</span>
                    <span>{previewModel.isPrimary ? '是' : '否'}</span>
                  </li>
                  {previewModel.stats ? (
                    <>
                      <li>
                        <span className="muted">面数 / 顶点数</span>
                        <span className="mono">
                          {formatCount(previewModel.stats.triangles)} 面 ·{' '}
                          {formatCount(previewModel.stats.vertices)} 点
                        </span>
                      </li>
                      <li>
                        <span className="muted">骨骼 / 节点</span>
                        <span className="mono">
                          {formatCount(previewModel.stats.bones)} 根 ·{' '}
                          {formatCount(previewModel.stats.nodes)} 节点
                        </span>
                      </li>
                      <li>
                        <span className="muted">可驱动性</span>
                        <span className={`badge ${DRIVABLE_BADGE[drivableSummary(previewModel.stats).kind]}`}>
                          {drivableSummary(previewModel.stats).text}
                        </span>
                      </li>
                    </>
                  ) : (
                    <li>
                      <span className="muted">分析数据</span>
                      <span className="muted">stats 为空（旧数据或后端尚未分析）</span>
                    </li>
                  )}
                  {previewModel.conversionNote ? (
                    <li>
                      <span className="muted">转换来源</span>
                      <span className="break">{previewModel.conversionNote}</span>
                    </li>
                  ) : null}
                  {previewModel.fileSha256 ? (
                    <li>
                      <span className="muted">文件 sha256</span>
                      <span className="mono break">{previewModel.fileSha256}</span>
                    </li>
                  ) : null}
                </ul>
              ) : (
                <p className="muted small">尚未选择模型。</p>
              )}
            </div>
          </div>
        </aside>
      </div>

      {uploadOpen ? <ModelUploadModal onClose={() => setUploadOpen(false)} onSaved={onSaved} /> : null}
      {editTarget ? (
        <ModelEditModal model={editTarget} onClose={() => setEditTarget(null)} onSaved={onSaved} />
      ) : null}

      {deleteTarget ? (
        <ConfirmDialog
          title="删除模型"
          danger
          busy={deleting}
          confirmText="删除"
          message={
            <>
              <p>
                确认删除模型 <strong>{deleteTarget.name}</strong>（#{deleteTarget.id}）？
              </p>
              <p className="muted small">DELETE /api/models/{deleteTarget.id} · 服务端执行软删除。</p>
            </>
          }
          onConfirm={confirmDelete}
          onCancel={() => setDeleteTarget(null)}
        />
      ) : null}
    </div>
  );
}