"use client";

import { useCallback, useEffect, useState } from "react";
import { useActiveClass } from "@/hooks/use-active-class";
import { fetchAPI, postAPI, putAPI, deleteAPI, getErrorMessage } from "@/lib/api";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
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 { CalendarView } from "@/components/calendar-view";
import { toast } from "sonner";
import type { PageResponse, ScheduleItem } from "@/lib/types";
import { SCHEDULE_TYPES } from "@/lib/constants";

export default function SchedulePage() {
  const { activeClassId } = useActiveClass();
  const [items, setItems] = useState<ScheduleItem[]>([]);
  const [upcoming, setUpcoming] = useState<ScheduleItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [viewMode, setViewMode] = useState<"list" | "calendar">("list");
  const [dialogOpen, setDialogOpen] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);

  // Form state
  const [formType, setFormType] = useState("course");
  const [formTitle, setFormTitle] = useState("");
  const [formStartTime, setFormStartTime] = useState("");
  const [formEndTime, setFormEndTime] = useState("");
  const [formLocation, setFormLocation] = useState("");
  const [formDesc, setFormDesc] = useState("");
  const isDeadlineType = formType === "deadline";

  const getDisplayTime = (item: ScheduleItem) =>
    item.type === "deadline" && item.end_time ? item.end_time : item.start_time;

  const loadData = useCallback(async () => {
    if (!activeClassId) {
      setItems([]);
      setUpcoming([]);
      setError(null);
      setLoading(false);
      return;
    }
    setLoading(true);
    setError(null);
    try {
      const params = { class_id: String(activeClassId), page: String(page), page_size: "20" };
      const [allRes, upcomingRes] = await Promise.all([
        fetchAPI<PageResponse<ScheduleItem>>("/api/schedule/", params),
        fetchAPI<ScheduleItem[]>("/api/schedule/upcoming", { limit: "10", class_id: String(activeClassId) }),
      ]);
      setItems(allRes.items ?? []);
      setTotalPages(allRes.total_pages ?? 1);
      setUpcoming(upcomingRes);
    } catch (err: unknown) {
      setError(getErrorMessage(err, "加载失败"));
    } finally {
      setLoading(false);
    }
  }, [activeClassId, page]);

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

  const getCountdown = (dateTime: string) => {
    const diff = new Date(dateTime).getTime() - Date.now();
    const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
    if (days <= 0) return { text: "已截止", urgent: false };
    if (days === 1) return { text: "明天", urgent: true };
    if (days <= 3) return { text: `${days}天后`, urgent: true };
    if (days <= 7) return { text: `${days}天后`, urgent: false };
    return { text: `${days}天后`, urgent: false };
  };

  const handleSubmit = async () => {
    const primaryTime = isDeadlineType ? formEndTime : formStartTime;
    if (!formTitle.trim() || !primaryTime) return;
    setSubmitting(true);
    try {
      const payload = {
        type: formType,
        title: formTitle,
        start_time: isDeadlineType ? primaryTime : formStartTime,
        end_time: isDeadlineType ? primaryTime : formEndTime || null,
        location: isDeadlineType ? null : formLocation || null,
        description: formDesc || null,
      };
      if (editingId) {
        await putAPI(`/api/schedule/${editingId}`, payload);
        toast.success("排期已更新");
      } else {
        await postAPI(`/api/schedule/?class_id=${activeClassId}`, payload);
        toast.success("排期已创建");
      }
      setDialogOpen(false);
      resetForm();
      await loadData();
    } catch (err: unknown) {
      toast.error(getErrorMessage(err, editingId ? "更新失败" : "创建失败"));
    } finally {
      setSubmitting(false);
    }
  };

  const openEdit = (item: ScheduleItem) => {
    setEditingId(item.id);
    setFormType(item.type);
    setFormTitle(item.title);
    // Format datetime for datetime-local input (YYYY-MM-DDTHH:mm)
    const pad = (n: number) => String(n).padStart(2, "0");
    const fmt = (d: string) => {
      const dt = new Date(d);
      return `${dt.getFullYear()}-${pad(dt.getMonth() + 1)}-${pad(dt.getDate())}T${pad(dt.getHours())}:${pad(dt.getMinutes())}`;
    };
    const effectiveTime = item.type === "deadline" && item.end_time ? item.end_time : item.start_time;
    setFormStartTime(item.type === "deadline" ? "" : fmt(item.start_time));
    setFormEndTime(item.type === "deadline" ? fmt(effectiveTime) : item.end_time ? fmt(item.end_time) : "");
    setFormLocation(item.type === "deadline" ? "" : item.location || "");
    setFormDesc(item.description || "");
    setDialogOpen(true);
  };

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

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

  const resetForm = () => {
    setEditingId(null);
    setFormType("course");
    setFormTitle("");
    setFormStartTime("");
    setFormEndTime("");
    setFormLocation("");
    setFormDesc("");
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">排期表</h1>
          <p className="text-gray-500 mt-1">课程、截止日、活动安排</p>
        </div>
        <div className="flex items-center gap-2">
          {/* View mode toggle */}
          <div className="flex border rounded-lg p-0.5">
            <Button
              variant={viewMode === "list" ? "default" : "ghost"}
              size="sm"
              onClick={() => setViewMode("list")}
            >
              列表
            </Button>
            <Button
              variant={viewMode === "calendar" ? "default" : "ghost"}
              size="sm"
              onClick={() => setViewMode("calendar")}
            >
              日历
            </Button>
          </div>
          <RoleGuard permissions={["schedule_manage"]}>
          <Dialog open={dialogOpen} onOpenChange={(open) => {
            setDialogOpen(open);
            if (!open) resetForm();
          }}>
            <DialogTrigger>
              <Button onClick={() => resetForm()}>添加排期</Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{editingId ? "编辑排期" : "添加排期"}</DialogTitle>
              </DialogHeader>
              <div className="space-y-4 pt-2">
                <Select value={formType} onValueChange={(v) => v && setFormType(v)}>
                  <SelectTrigger>
                    <SelectValue>{SCHEDULE_TYPES[formType as keyof typeof SCHEDULE_TYPES]?.label || formType}</SelectValue>
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="course">课程</SelectItem>
                    <SelectItem value="deadline">截止日</SelectItem>
                    <SelectItem value="activity">活动</SelectItem>
                  </SelectContent>
                </Select>
                <Input
                  placeholder="标题"
                  value={formTitle}
                  onChange={(e) => setFormTitle(e.target.value)}
                />
                {isDeadlineType ? (
                  <div>
                    <label className="text-sm text-gray-500">截止时间</label>
                    <Input
                      type="datetime-local"
                      value={formEndTime}
                      onChange={(e) => setFormEndTime(e.target.value)}
                    />
                  </div>
                ) : (
                  <>
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="text-sm text-gray-500">开始时间</label>
                        <Input
                          type="datetime-local"
                          value={formStartTime}
                          onChange={(e) => setFormStartTime(e.target.value)}
                        />
                      </div>
                      <div>
                        <label className="text-sm text-gray-500">结束时间</label>
                        <Input
                          type="datetime-local"
                          value={formEndTime}
                          onChange={(e) => setFormEndTime(e.target.value)}
                        />
                      </div>
                    </div>
                    <Input
                      placeholder="地点"
                      value={formLocation}
                      onChange={(e) => setFormLocation(e.target.value)}
                    />
                  </>
                )}
                <Textarea
                  placeholder="描述"
                  value={formDesc}
                  onChange={(e) => setFormDesc(e.target.value)}
                  rows={3}
                />
                <Button onClick={handleSubmit} disabled={submitting} className="w-full">
                  {submitting ? (editingId ? "保存中..." : "创建中...") : (editingId ? "保存" : "创建")}
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        </RoleGuard>
        </div>
      </div>

      {/* Calendar view or list view */}
      {viewMode === "calendar" ? (
        <CalendarView events={items} onEventClick={openEdit} />
      ) : (
      <>
      {/* Upcoming with countdown */}
      {upcoming.length > 0 && (
        <div>
          <h2 className="text-lg font-semibold mb-3">即将到来</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {upcoming.map((item) => {
              const displayTime = getDisplayTime(item);
              const countdown = getCountdown(displayTime);
              const typeInfo = SCHEDULE_TYPES[item.type] || { label: item.type, color: "bg-gray-400" };
              return (
                <Card key={item.id} className={countdown.urgent ? "border-red-200 bg-red-50/30" : ""}>
                  <CardContent className="p-4">
                    <div className="flex items-start justify-between">
                      <div className="flex items-center gap-2">
                        <div className={`w-3 h-3 rounded-full ${typeInfo.color}`} />
                        <Badge variant="outline" className="text-xs">
                          {typeInfo.label}
                        </Badge>
                      </div>
                      <Badge
                        variant={countdown.urgent ? "destructive" : "secondary"}
                        className="text-xs"
                      >
                        {countdown.text}
                      </Badge>
                    </div>
                    <h3 className="font-medium mt-2">{item.title}</h3>
                    <p className="text-sm text-gray-500 mt-1">
                      {new Date(displayTime).toLocaleString("zh-CN", {
                        month: "short",
                        day: "numeric",
                        hour: "2-digit",
                        minute: "2-digit",
                      })}
                    </p>
                    {item.location && (
                      <p className="text-sm text-gray-400 mt-1">{item.location}</p>
                    )}
                    <RoleGuard permissions={["schedule_manage"]}>
                      <div className="flex gap-2 mt-2">
                        <Button
                          variant="ghost"
                          size="sm"
                          className="p-0 h-auto text-gray-500 hover:text-gray-700"
                          onClick={() => openEdit(item)}
                        >
                          编辑
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="text-red-500 p-0 h-auto"
                          onClick={() => setDeleteTarget(item.id)}
                        >
                          删除
                        </Button>
                      </div>
                    </RoleGuard>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      )}

      {/* All schedules */}
      <div>
        <h2 className="text-lg font-semibold mb-3">全部排期</h2>
        {loading ? (
          <div className="space-y-2">
            {[1, 2, 3].map((i) => (
              <Card key={i} className="animate-pulse">
                <CardContent className="p-4">
                  <div className="h-12 bg-gray-200 rounded" />
                </CardContent>
              </Card>
            ))}
          </div>
        ) : error ? (
          <ErrorState message={error} onRetry={loadData} />
        ) : items.length === 0 ? (
          <div className="text-center py-8 text-gray-400">暂无排期</div>
        ) : (
          <div className="space-y-2">
            {items.map((item) => {
              const typeInfo = SCHEDULE_TYPES[item.type] || { label: item.type, color: "bg-gray-400" };
              return (
                <Card key={item.id}>
                  <CardContent className="p-4 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className={`w-3 h-3 rounded-full ${typeInfo.color}`} />
                      <div>
                        <p className="font-medium">{item.title}</p>
                        <p className="text-sm text-gray-500">
                          {new Date(getDisplayTime(item)).toLocaleString("zh-CN")}
                          {item.type !== "deadline" && item.location ? ` · ${item.location}` : ""}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge variant="outline">{typeInfo.label}</Badge>
                      <RoleGuard permissions={["schedule_manage"]}>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="text-gray-500 hover:text-gray-700"
                          onClick={() => openEdit(item)}
                        >
                          编辑
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="text-red-500"
                          onClick={() => setDeleteTarget(item.id)}
                        >
                          删除
                        </Button>
                      </RoleGuard>
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        )}
      </div>

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

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