'use client';

import { useCallback, useEffect, useState } from 'react';
import { api } from '@/lib/api';
import type { FieldDef, ResourceConfig } from '@/lib/resources';
import { Button, Card, Empty, Input, Modal, Notice, Select, Textarea } from './ui';

const PAGE_SIZE = 20;

type Row = Record<string, unknown>;
type FormState = Record<string, string>;

function toInputValue(field: FieldDef, raw: unknown): string {
  if (raw === null || raw === undefined) return '';
  if (field.type === 'date') {
    const d = new Date(String(raw));
    return isNaN(d.getTime()) ? '' : d.toISOString().slice(0, 10);
  }
  // 金额：库里是分，表单里给元
  if (field.money) {
    const fen = Number(raw);
    if (!Number.isFinite(fen)) return '';
    return (fen / 100).toFixed(2);
  }
  return String(raw);
}

/** 表单值统一按字符串持有，提交时按字段类型转换。 */
function buildPayload(fields: FieldDef[], form: FormState): Row {
  const payload: Row = {};
  for (const field of fields) {
    const value = form[field.name];
    if (value === undefined) continue;
    if (value === '') {
      payload[field.name] = field.type === 'number' || field.money ? 0 : null;
    } else if (field.money) {
      // 元 → 分，四舍五入到整数分，避免浮点误差（1.2 元 → 120 分）
      payload[field.name] = Math.round(Number(value) * 100);
    } else if (field.type === 'number' || field.type === 'select') {
      payload[field.name] = Number(value);
    } else {
      payload[field.name] = value;
    }
  }
  return payload;
}

function displayCell(field: FieldDef, row: Row): string {
  const raw = row[field.name];
  if (raw === null || raw === undefined || raw === '') return '—';
  if (field.money) return `${fenToYuan(raw)}`;
  if (field.type === 'select' && field.options) {
    const hit = field.options.find((o) => o.value === Number(raw));
    return hit ? hit.label : String(raw);
  }
  if (field.type === 'date') return String(raw).slice(0, 10);
  return String(raw);
}

/** 分 → 元。金额一律固定两位小数，不省 .00（1 元显示成 1.00 元） */
function fenToYuan(fen: unknown): string {
  if (fen === null || fen === undefined || fen === '') return '—';
  const n = Number(fen);
  if (!Number.isFinite(n)) return String(fen);
  return (n / 100).toFixed(2);
}

export function ResourceTable({ config }: { config: ResourceConfig }) {
  const [items, setItems] = useState<Row[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [keyword, setKeyword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  /** 静态资源域名，配了卡片视图时才需要（用来拼封面图地址） */
  const [staticBase, setStaticBase] = useState('');

  const [formOpen, setFormOpen] = useState(false);
  const [editing, setEditing] = useState<Row | null>(null);
  const [form, setForm] = useState<FormState>({});
  const [saving, setSaving] = useState(false);

  const tableFields = config.fields.filter((f) => !f.hideInTable);

  const load = useCallback(
    (nextPage: number, nextKeyword: string) => {
      setLoading(true);
      setError('');
      api
        .listResource(config.key, { page: nextPage, pageSize: PAGE_SIZE, keyword: nextKeyword })
        .then((res) => {
          setItems(res.items as Row[]);
          setTotal(res.total);
          setPage(res.page);
        })
        .catch((err: { message: string }) => setError(err.message))
        .finally(() => setLoading(false));
    },
    [config.key],
  );

  useEffect(() => {
    setKeyword('');
    load(1, '');
  }, [config.key, load]);

  useEffect(() => {
    if (!config.card) return;
    api
      .siteInfo()
      .then((site) => setStaticBase(site.staticBaseUrl.replace(/\/+$/, '')))
      .catch(() => {
        // 取不到就只是不显示封面图，不影响列表本身
      });
  }, [config.card]);

  const openCreate = () => {
    const initial: FormState = {};
    for (const f of config.fields) {
      initial[f.name] = f.type === 'select' ? String(f.options?.[0]?.value ?? 1) : '';
    }
    setForm(initial);
    setEditing(null);
    setFormOpen(true);
  };

  const openEdit = (row: Row) => {
    const initial: FormState = {};
    for (const f of config.fields) initial[f.name] = toInputValue(f, row[f.name]);
    setForm(initial);
    setEditing(row);
    setFormOpen(true);
  };

  const save = () => {
    const editable = config.fields.filter((f) => !(editing && f.immutable));
    const payload = buildPayload(editable, form);
    setSaving(true);
    setError('');

    const action = editing
      ? api.updateResource(config.key, Number(editing.id), payload)
      : api.createResource(config.key, payload);

    action
      .then(() => {
        setFormOpen(false);
        load(page, keyword);
      })
      .catch((err: { message: string }) => setError(err.message))
      .finally(() => setSaving(false));
  };

  const remove = (row: Row) => {
    if (!window.confirm('确定删除这条记录吗？此操作不可撤销。')) return;
    setError('');
    api
      .deleteResource(config.key, Number(row.id))
      .then(() => load(page, keyword))
      .catch((err: { message: string }) => setError(err.message));
  };

  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));

  return (
    <div className="space-y-4">
      <Notice message={error} />

      <Card
        title={`${config.title}（共 ${total} 条）`}
        action={
          <div className="flex gap-2">
            <Input value={keyword} onChange={setKeyword} placeholder="搜索…" />
            <Button variant="ghost" onClick={() => load(1, keyword)}>
              搜索
            </Button>
            <Button onClick={openCreate}>新建</Button>
          </div>
        }
      >
        <p className="mb-3 text-xs text-gray-500">{config.description}</p>

        {loading ? (
          <div className="py-10 text-center text-sm text-gray-400">加载中…</div>
        ) : items.length === 0 ? (
          <Empty />
        ) : config.card ? (
          /* 卡片视图：短字段挤一行，长字段按标签-值显示（超过两行截断） */
          /*
            两个旋钮：
              minmax(290px) —— 决定一行放几张：约 1500px 宽时正好 5 张
              zoom: 0.8      —— 整张卡（文字/图标/内边距一起）等比缩放
            用 zoom 而不是单独改字号，是因为长宽要一起缩；只改宽度会变成「更窄但一样高」。
          */
          <div className="grid grid-cols-[repeat(auto-fill,minmax(290px,1fr))] gap-3">
            {items.map((row) => {
              const card = config.card!;
              const coverPath = card.cover(row);
              const coverUrl = coverPath && staticBase ? `${staticBase}/${coverPath}` : '';
              const allFields: FieldDef[] = [
                { name: 'id', label: 'ID', type: 'number' },
                ...config.fields,
              ];
              const inline = allFields.filter((f) => card.inlineFields.includes(f.name));
              // 底栏已经单独显示了 footerField，别再在正文里重复一遍
              const rest = allFields.filter(
                (f) => !card.inlineFields.includes(f.name) && f.name !== card.footerField?.name,
              );

              return (
                <div
                  key={String(row.id)}
                  style={{ zoom: 0.8 }}
                  className="flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md"
                >
                  {coverUrl && (
                    /* 9:5 与课程封面原始像素（900×500）一致，配合 contain 保证图片完整不裁剪 */
                    <img
                      src={coverUrl}
                      alt=""
                      loading="lazy"
                      className="aspect-[9/5] w-full bg-[#15457b] object-contain"
                    />
                  )}

                  <div className="flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-gray-100 px-3 py-2 text-xs text-gray-700">
                    {inline.map((f) => (
                      <span key={f.name}>
                        <span className="text-gray-400">{f.label} </span>
                        {displayCell(f, row)}
                      </span>
                    ))}
                  </div>

                  {/* 值一律单行截断（悬停看全文），换行会让卡片高度不可控 */}
                  <div className="flex-1 space-y-1 px-3 py-2">
                    {rest.map((f) => {
                      const text = displayCell(f, row);
                      return (
                        <div key={f.name} className="flex gap-2 text-xs leading-relaxed">
                          <span className="w-14 shrink-0 text-gray-400">{f.label}</span>
                          <span className="min-w-0 flex-1 truncate text-gray-700" title={text}>
                            {text}
                          </span>
                        </div>
                      );
                    })}
                  </div>

                  <div className="flex items-center justify-between gap-2 border-t border-gray-100 px-3 py-2">
                    {card.footerField ? (
                      <span className="text-base font-medium text-gray-900">
                        <span className="text-xs text-gray-400">{card.footerField.label} </span>
                        {card.footerField.money
                          ? `${fenToYuan(row[card.footerField.name])} 元`
                          : displayCell(
                              { name: card.footerField.name, label: card.footerField.label, type: 'text' },
                              row,
                            )}
                      </span>
                    ) : (
                      <span />
                    )}
                    <div className="flex gap-2">
                      <Button variant="ghost" onClick={() => openEdit(row)}>
                        编辑
                      </Button>
                      <Button variant="danger" onClick={() => remove(row)}>
                        删除
                      </Button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-gray-200 text-left text-xs text-gray-500">
                  <th className="px-2 py-2">ID</th>
                  {tableFields.map((f) => (
                    <th key={f.name} className="px-2 py-2">
                      {f.label}
                    </th>
                  ))}
                  <th className="px-2 py-2 text-right">操作</th>
                </tr>
              </thead>
              <tbody>
                {items.map((row) => (
                  <tr key={String(row.id)} className="border-b border-gray-100 hover:bg-gray-50">
                    <td className="px-2 py-2 text-gray-400">{String(row.id)}</td>
                    {tableFields.map((f) => {
                      const text = displayCell(f, row);
                      return (
                        <td key={f.name} className="max-w-[280px] truncate px-2 py-2" title={text}>
                          {text}
                        </td>
                      );
                    })}
                    <td className="whitespace-nowrap px-2 py-2 text-right">
                      <Button variant="ghost" onClick={() => openEdit(row)}>
                        编辑
                      </Button>{' '}
                      <Button variant="danger" onClick={() => remove(row)}>
                        删除
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        <div className="mt-4 flex items-center justify-between text-sm text-gray-500">
          <span>
            第 {page} / {totalPages} 页
          </span>
          <div className="flex gap-2">
            <Button variant="ghost" disabled={page <= 1} onClick={() => load(page - 1, keyword)}>
              上一页
            </Button>
            <Button variant="ghost" disabled={page >= totalPages} onClick={() => load(page + 1, keyword)}>
              下一页
            </Button>
          </div>
        </div>
      </Card>

      <Modal
        open={formOpen}
        title={`${editing ? '编辑' : '新建'}${config.title}`}
        onClose={() => setFormOpen(false)}
        footer={
          <>
            <Button variant="ghost" onClick={() => setFormOpen(false)}>
              取消
            </Button>
            <Button onClick={save} disabled={saving}>
              {saving ? '保存中…' : '保存'}
            </Button>
          </>
        }
      >
        <div className="space-y-3">
          {config.fields.map((field) => {
            const disabled = Boolean(editing && field.immutable);
            return (
              <div key={field.name}>
                <label className="mb-1 block text-sm text-gray-600">
                  {field.label}
                  {field.immutable && <span className="ml-2 text-xs text-orange-500">创建后不可修改</span>}
                </label>
                {field.type === 'textarea' ? (
                  <Textarea value={form[field.name] ?? ''} onChange={(v) => setForm({ ...form, [field.name]: v })} />
                ) : field.type === 'select' ? (
                  <Select
                    value={form[field.name] ?? ''}
                    onChange={(v) => setForm({ ...form, [field.name]: v })}
                    options={field.options ?? []}
                  />
                ) : (
                  <div className={disabled ? 'pointer-events-none opacity-60' : ''}>
                    <Input
                      value={form[field.name] ?? ''}
                      onChange={(v) => setForm({ ...form, [field.name]: v })}
                      type={field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'}
                      placeholder={field.placeholder}
                    />
                  </div>
                )}
                {field.hint && <p className="mt-1 text-xs text-gray-400">{field.hint}</p>}
              </div>
            );
          })}
        </div>
      </Modal>
    </div>
  );
}