"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { useActiveClass } from "@/hooks/use-active-class";
import { fetchAPI, postAPI, deleteAPI, uploadAPI, getErrorMessage } from "@/lib/api";
import { Card, CardContent } from "@/components/ui/card";
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 {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { RoleGuard } from "@/components/role-guard";
import { ConfirmDialog } from "@/components/confirm-dialog";
import { ErrorState } from "@/components/error-state";
import { Pagination } from "@/components/pagination";
import { toast } from "sonner";
import type { PageResponse, Resource } from "@/lib/types";

type ResourceDownloadResponse = {
  file_url: string;
};

const RESOURCE_CATEGORIES: Record<string, string> = {
  all: "全部",
  course_material: "课件资料",
  assignment: "作业",
  reading: "阅读材料",
  other: "其他",
};

function formatFileSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

function getFileIcon(fileType: string): string {
  if (fileType.startsWith("image/")) return "🖼️";
  if (fileType.includes("pdf")) return "📄";
  if (fileType.includes("word") || fileType.includes("document")) return "📝";
  if (fileType.includes("sheet") || fileType.includes("excel")) return "📊";
  if (fileType.includes("presentation") || fileType.includes("powerpoint")) return "📽️";
  if (fileType.includes("zip")) return "📦";
  return "📎";
}

export default function ResourcesPage() {
  const { activeClassId } = useActiveClass();
  const [resources, setResources] = useState<Resource[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [category, setCategory] = useState("all");
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  // Upload dialog state
  const [dialogOpen, setDialogOpen] = useState(false);
  const [formTitle, setFormTitle] = useState("");
  const [formDesc, setFormDesc] = useState("");
  const [formCategory, setFormCategory] = useState("course_material");
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Delete state
  const [deleteTarget, setDeleteTarget] = useState<number | null>(null);

  const loadResources = useCallback(async () => {
    if (!activeClassId) {
      setResources([]);
      setTotalPages(1);
      setLoading(false);
      return;
    }
    setError(null);
    setLoading(true);
    try {
      const params: Record<string, string> = {
        page_size: "20",
        page: String(page),
        class_id: String(activeClassId),
      };
      if (category !== "all") params.category = category;
      const res = await fetchAPI<PageResponse<Resource>>("/api/resources/", params);
      setResources(res.items || []);
      setTotalPages(res.total_pages || 1);
    } catch (err: unknown) {
      setError(getErrorMessage(err, "加载失败"));
    } finally {
      setLoading(false);
    }
  }, [activeClassId, category, page]);

  useEffect(() => {
    void loadResources();
  }, [loadResources]);

  const resetForm = () => {
    setFormTitle("");
    setFormDesc("");
    setFormCategory("course_material");
    setSelectedFile(null);
    if (fileInputRef.current) fileInputRef.current.value = "";
  };

  const handleSubmit = async () => {
    if (!formTitle.trim() || !selectedFile) return;
    setSubmitting(true);
    try {
      const formData = new FormData();
      formData.append("title", formTitle);
      formData.append("category", formCategory);
      formData.append("file", selectedFile);
      if (formDesc.trim()) formData.append("description", formDesc);
      if (activeClassId) formData.append("class_id", String(activeClassId));

      await uploadAPI("/api/resources/", formData);
      toast.success("资源已上传");
      setDialogOpen(false);
      resetForm();
      loadResources();
    } catch (err: unknown) {
      toast.error(getErrorMessage(err, "上传失败"));
    } finally {
      setSubmitting(false);
    }
  };

  const handleDownload = async (resource: Resource) => {
    try {
      const res = await postAPI<ResourceDownloadResponse>(`/api/resources/${resource.id}/download`);
      window.open(res.file_url, "_blank");
    } catch (err: unknown) {
      toast.error(getErrorMessage(err, "下载失败"));
    }
  };

  const handleDelete = async (id: number) => {
    try {
      await deleteAPI(`/api/resources/${id}`);
      toast.success("已删除");
      setDeleteTarget(null);
      loadResources();
    } catch (err: unknown) {
      toast.error(getErrorMessage(err, "删除失败"));
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <div className="text-[11px] uppercase tracking-[0.24em] text-[#976746]">Library</div>
          <h1 className="mt-2 text-3xl font-semibold text-[#4e1d1a]">资源库</h1>
          <p className="mt-2 text-[#765a4d]">共享课件、阅读材料与班级文档档案</p>
        </div>
        <RoleGuard permissions={["resource_manage"]}>
          <Dialog open={dialogOpen} onOpenChange={(open) => {
            setDialogOpen(open);
            if (!open) resetForm();
          }}>
            <DialogTrigger>
              <Button>上传资源</Button>
            </DialogTrigger>
            <DialogContent className="border-[#eadbc8] bg-[#fffdf8] sm:max-w-lg">
              <DialogHeader>
                <DialogTitle className="text-xl text-[#4e1d1a]">上传资源</DialogTitle>
              </DialogHeader>
              <div className="space-y-4 pt-2">
                <Input
                  placeholder="资源标题"
                  value={formTitle}
                  onChange={(e) => setFormTitle(e.target.value)}
                />
                <Textarea
                  placeholder="描述（选填）"
                  value={formDesc}
                  onChange={(e) => setFormDesc(e.target.value)}
                  rows={3}
                />
                <Select value={formCategory} onValueChange={(v) => v && setFormCategory(v)}>
                  <SelectTrigger>
                    <SelectValue>{RESOURCE_CATEGORIES[formCategory] || formCategory}</SelectValue>
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="course_material">课件资料</SelectItem>
                    <SelectItem value="assignment">作业</SelectItem>
                    <SelectItem value="reading">阅读材料</SelectItem>
                    <SelectItem value="other">其他</SelectItem>
                  </SelectContent>
                </Select>
                <div>
                  <input
                    ref={fileInputRef}
                    type="file"
                    className="block w-full text-sm text-[#7a5e4f] file:mr-4 file:rounded-xl file:border-0 file:bg-[#f3e4cf] file:px-4 file:py-2 file:text-sm file:font-medium file:text-[#74411f] hover:file:bg-[#ecd6b7]"
                    onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
                  />
                  <p className="mt-1 text-xs text-[#9d806f]">支持 PDF、Word、Excel、PPT、ZIP 等，最大 50MB</p>
                </div>
                <Button onClick={handleSubmit} disabled={submitting || !selectedFile} className="w-full">
                  {submitting ? "上传中..." : "上传"}
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        </RoleGuard>
      </div>

      {/* Category tabs */}
      <div className="flex flex-wrap gap-2 rounded-[1.5rem] border border-[#eadbc8] bg-[#fffaf2] p-2">
        {Object.entries(RESOURCE_CATEGORIES).map(([key, label]) => (
          <Button
            key={key}
            variant={category === key ? "default" : "outline"}
            size="sm"
            onClick={() => { setCategory(key); setPage(1); }}
          >
            {label}
          </Button>
        ))}
      </div>

      {loading ? (
        <div className="space-y-2">
          {[1, 2, 3].map((i) => (
            <Card key={i} className="animate-pulse bg-[#fffaf2]">
              <CardContent className="p-4">
                <div className="h-16 bg-gray-200 rounded" />
              </CardContent>
            </Card>
          ))}
        </div>
      ) : error ? (
        <ErrorState message={error} onRetry={loadResources} />
      ) : resources.length === 0 ? (
        <div className="rounded-[2rem] border border-dashed border-[#dcc6ab] bg-[#fffaf2] py-12 text-center text-[#9d806f]">暂无资源</div>
      ) : (
        <div className="space-y-3">
          {resources.map((r) => (
            <Card key={r.id} className="bg-[#fffdf8]">
              <CardContent className="flex items-center justify-between p-4">
                <div className="flex items-center gap-3">
                  <span className="text-2xl">{getFileIcon(r.file_type)}</span>
                  <div>
                    <p className="font-medium text-[#4e1d1a]">{r.title}</p>
                    <p className="text-sm text-[#7a5e4f]">
                      {r.uploader_name} · {formatFileSize(r.file_size)} · 下载 {r.download_count} 次
                    </p>
                    {r.description && (
                      <p className="mt-1 text-xs text-[#9d806f]">{r.description}</p>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Badge variant="outline" className="border-[#dcc6ab] bg-[#fff8ef] text-[#7a5e4f]">
                    {RESOURCE_CATEGORIES[r.category] || r.category}
                  </Badge>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleDownload(r)}
                  >
                    下载
                  </Button>
                  <RoleGuard permissions={["resource_manage"]}>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="text-red-500"
                      onClick={() => setDeleteTarget(r.id)}
                    >
                      删除
                    </Button>
                  </RoleGuard>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      <Pagination page={page} totalPages={totalPages} onPageChange={setPage} />

      <ConfirmDialog
        open={deleteTarget !== null}
        onOpenChange={(open) => { if (!open) setDeleteTarget(null); }}
        title="删除资源"
        description="确定删除该资源？此操作不可恢复。"
        confirmText="删除"
        variant="destructive"
        onConfirm={() => deleteTarget && handleDelete(deleteTarget)}
      />
    </div>
  );
}