"use client";

import { useState } from "react";
import { useLang } from "@/context/LanguageContext";
import {
  Alert,
  Button,
  Card,
  DatePicker,
  EmptyState,
  Input,
  Modal,
  PageHeader,
  PageLoader,
  Select,
  StatCard,
  StatusBadge,
  Textarea,
} from "@/components/ui";
import { api, useApi } from "@/lib/client";
import { formatDate } from "@/lib/utils";
import { IconBook, IconCheck, IconEdit, IconPlus, IconTrash } from "@/components/icons";
import { emsConfirm } from "@/components/ConfirmDialog";

interface Week {
  id: number;
  weekNo: number;
  topic: string;
  homework: string | null;
  isDone: boolean;
}

interface Plan {
  id: number;
  staffId: number | null;
  teacherName: string | null;
  classItemId: number | null;
  className: string | null;
  sectionItemId: number | null;
  sectionName: string | null;
  subjectItemId: number | null;
  subjectName: string | null;
  chapter: string;
  topics: string | null;
  startDate: string;
  endDate: string | null;
  totalPeriods: number;
  completedPeriods: number;
  status: string;
  weeks: Week[];
}

interface Item {
  id: number;
  category: string;
  name: string;
  nameBn: string;
}

interface StaffMini {
  id: number;
  employeeCode: string;
  name: string;
  status: string;
}

const emptyForm = {
  staffId: "",
  classItemId: "",
  sectionItemId: "",
  subjectItemId: "",
  chapter: "",
  topics: "",
  startDate: "",
  endDate: "",
  totalPeriods: "10",
  completedPeriods: "0",
};

const emptyWeek = { topic: "", homework: "", isDone: false };

export default function PortalLessonPlansPage() {
  const { t, locale } = useLang();
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const { data, loading, reload } = useApi<{ plans: Plan[] }>("/api/portal/lesson-plans");
  const { data: academic } = useApi<{ items: Item[] }>("/api/portal/academic");
  const { data: hrData } = useApi<{ staff: StaffMini[] }>("/api/portal/hr");

  const [formOpen, setFormOpen] = useState(false);
  const [editing, setEditing] = useState<Plan | null>(null);
  const [form, setForm] = useState(emptyForm);
  const [weeks, setWeeks] = useState<Array<{ topic: string; homework: string; isDone: boolean }>>([]);
  const [saving, setSaving] = useState(false);

  const [progressOpen, setProgressOpen] = useState<Plan | null>(null);
  const [progressValue, setProgressValue] = useState("0");
  const [progressSaving, setProgressSaving] = useState(false);

  const cat = (c: string) => (academic?.items ?? []).filter((i) => i.category === c);
  const classes = cat("CLASS");
  const sections = cat("SECTION");
  const subjects = cat("SUBJECT");
  const teachers = (hrData?.staff ?? []).filter((st) => st.status === "ACTIVE");

  function notify(type: "success" | "error", text: string) {
    setMessage({ type, text });
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  function openCreate() {
    setEditing(null);
    setForm({ ...emptyForm, startDate: new Date().toISOString().slice(0, 10) });
    setWeeks([]);
    setFormOpen(true);
  }

  function openEdit(p: Plan) {
    setEditing(p);
    setForm({
      staffId: p.staffId ? String(p.staffId) : "",
      classItemId: p.classItemId ? String(p.classItemId) : "",
      sectionItemId: p.sectionItemId ? String(p.sectionItemId) : "",
      subjectItemId: p.subjectItemId ? String(p.subjectItemId) : "",
      chapter: p.chapter,
      topics: p.topics ?? "",
      startDate: p.startDate,
      endDate: p.endDate ?? "",
      totalPeriods: String(p.totalPeriods),
      completedPeriods: String(p.completedPeriods),
    });
    setWeeks(p.weeks.map((w) => ({ topic: w.topic, homework: w.homework ?? "", isDone: w.isDone })));
    setFormOpen(true);
  }

  async function save() {
    setSaving(true);
    try {
      const payload = {
        ...form,
        staffId: form.staffId || null,
        classItemId: form.classItemId || null,
        sectionItemId: form.sectionItemId || null,
        subjectItemId: form.subjectItemId || null,
        totalPeriods: Number(form.totalPeriods) || 0,
        completedPeriods: Number(form.completedPeriods) || 0,
        endDate: form.endDate || null,
        weeks,
      };
      if (editing) {
        await api(`/api/portal/lesson-plans/${editing.id}`, { method: "PUT", body: JSON.stringify(payload) });
        notify("success", t.portal.lessonPlanPage.planUpdated);
      } else {
        await api("/api/portal/lesson-plans", { method: "POST", body: JSON.stringify(payload) });
        notify("success", t.portal.lessonPlanPage.planCreated);
      }
      setFormOpen(false);
      reload();
    } catch {
      notify("error", t.common.tryAgain);
    } finally {
      setSaving(false);
    }
  }

  function openProgress(p: Plan) {
    setProgressOpen(p);
    setProgressValue(String(p.completedPeriods));
  }

  async function saveProgress() {
    if (!progressOpen) return;
    setProgressSaving(true);
    try {
      await api(`/api/portal/lesson-plans/${progressOpen.id}`, {
        method: "PUT",
        body: JSON.stringify({ completedPeriods: Number(progressValue) || 0 }),
      });
      setProgressOpen(null);
      reload();
      notify("success", t.portal.lessonPlanPage.progressSaved);
    } catch {
      notify("error", t.common.tryAgain);
    } finally {
      setProgressSaving(false);
    }
  }

  async function remove(p: Plan) {
    if (!(await emsConfirm({ message: t.common.confirmDelete, danger: true }))) return;
    try {
      await api(`/api/portal/lesson-plans/${p.id}`, { method: "DELETE" });
      notify("success", t.common.deletedSuccessfully);
      reload();
    } catch {
      notify("error", t.common.tryAgain);
    }
  }

  if (loading) return <PageLoader text={t.common.loading} />;
  const plans = data?.plans ?? [];
  const stats = {
    total: plans.length,
    inProgress: plans.filter((p) => p.status === "IN_PROGRESS").length,
    completed: plans.filter((p) => p.status === "COMPLETED").length,
    periods: plans.reduce((sum, p) => sum + p.completedPeriods, 0),
  };

  return (
    <div>
      <PageHeader
        title={t.portal.lessonPlanPage.title}
        subtitle={t.portal.lessonPlanPage.subtitle}
        action={
          <Button onClick={openCreate}>
            <IconPlus className="svg-16" />
            <span className="ms-1">{t.portal.lessonPlanPage.newPlan}</span>
          </Button>
        }
      />

      {message && (
        <div className="mb-4">
          <Alert type={message.type} onClose={() => setMessage(null)}>{message.text}</Alert>
        </div>
      )}

      <div className="row g-3 mb-4">
        <div className="col-xl-3 col-sm-6">
          <StatCard label={t.portal.lessonPlanPage.totalPlans} value={String(stats.total)} icon={<IconBook />} accent="teal" />
        </div>
        <div className="col-xl-3 col-sm-6">
          <StatCard label={t.status.IN_PROGRESS} value={String(stats.inProgress)} icon={<IconEdit />} accent="sky" />
        </div>
        <div className="col-xl-3 col-sm-6">
          <StatCard label={t.status.COMPLETED} value={String(stats.completed)} icon={<IconCheck />} accent="purple" />
        </div>
        <div className="col-xl-3 col-sm-6">
          <StatCard label={t.portal.lessonPlanPage.periodsTaught} value={String(stats.periods)} icon={<IconBook />} accent="orange" />
        </div>
      </div>

      {plans.length === 0 ? (
        <div className="card">
          <EmptyState
            icon={<IconBook />}
            title={t.portal.lessonPlanPage.noPlans}
            action={
              <Button onClick={openCreate}>
                <IconPlus className="svg-16" />
                <span className="ms-1">{t.portal.lessonPlanPage.newPlan}</span>
              </Button>
            }
          />
        </div>
      ) : (
        <div className="row g-3">
          {plans.map((p) => {
            const pct = p.totalPeriods > 0 ? Math.min(100, Math.round((p.completedPeriods / p.totalPeriods) * 100)) : 0;
            return (
              <div className="col-xl-6" key={p.id}>
                <Card>
                  <div className="d-flex justify-content-between align-items-start gap-2">
                    <div className="min-w-0">
                      <h5 className="f-w-700 mb-1">{p.chapter}</h5>
                      <p className="mb-1 ems-fs-12 text-muted">
                        {p.subjectName ?? "—"}
                        {p.className ? ` · ${p.className}` : ""}
                        {p.sectionName ? ` (${p.sectionName})` : ""}
                        {p.teacherName ? ` · ${p.teacherName}` : ""}
                      </p>
                      <p className="mb-2 ems-fs-12 text-muted">
                        {formatDate(p.startDate, locale)}
                        {p.endDate ? ` — ${formatDate(p.endDate, locale)}` : ""}
                      </p>
                    </div>
                    <div className="d-flex flex-shrink-0">
                      <button className="btn btn-soft-primary btn-sm me-1" onClick={() => openProgress(p)} type="button" title={t.portal.lessonPlanPage.updateProgress}>
                        <IconCheck className="svg-16" />
                      </button>
                      <button className="btn btn-soft-secondary btn-sm me-1" onClick={() => openEdit(p)} type="button">
                        <IconEdit className="svg-16" />
                      </button>
                      <button className="btn btn-soft-danger btn-sm" onClick={() => remove(p)} type="button">
                        <IconTrash className="svg-16" />
                      </button>
                    </div>
                  </div>

                  {p.topics && <p className="mb-2 ems-fs-13">{p.topics}</p>}

                  {/* Progress */}
                  <div className="mb-2">
                    <div className="d-flex justify-content-between ems-fs-12 mb-1">
                      <span className="text-muted">
                        {t.portal.lessonPlanPage.progress}: {p.completedPeriods}/{p.totalPeriods} {t.portal.lessonPlanPage.periods}
                      </span>
                      <span className="f-w-700">{pct}%</span>
                    </div>
                    <div className="progress ems-progress-thin">
                      <div
                        className="progress-bar bg-success"
                        role="progressbar"
                        style={{ width: `${pct}%` }}
                        aria-valuenow={pct}
                        aria-valuemin={0}
                        aria-valuemax={100}
                      />
                    </div>
                  </div>

                  <div className="d-flex align-items-center gap-2">
                    <StatusBadge status={p.status} label={t.lessonStatuses[p.status as keyof typeof t.lessonStatuses] ?? p.status} />
                    <span className="ems-fs-11 text-muted">
                      {p.weeks.filter((w) => w.isDone).length}/{p.weeks.length} {t.portal.lessonPlanPage.weeksDone}
                    </span>
                  </div>
                </Card>
              </div>
            );
          })}
        </div>
      )}

      {/* Create/edit modal */}
      <Modal
        open={formOpen}
        onClose={() => setFormOpen(false)}
        title={editing ? t.portal.lessonPlanPage.editPlan : t.portal.lessonPlanPage.newPlan}
        wide
      >
        <div className="row">
          <div className="col-md-6">
            <Input label={t.portal.lessonPlanPage.chapter} value={form.chapter} onChange={(e) => setForm({ ...form, chapter: e.target.value })} placeholder={t.portal.lessonPlanPage.chapterPlaceholder} />
          </div>
          <div className="col-md-6">
            <Select label={t.portal.schedulePage.teacherLabel} value={form.staffId} onChange={(e) => setForm({ ...form, staffId: e.target.value })}>
              <option value="">— {t.common.filter} —</option>
              {teachers.map((st) => (
                <option key={st.id} value={st.id}>
                  {st.employeeCode} — {st.name}
                </option>
              ))}
            </Select>
          </div>
          <div className="col-md-4">
            <Select label={t.categories.CLASS} value={form.classItemId} onChange={(e) => setForm({ ...form, classItemId: e.target.value })}>
              <option value="">—</option>
              {classes.map((i) => (
                <option key={i.id} value={i.id}>
                  {locale === "bn" ? i.nameBn : i.name}
                </option>
              ))}
            </Select>
          </div>
          <div className="col-md-4">
            <Select label={t.categories.SECTION} value={form.sectionItemId} onChange={(e) => setForm({ ...form, sectionItemId: e.target.value })}>
              <option value="">—</option>
              {sections.map((i) => (
                <option key={i.id} value={i.id}>
                  {locale === "bn" ? i.nameBn : i.name}
                </option>
              ))}
            </Select>
          </div>
          <div className="col-md-4">
            <Select label={t.categories.SUBJECT} value={form.subjectItemId} onChange={(e) => setForm({ ...form, subjectItemId: e.target.value })}>
              <option value="">—</option>
              {subjects.map((i) => (
                <option key={i.id} value={i.id}>
                  {locale === "bn" ? i.nameBn : i.name}
                </option>
              ))}
            </Select>
          </div>
          <div className="col-md-4">
            <DatePicker label={t.portal.lessonPlanPage.startLabel} value={form.startDate} onChange={(e) => setForm({ ...form, startDate: e.target.value })} />
          </div>
          <div className="col-md-4">
            <DatePicker label={`${t.portal.lessonPlanPage.endLabel} (${t.common.optional})`} value={form.endDate} onChange={(e) => setForm({ ...form, endDate: e.target.value })} />
          </div>
          <div className="col-md-4">
            <Input label={t.portal.lessonPlanPage.totalPeriods} type="number" min="0" value={form.totalPeriods} onChange={(e) => setForm({ ...form, totalPeriods: e.target.value })} />
          </div>
          <div className="col-md-12">
            <Textarea label={`${t.portal.lessonPlanPage.topics} (${t.common.optional})`} value={form.topics} onChange={(e) => setForm({ ...form, topics: e.target.value })} />
          </div>
        </div>

        {/* Weekly breakdown editor */}
        <label className="col-form-label pt-0 f-w-600">{t.portal.lessonPlanPage.weeklyBreakdown}</label>
        {weeks.map((w, i) => (
          <div className="row g-2 align-items-center mb-2" key={i}>
            <div className="col-auto ems-fs-12 f-w-700 text-muted">#{i + 1}</div>
            <div className="col">
              <input
                className="form-control form-control-sm"
                placeholder={t.portal.lessonPlanPage.weekTopic}
                value={w.topic}
                onChange={(e) => setWeeks(weeks.map((x, j) => (j === i ? { ...x, topic: e.target.value } : x)))}
              />
            </div>
            <div className="col">
              <input
                className="form-control form-control-sm"
                placeholder={t.portal.lessonPlanPage.homework}
                value={w.homework}
                onChange={(e) => setWeeks(weeks.map((x, j) => (j === i ? { ...x, homework: e.target.value } : x)))}
              />
            </div>
            <div className="col-auto">
              <input
                type="checkbox"
                className="form-check-input mt-0"
                checked={w.isDone}
                title={t.portal.lessonPlanPage.weekDone}
                onChange={(e) => setWeeks(weeks.map((x, j) => (j === i ? { ...x, isDone: e.target.checked } : x)))}
              />
            </div>
            <div className="col-auto">
              <button
                type="button"
                className="btn btn-soft-danger btn-sm"
                onClick={() => setWeeks(weeks.filter((_, j) => j !== i))}
              >
                <IconTrash className="svg-14" />
              </button>
            </div>
          </div>
        ))}
        <Button size="sm" variant="secondary" onClick={() => setWeeks([...weeks, { ...emptyWeek }])}>
          <IconPlus className="svg-14" />
          <span className="ms-1">{t.portal.lessonPlanPage.addWeek}</span>
        </Button>

        <div className="d-flex justify-content-end gap-2 mt-3">
          <Button variant="secondary" onClick={() => setFormOpen(false)}>
            {t.common.cancel}
          </Button>
          <Button onClick={save} loading={saving} disabled={!form.chapter.trim() || !form.startDate}>
            {t.common.save}
          </Button>
        </div>
      </Modal>

      {/* Progress modal */}
      <Modal open={!!progressOpen} onClose={() => setProgressOpen(null)} title={t.portal.lessonPlanPage.updateProgress}>
        {progressOpen && (
          <>
            <h6 className="f-w-700 mb-1">{progressOpen.chapter}</h6>
            <p className="ems-fs-12 text-muted mb-3">
              {progressOpen.subjectName ?? ""} · {progressOpen.completedPeriods}/{progressOpen.totalPeriods} {t.portal.lessonPlanPage.periods}
            </p>
            <Input
              label={t.portal.lessonPlanPage.completedPeriods}
              type="number"
              min="0"
              max={progressOpen.totalPeriods}
              value={progressValue}
              onChange={(e) => setProgressValue(e.target.value)}
            />
            <div className="d-flex justify-content-end gap-2">
              <Button variant="secondary" onClick={() => setProgressOpen(null)}>
                {t.common.cancel}
              </Button>
              <Button onClick={saveProgress} loading={progressSaving}>
                {t.common.save}
              </Button>
            </div>
          </>
        )}
      </Modal>
    </div>
  );
}