import Link from "next/link";
import { db } from "@/db";
import { grades, books, lessons, questions } from "@/db/schema";
import { eq, asc, desc } from "drizzle-orm";
import { Library, Download, Upload, Trash2, Filter } from "lucide-react";
import { Card, SectionTitle, Table, Th, Td, Empty, selectCls, Field, Badge, DiffBadge, TypeBadge, inputCls } from "@/components/ui";
import { ActionForm, SubmitBtn, ConfirmSubmit } from "@/components/ui-client";
import { importQuestionsExcel, deleteQuestion } from "@/lib/actions";
import { faNum, fmtJ } from "@/lib/jalali";
import { QuestionForm } from "@/components/question-form";

export async function BankView({ basePath, sp }: { basePath: string; sp: Record<string, string | undefined> }) {
  const selGrade = Number(sp.grade ?? 0);
  const selBook = Number(sp.book ?? 0);
  const selLesson = Number(sp.lesson ?? 0);
  const qType = sp.type ?? "";

  const [gradeList, bookList, lessonList] = await Promise.all([
    db.select().from(grades).orderBy(asc(grades.level)),
    db.select().from(books).orderBy(asc(books.id)),
    db.select().from(lessons).orderBy(asc(lessons.sort)),
  ]);
  const booksOfGrade = selGrade ? bookList.filter((b) => b.gradeId === selGrade) : [];
  const lessonsOfBook = selBook ? lessonList.filter((l) => l.bookId === selBook) : [];

  let qList: typeof questions.$inferSelect[] = [];
  let total = 0;
  if (selLesson) {
    qList = await db.select().from(questions).where(eq(questions.lessonId, selLesson)).orderBy(desc(questions.id)).limit(80);
    total = (await db.select({ id: questions.id }).from(questions).where(eq(questions.lessonId, selLesson))).length;
  }
  if (qType) qList = qList.filter((q) => q.type === qType);

  const qs = (obj: Record<string, string | number>) => {
    const cur = { grade: selGrade, book: selBook, lesson: selLesson, type: qType };
    const n = { ...cur, ...obj };
    const parts = Object.entries(n).filter(([, v]) => String(v)).map(([k, v]) => `${k}=${v}`);
    return `${basePath}${parts.length ? "?" + parts.join("&") : ""}`;
  };

  return (
    <div>
      {/* فیلتر‌ها */}
      <Card className="mb-5 p-5">
        <div className="mb-3 flex items-center gap-2 text-sm font-extrabold text-emerald-950"><Filter size={16} className="text-emerald-700" /> فیلتر بر اساس پایه، کتاب و درس</div>
        <div className="flex flex-wrap gap-1.5">
          {gradeList.map((g) => (
            <Link key={g.id} href={qs({ grade: g.id, book: 0, lesson: 0, type: "" })}
              className={`rounded-full px-3.5 py-1.5 text-xs font-bold transition ${selGrade === g.id ? "bg-emerald-700 text-white shadow" : "bg-emerald-900/5 text-emerald-900 hover:bg-emerald-900/10"}`}>
              {g.name}
            </Link>
          ))}
        </div>
        {selGrade > 0 && (
          <div className="mt-3 flex flex-wrap gap-1.5 border-t border-emerald-900/8 pt-3">
            {booksOfGrade.map((b) => (
              <Link key={b.id} href={qs({ book: b.id, lesson: 0, type: "" })}
                className={`rounded-full px-3 py-1.5 text-xs font-bold transition ${selBook === b.id ? "bg-amber-500 text-white shadow" : "bg-amber-50 text-amber-900 hover:bg-amber-100"}`}>
                {b.title}
              </Link>
            ))}
          </div>
        )}
        {selBook > 0 && (
          <div className="mt-3 flex flex-wrap gap-1.5 border-t border-emerald-900/8 pt-3">
            {lessonsOfBook.map((l) => (
              <Link key={l.id} href={qs({ lesson: l.id, type: "" })}
                className={`rounded-xl px-3 py-1.5 text-xs font-bold transition ${selLesson === l.id ? "bg-gradient-to-l from-emerald-700 to-emerald-900 text-white shadow" : "bg-emerald-50 text-emerald-800 ring-1 ring-emerald-900/8 hover:bg-emerald-100"}`}>
                {l.title}
              </Link>
            ))}
          </div>
        )}
      </Card>

      {selLesson > 0 ? (
        <>
          <div className="grid gap-5 lg:grid-cols-2">
            {/* افزودن سؤال دستی */}
            <Card className="p-5">
              <SectionTitle>افزودن سؤال دستی</SectionTitle>
              <QuestionForm lessonId={selLesson} />
            </Card>
            {/* ورود از اکسل */}
            <Card className="p-5">
              <SectionTitle>ورود گروهی از فایل اکسل</SectionTitle>
              <p className="mb-3 rounded-xl bg-emerald-50 px-4 py-3 text-xs leading-6 text-emerald-900">
                ستون‌ها: نوع سؤال (تستی / صحیح غلط / کوتاه پاسخ / توضیحی)، متن سؤال، گزینه‌های ۱ تا ۴، پاسخ صحیح، سختی.
              </p>
              <a href="/api/sample-questions" className="mb-4 inline-flex items-center gap-1.5 rounded-xl border border-amber-300 bg-amber-50 px-4 py-2.5 text-xs font-extrabold text-amber-800 transition hover:bg-amber-100">
                <Download size={15} /> دانلود فایل نمونهٔ اکسل
              </a>
              <ActionForm action={importQuestionsExcel} className="space-y-3" resetOnSuccess>
                <input type="hidden" name="lessonId" value={selLesson} />
                <Field label="فایل اکسل (.xlsx)">
                  <input type="file" name="file" accept=".xlsx,.xls,.csv" required className={inputCls + " text-xs"} />
                </Field>
                <SubmitBtn><Upload size={15} /> ورود سوالات به بانک</SubmitBtn>
              </ActionForm>
            </Card>
          </div>

          {/* لیست سؤالات */}
          <SectionTitle action={
            <div className="flex gap-1.5">
              {[["", "همه"], ["mcq", "تستی"], ["tf", "صحیح/غلط"], ["short", "کوتاه"], ["desc", "تشریحی"]].map(([k, l]) => (
                <Link key={k} href={qs({ type: k })} className={`rounded-full px-3 py-1 text-[11px] font-bold ${qType === k ? "bg-emerald-700 text-white" : "bg-emerald-900/5 text-emerald-800"}`}>{l}</Link>
              ))}
            </div>
          }>سؤالات این درس ({faNum(total)} سؤال)</SectionTitle>
          <Card className="p-4">
            {qList.length === 0 ? <Empty text="سؤالی با این فیلتر یافت نشد." /> : (
              <Table>
                <thead><tr><Th>#</Th><Th>نوع</Th><Th>متن سؤال</Th><Th>سختی</Th><Th>تاریخ</Th><Th></Th></tr></thead>
                <tbody>
                  {qList.map((q, i) => (
                    <tr key={q.id}>
                      <Td className="text-emerald-900/40">{faNum(i + 1)}</Td>
                      <Td><TypeBadge t={q.type} /></Td>
                      <Td className="max-w-lg">
                        <div className="font-bold leading-6">{q.text}</div>
                        {q.options && (
                          <div className="mt-1 flex flex-wrap gap-1 text-[10px]">
                            {q.options.map((o, j) => (
                              <span key={j} className={`rounded-full px-2 py-0.5 ${o === q.answer ? "bg-emerald-600 text-white font-black" : "bg-emerald-900/5"}`}>{o}</span>
                            ))}
                          </div>
                        )}
                        {!q.options && q.answer && <div className="mt-0.5 text-[10px] text-emerald-700/70">پاسخ: {q.answer}</div>}
                      </Td>
                      <Td><DiffBadge d={q.difficulty} /></Td>
                      <Td className="whitespace-nowrap text-[11px] text-emerald-800/60">{fmtJ(q.createdAt)}</Td>
                      <Td>
                        <form action={deleteQuestion.bind(null, q.id)}>
                          <ConfirmSubmit message="حذف این سؤال؟" className="grid size-8 place-items-center rounded-lg bg-red-100 text-red-700 hover:bg-red-200"><Trash2 size={14} /></ConfirmSubmit>
                        </form>
                      </Td>
                    </tr>
                  ))}
                </tbody>
              </Table>
            )}
          </Card>
        </>
      ) : (
        <Card className="p-10 text-center text-sm text-emerald-800/60">
          <Library size={28} className="mx-auto mb-3 text-emerald-700/40" />
          برای مشاهده و مدیریت سؤالات، ابتدا <b>پایه → کتاب → درس</b> را انتخاب کنید.
        </Card>
      )}
    </div>
  );
}