'use client';

import { useEffect, useState } from 'react';
import useSWR from 'swr';
import { Plus, Pencil, Trash2, Tags, Loader2 } from 'lucide-react';
import { AdminHeader } from '@/components/admin/AdminHeader';
import { PaginationTable, type Column } from '@/components/admin/PaginationTable';
import { TableToolbar } from '@/components/admin/TableToolbar';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Badge } from '@/components/ui/badge';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { ImageUpload } from '@/components/admin/ImageUpload';
import { RichEditor } from '@/components/admin/RichEditor';
import { MarkdownImport } from '@/components/admin/MarkdownImport';
import { adminApi } from '@/lib/admin-services';
import { useAdminStore } from '@/store/adminStore';
import { cn, resolveUploadUrl } from '@/lib/utils';
import { isHTMLContent } from '@/lib/content';
import type { Product, ProductCategory } from '@/lib/types';

type ContentMode = 'rich' | 'markdown';

interface FormState {
  categoryId: number;
  name: string;
  cover: string;
  desc: string;
  content: string;
  sort: number;
  isShow: number;
}

export default function ProductAdminPage() {
  const [hydrated, setHydrated] = useState(false);
  const [page, setPage] = useState(1);
  const [categoryId, setCategoryId] = useState<number | undefined>();
  const [keyword, setKeyword] = useState('');
  const [searchKw, setSearchKw] = useState('');
  const [open, setOpen] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);
  const [saving, setSaving] = useState(false);
  const [contentMode, setContentMode] = useState<ContentMode>('rich');
  const [form, setForm] = useState<FormState>({
    categoryId: 0,
    name: '',
    cover: '',
    desc: '',
    content: '',
    sort: 0,
    isShow: 1,
  });

  const isSuperAdmin = useAdminStore((s) => s.admin?.role) === 'super_admin';

  // 分类管理弹窗
  const [catOpen, setCatOpen] = useState(false);
  const [catName, setCatName] = useState('');
  const [catSort, setCatSort] = useState(0);

  useEffect(() => setHydrated(true), []);

  const { data: categories, mutate: mutateCats } = useSWR<ProductCategory[]>(
    hydrated ? '/admin/product-category' : null,
    () => adminApi.productCategoryAll(),
  );

  const { data, isLoading, mutate } = useSWR(
    hydrated ? ['/admin/product', page, categoryId, searchKw] : null,
    () =>
      adminApi.productPaginate({
        page,
        pageSize: 10,
        categoryId,
        keyword: searchKw || undefined,
      }),
  );

  const openCreate = () => {
    if (!categories || categories.length === 0) {
      alert('请先创建产品分类');
      setCatOpen(true);
      return;
    }
    setEditId(null);
    setContentMode('rich');
    setForm({
      categoryId: categories[0].id,
      name: '',
      cover: '',
      desc: '',
      content: '',
      sort: 0,
      isShow: 1,
    });
    setOpen(true);
  };

  const openEdit = async (id: number) => {
    const detail = await adminApi.productDetail(id);
    setEditId(id);
    setContentMode(isHTMLContent(detail.content) ? 'rich' : 'markdown');
    setForm({
      categoryId: detail.categoryId,
      name: detail.name,
      cover: detail.cover,
      desc: detail.desc ?? '',
      content: detail.content ?? '',
      sort: detail.sort,
      isShow: detail.isShow,
    });
    setOpen(true);
  };

  const onSave = async () => {
    if (!form.categoryId) {
      alert('请选择分类');
      return;
    }
    if (!form.name || !form.cover) {
      alert('请填写名称并上传封面');
      return;
    }
    setSaving(true);
    try {
      const payload = { ...form, categoryId: Number(form.categoryId) };
      if (editId) {
        await adminApi.productUpdate(editId, payload);
      } else {
        await adminApi.productCreate(payload);
      }
      setOpen(false);
      await mutate();
    } catch (e) {
      alert((e as Error).message);
    } finally {
      setSaving(false);
    }
  };

  const onDelete = async (id: number) => {
    if (!confirm('确认删除该产品？')) return;
    try {
      await adminApi.productDelete(id);
      await mutate();
    } catch (e) {
      alert((e as Error).message);
    }
  };

  // 分类 CRUD
  const onAddCategory = async () => {
    if (!catName.trim()) {
      alert('请输入分类名称');
      return;
    }
    try {
      await adminApi.productCategoryCreate({
        name: catName,
        sort: catSort,
        isShow: 1,
      });
      setCatName('');
      setCatSort(0);
      await mutateCats();
    } catch (e) {
      alert((e as Error).message);
    }
  };
  const onDeleteCategory = async (id: number) => {
    if (!confirm('删除分类后，关联产品仍保留但分类无效。确认删除？')) return;
    try {
      await adminApi.productCategoryDelete(id);
      await mutateCats();
    } catch (e) {
      alert((e as Error).message);
    }
  };

  const columns: Column<Product>[] = [
    { key: 'id', title: 'ID', width: 60 },
    {
      key: 'cover',
      title: '封面',
      width: 100,
      render: (r) => (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={resolveUploadUrl(r.cover)}
          alt={r.name}
          className="h-12 w-16 rounded object-cover"
        />
      ),
    },
    { key: 'name', title: '产品名称' },
    {
      key: 'category',
      title: '分类',
      width: 120,
      render: (r) => r.category?.name ?? '-',
    },
    {
      key: 'desc',
      title: '描述',
      render: (r) => (
        <span className="line-clamp-1 max-w-md text-xs text-gray-600">
          {r.desc ?? '-'}
        </span>
      ),
    },
    {
      key: 'isShow',
      title: '状态',
      width: 80,
      render: (r) =>
        r.isShow === 1 ? (
          <Badge variant="success">上架</Badge>
        ) : (
          <Badge variant="outline">下架</Badge>
        ),
    },
    {
      key: '_op',
      title: '操作',
      width: 150,
      render: (r) => (
        <div className="flex items-center gap-1.5 whitespace-nowrap">
          <Button size="sm" variant="outline" onClick={() => openEdit(r.id)}>
            <Pencil className="h-3 w-3" /> 编辑
          </Button>
          {isSuperAdmin && (
            <Button
              size="sm"
              variant="destructive"
              onClick={() => onDelete(r.id)}
            >
              <Trash2 className="h-3 w-3" /> 删除
            </Button>
          )}
        </div>
      ),
    },
  ];

  return (
    <div>
      <AdminHeader title="产品管理" description="维护产品信息，含分类管理" />

      <TableToolbar
        left={
          <>
            <select
              className="h-10 rounded-md border border-gray-300 px-3 text-sm"
              value={categoryId ?? ''}
              onChange={(e) => {
                setCategoryId(e.target.value ? Number(e.target.value) : undefined);
                setPage(1);
              }}
            >
              <option value="">全部分类</option>
              {(categories ?? []).map((c) => (
                <option key={c.id} value={c.id}>
                  {c.name}
                </option>
              ))}
            </select>
            <Input
              placeholder="搜索产品名称"
              value={keyword}
              onChange={(e) => setKeyword(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  setSearchKw(keyword);
                  setPage(1);
                }
              }}
              className="max-w-xs"
            />
            <Button
              variant="outline"
              onClick={() => {
                setSearchKw(keyword);
                setPage(1);
              }}
            >
              搜索
            </Button>
          </>
        }
        right={
          <>
            <Button variant="outline" onClick={() => setCatOpen(true)}>
              <Tags className="h-4 w-4" /> 分类管理
            </Button>
            <Button onClick={openCreate}>
              <Plus className="h-4 w-4" /> 新增产品
            </Button>
          </>
        }
      />

      <PaginationTable<Product>
        columns={columns}
        rows={data?.list ?? []}
        total={data?.total ?? 0}
        page={page}
        pageSize={10}
        loading={isLoading}
        onPageChange={setPage}
        rowKey={(r) => String(r.id)}
      />

      {/* 产品表单 */}
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>{editId ? '编辑产品' : '新增产品'}</DialogTitle>
          </DialogHeader>
          <div className="max-h-[70vh] space-y-4 overflow-y-auto pr-2">
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label>分类 *</Label>
                <select
                  className="h-10 w-full rounded-md border border-gray-300 px-3 text-sm"
                  value={form.categoryId}
                  onChange={(e) =>
                    setForm({ ...form, categoryId: Number(e.target.value) })
                  }
                >
                  {(categories ?? []).map((c) => (
                    <option key={c.id} value={c.id}>
                      {c.name}
                    </option>
                  ))}
                </select>
              </div>
              <div className="space-y-1.5">
                <Label>产品名称 *</Label>
                <Input
                  value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                />
              </div>
            </div>
            <div className="space-y-1.5">
              <Label>封面图 *</Label>
              <ImageUpload
                value={form.cover}
                onChange={(url) => setForm({ ...form, cover: url })}
              />
            </div>
            <div className="space-y-1.5">
              <Label>简短描述</Label>
              <Textarea
                rows={3}
                value={form.desc}
                onChange={(e) => setForm({ ...form, desc: e.target.value })}
              />
            </div>
            <div className="space-y-1.5">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <Label>详情内容</Label>
                <div className="flex items-center gap-2">
                  <div className="flex rounded-md border border-gray-200 p-0.5">
                    <button
                      type="button"
                      onClick={() => setContentMode('rich')}
                      className={cn(
                        'rounded px-2.5 py-0.5 text-xs transition-colors',
                        contentMode === 'rich'
                          ? 'bg-brand-600 text-white'
                          : 'text-gray-600 hover:text-gray-900',
                      )}
                    >
                      富文本
                    </button>
                    <button
                      type="button"
                      onClick={() => setContentMode('markdown')}
                      className={cn(
                        'rounded px-2.5 py-0.5 text-xs transition-colors',
                        contentMode === 'markdown'
                          ? 'bg-brand-600 text-white'
                          : 'text-gray-600 hover:text-gray-900',
                      )}
                    >
                      Markdown
                    </button>
                  </div>
                  {contentMode === 'markdown' && (
                    <MarkdownImport
                      onImport={(md) => setForm({ ...form, content: md })}
                      onError={(msg) => alert(msg)}
                    />
                  )}
                </div>
              </div>
              {contentMode === 'rich' ? (
                <RichEditor
                  value={form.content}
                  onChange={(html) => setForm({ ...form, content: html })}
                />
              ) : (
                <Textarea
                  rows={12}
                  placeholder="支持 Markdown 语法。可点击右上角上传 .md 文档"
                  className="font-mono text-sm"
                  value={form.content}
                  onChange={(e) =>
                    setForm({ ...form, content: e.target.value })
                  }
                />
              )}
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label>排序</Label>
                <Input
                  type="number"
                  value={form.sort}
                  onChange={(e) =>
                    setForm({ ...form, sort: Number(e.target.value) })
                  }
                />
              </div>
              <div className="space-y-1.5">
                <Label>状态</Label>
                <select
                  className="h-10 w-full rounded-md border border-gray-300 px-3 text-sm"
                  value={form.isShow}
                  onChange={(e) =>
                    setForm({ ...form, isShow: Number(e.target.value) })
                  }
                >
                  <option value={1}>上架</option>
                  <option value={0}>下架</option>
                </select>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>
              取消
            </Button>
            <Button onClick={onSave} disabled={saving}>
              {saving ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" />
                  保存中…
                </>
              ) : (
                '保存'
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 分类管理 */}
      <Dialog open={catOpen} onOpenChange={setCatOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>产品分类管理</DialogTitle>
          </DialogHeader>
          <div className="space-y-3">
            <div className="flex gap-2">
              <Input
                placeholder="新分类名称"
                value={catName}
                onChange={(e) => setCatName(e.target.value)}
              />
              <Input
                type="number"
                placeholder="排序"
                value={catSort}
                onChange={(e) => setCatSort(Number(e.target.value))}
                className="w-24"
              />
              <Button onClick={onAddCategory}>添加</Button>
            </div>
            <div className="max-h-80 overflow-y-auto">
              {(categories ?? []).map((c) => (
                <div
                  key={c.id}
                  className="flex items-center justify-between border-b border-gray-100 py-2"
                >
                  <span className="text-sm text-gray-700">{c.name}</span>
                  <Button
                    size="sm"
                    variant="ghost"
                    onClick={() => onDeleteCategory(c.id)}
                  >
                    <Trash2 className="h-3 w-3" />
                  </Button>
                </div>
              ))}
              {(categories ?? []).length === 0 && (
                <p className="py-4 text-center text-sm text-gray-400">
                  暂无分类
                </p>
              )}
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}