import { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Plus, FolderKanban } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Badge } from '@/components/ui/badge';
import { Spinner } from '@/components/ui/spinner';
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import {
  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
} from '@/components/ui/dialog';
import {
  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import {
  Form, FormControl, FormField, FormItem, FormLabel, FormMessage,
} from '@/components/ui/form';
import { notify } from '@/lib/notify';
import { cn } from '@/lib/utils';
import { api } from '../api/client';
import { useAdminGuard } from '../layouts/AdminLayout';
import type { Board } from '../api/types';
import { BoardColorPicker, BoardIconPicker } from '../components/BoardAppearancePicker';
import BoardIconDisplay from '../components/BoardIconDisplay';
import { getBoardThemeIndex } from '../utils/boardTheme';
import AdminSortableList, { SortableDragHandle, SortableMoveButtons } from '../components/admin/AdminSortableList';
import { persistSortOrderChanges, shouldShowSortableMoveButtons } from '../utils/sortOrder';

const boardSchema = z.object({
  name: z.string().min(1, '请输入名称').max(64),
  description: z.string().max(500).optional(),
  sort_order: z.coerce.number().min(0),
  icon: z.string().max(64).optional(),
  color_index: z.coerce.number().min(-1).max(7),
});

type BoardFormValues = z.infer<typeof boardSchema>;

export default function BoardsManagePage() {
  const { ready } = useAdminGuard();
  const [boards, setBoards] = useState<Board[]>([]);
  const [loading, setLoading] = useState(true);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<Board | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [reordering, setReordering] = useState(false);

  const form = useForm<BoardFormValues>({
    resolver: zodResolver(boardSchema),
    defaultValues: { name: '', description: '', sort_order: 1, icon: '', color_index: -1 },
  });

  const watchColorIndex = form.watch('color_index');
  const editingPreviewId = editing?.id ?? boards.length + 1;

  const load = () => {
    setLoading(true);
    api.boards()
      .then(d => setBoards(d.boards ?? []))
      .catch(e => notify.error(e.message))
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    if (ready) load();
  }, [ready]);

  const openCreate = () => {
    setEditing(null);
    form.reset({ name: '', description: '', sort_order: boards.length + 1, icon: '', color_index: -1 });
    setModalOpen(true);
  };

  const openEdit = (board: Board) => {
    setEditing(board);
    form.reset({
      name: board.name,
      description: board.description ?? '',
      sort_order: board.sort_order,
      icon: board.icon ?? '',
      color_index: board.color_index ?? -1,
    });
    setModalOpen(true);
  };

  const handleSubmit = async (values: BoardFormValues) => {
    setSubmitting(true);
    try {
      const body = {
        name: values.name,
        description: values.description ?? '',
        sort_order: values.sort_order,
        icon: values.icon ?? '',
        color_index: values.color_index ?? -1,
      };
      if (editing) {
        await api.updateBoard(editing.id, body);
        notify.success('板块已更新');
      } else {
        await api.createBoard(body);
        notify.success('板块已创建');
      }
      setModalOpen(false);
      load();
      window.dispatchEvent(new Event('boards-refresh'));
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '操作失败');
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = async (id: number) => {
    try {
      await api.deleteBoard(id);
      notify.success('板块已删除');
      load();
      window.dispatchEvent(new Event('boards-refresh'));
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '删除失败');
    }
  };

  const handleBoardReorder = async (reordered: Board[]) => {
    const before = [...boards];
    setReordering(true);
    try {
      const after = await persistSortOrderChanges(before, reordered, board =>
        api.updateBoard(board.id, {
          name: board.name,
          description: board.description ?? '',
          sort_order: board.sort_order ?? 0,
          icon: board.icon ?? '',
          color_index: board.color_index ?? -1,
        }).then(() => undefined),
      );
      setBoards(after);
      notify.success('板块排序已更新');
      window.dispatchEvent(new Event('boards-refresh'));
    } catch (e: unknown) {
      setBoards(before);
      notify.error(e instanceof Error ? e.message : '排序保存失败');
    } finally {
      setReordering(false);
    }
  };

  const showMoveButtons = shouldShowSortableMoveButtons(boards.length);

  if (!ready) {
    return <div className="flex justify-center py-16"><Spinner size="lg" /></div>;
  }

  return (
    <div className="admin-page">
      <div className="admin-page-head">
        <div className="admin-page-head-row">
          <div>
            <h1>板块管理</h1>
            <p>创建、编辑或删除论坛板块；可为每个板块自定义图标与色标</p>
          </div>
          <Button onClick={openCreate}>
            <Plus />
            新建板块
          </Button>
        </div>
      </div>

      <div className="admin-card">
          {loading ? (
            <div className="flex justify-center py-12"><Spinner size="lg" /></div>
          ) : (
            <>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[72px]">排序</TableHead>
                    <TableHead className="w-[60px]">ID</TableHead>
                    <TableHead className="w-[52px]">图标</TableHead>
                    <TableHead>名称</TableHead>
                    <TableHead>简介</TableHead>
                    <TableHead className="w-[70px]">权重</TableHead>
                    <TableHead className="w-[80px]">帖子数</TableHead>
                    <TableHead className="w-[160px]">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <AdminSortableList
                  as={TableBody}
                  items={boards}
                  getId={board => board.id}
                  onReorder={handleBoardReorder}
                  showMoveButtons="auto"
                  renderItem={(board, _index, controls) => {
                    const themeIdx = getBoardThemeIndex(board);
                    return (
                      <TableRow
                        ref={controls.setNodeRef}
                        style={controls.style}
                        className={cn('admin-sortable-table-row', controls.isDragging && 'is-dragging')}
                      >
                        <TableCell>
                          <div className="flex items-center gap-0">
                            <SortableDragHandle label={`拖拽调整「${board.name}」顺序`} {...controls.dragHandleProps} />
                            {showMoveButtons && <SortableMoveButtons controls={controls} />}
                          </div>
                        </TableCell>
                        <TableCell>{board.id}</TableCell>
                        <TableCell>
                          <span className={cn('board-table-icon', `sidebar-board-icon--${themeIdx}`)}>
                            <BoardIconDisplay board={board} />
                          </span>
                        </TableCell>
                        <TableCell><strong>{board.name}</strong></TableCell>
                        <TableCell className="max-w-[200px] truncate">{board.description}</TableCell>
                        <TableCell>{board.sort_order}</TableCell>
                        <TableCell><Badge variant="secondary">{board.post_count ?? 0}</Badge></TableCell>
                        <TableCell>
                          <div className="flex items-center gap-1">
                            <Button variant="ghost" size="sm" onClick={() => openEdit(board)} disabled={reordering}>编辑</Button>
                            <AlertDialog>
                              <AlertDialogTrigger asChild>
                                <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive" disabled={reordering}>
                                  删除
                                </Button>
                              </AlertDialogTrigger>
                              <AlertDialogContent>
                                <AlertDialogHeader>
                                  <AlertDialogTitle>确定删除该板块？</AlertDialogTitle>
                                  <AlertDialogDescription>
                                    删除后该板块下的帖子将无法通过板块筛选，此操作不可撤销。
                                  </AlertDialogDescription>
                                </AlertDialogHeader>
                                <AlertDialogFooter>
                                  <AlertDialogCancel>取消</AlertDialogCancel>
                                  <AlertDialogAction onClick={() => handleDelete(board.id)}>
                                    删除
                                  </AlertDialogAction>
                                </AlertDialogFooter>
                              </AlertDialogContent>
                            </AlertDialog>
                          </div>
                        </TableCell>
                      </TableRow>
                    );
                  }}
                />
              </Table>
              {boards.length === 0 && (
                <div className="empty-state">
                  <FolderKanban className="empty-state-icon" aria-hidden size={36} strokeWidth={1.5} />
                  <p>还没有板块，点击右上角创建第一个</p>
                </div>
              )}
            </>
          )}
      </div>

      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
        <DialogContent className="board-manage-dialog">
          <DialogHeader>
            <DialogTitle>{editing ? '编辑板块' : '新建板块'}</DialogTitle>
            <DialogDescription>
              {editing ? '修改名称、简介、图标与色标后保存。' : '填写板块信息，创建后即可在发帖时选择。'}
            </DialogDescription>
          </DialogHeader>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>板块名称</FormLabel>
                    <FormControl>
                      <Input maxLength={64} placeholder="如：技术交流" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="description"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>简介</FormLabel>
                    <FormControl>
                      <Textarea rows={3} maxLength={500} placeholder="板块说明（可选）" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="icon"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>板块图标</FormLabel>
                    <FormControl>
                      <BoardIconPicker
                        value={field.value ?? ''}
                        onChange={field.onChange}
                        board={{ id: editingPreviewId, color_index: watchColorIndex }}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="color_index"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>色标颜色</FormLabel>
                    <FormControl>
                      <BoardColorPicker
                        value={field.value ?? -1}
                        onChange={field.onChange}
                        boardId={editingPreviewId}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="sort_order"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>排序</FormLabel>
                    <FormControl>
                      <Input type="number" min={0} {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <DialogFooter>
                <Button type="button" variant="outline" onClick={() => setModalOpen(false)}>取消</Button>
                <Button type="submit" loading={submitting}>{editing ? '保存' : '创建'}</Button>
              </DialogFooter>
            </form>
          </Form>
        </DialogContent>
      </Dialog>
    </div>
  );
}