"use client";

import { useEffect, useRef, useState } from "react";
import CustomLoader from "@/components/common/CustomLoader";
import RichTextEditor from "@/components/common/RichTextEditor";

interface IntroContent {
  id: string;
  section_name: string;
  html_content?: string | null;
  status?: boolean | null;
}

interface SyllabusItem {
  id: string;
  level_name: string;
  pdf_url: string;
  sort_order?: number | null;
  status?: boolean | null;
}

interface CertifiedStudent {
  id: string;
  level_name: string;
  student_name: string;
  image?: string | null;
  sort_order?: number | null;
  status?: boolean | null;
}

interface IntroFormState {
  section_name: string;
  html_content: string;
  status: boolean;
}

const EMPTY_INTRO_FORM: IntroFormState = {
  section_name: "",
  html_content: "",
  status: true,
};

const EMPTY_SYLLABUS: Omit<SyllabusItem, "id"> = {
  level_name: "",
  pdf_url: "",
  sort_order: 0,
  status: true,
};

const EMPTY_STUDENT: Omit<CertifiedStudent, "id"> = {
  level_name: "",
  student_name: "",
  image: "",
  sort_order: 0,
  status: true,
};

export default function KuchipudiExamsCmsPage() {
  // ----- Intro content -----
  const [existingIntro, setExistingIntro] = useState<IntroContent | null>(null);
  const [introLoading, setIntroLoading] = useState(true);
  const [introForm, setIntroForm] = useState<IntroFormState>(EMPTY_INTRO_FORM);
  const [introSubmitting, setIntroSubmitting] = useState(false);
  const [introError, setIntroError] = useState<string | null>(null);

  // ----- Syllabus -----
  const [syllabus, setSyllabus] = useState<SyllabusItem[]>([]);
  const [syllabusLoading, setSyllabusLoading] = useState(true);
  const [syllabusForm, setSyllabusForm] = useState<Omit<SyllabusItem, "id"> | SyllabusItem>(
    EMPTY_SYLLABUS
  );
  const [editingSyllabusId, setEditingSyllabusId] = useState<string | null>(null);
  const [syllabusSubmitting, setSyllabusSubmitting] = useState(false);
  const [syllabusError, setSyllabusError] = useState<string | null>(null);
  const [syllabusPdfUploading, setSyllabusPdfUploading] = useState(false);
  const syllabusFormRef = useRef<HTMLDivElement>(null);

  // ----- Certified students -----
  const [students, setStudents] = useState<CertifiedStudent[]>([]);
  const [studentsLoading, setStudentsLoading] = useState(true);
  const [studentForm, setStudentForm] = useState<Omit<CertifiedStudent, "id"> | CertifiedStudent>(
    EMPTY_STUDENT
  );
  const [editingStudentId, setEditingStudentId] = useState<string | null>(null);
  const [studentSubmitting, setStudentSubmitting] = useState(false);
  const [studentError, setStudentError] = useState<string | null>(null);
  const [studentImageUploading, setStudentImageUploading] = useState(false);
  const studentFormRef = useRef<HTMLDivElement>(null);

  // ----- Fetchers -----

  const fetchIntro = async () => {
    try {
      setIntroLoading(true);
      const response = await fetch("/api/admin/cms/kuchipudi-exams");
      const result = await response.json();

      if (result.success) {
        const item: IntroContent | null = result.data;
        setExistingIntro(item);

        if (item) {
          setIntroForm({
            section_name: item.section_name ?? "",
            html_content: item.html_content ?? "",
            status: item.status ?? true,
          });
        } else {
          setIntroForm(EMPTY_INTRO_FORM);
        }
      }
    } catch (err) {
      console.error(err);
    } finally {
      setIntroLoading(false);
    }
  };

  const fetchSyllabus = async () => {
    try {
      setSyllabusLoading(true);
      const response = await fetch("/api/admin/cms/kuchipudi-exams/syllabus");
      const result = await response.json();
      if (result.success) setSyllabus(result.data);
    } catch (err) {
      console.error(err);
    } finally {
      setSyllabusLoading(false);
    }
  };

  const fetchStudents = async () => {
    try {
      setStudentsLoading(true);
      const response = await fetch("/api/admin/cms/kuchipudi-exams/students");
      const result = await response.json();
      if (result.success) setStudents(result.data);
    } catch (err) {
      console.error(err);
    } finally {
      setStudentsLoading(false);
    }
  };

  useEffect(() => {
    fetchIntro();
    fetchSyllabus();
    fetchStudents();
  }, []);

  // ----- Scroll helper -----

  const scrollToRef = (ref: React.RefObject<HTMLDivElement | null>) => {
    setTimeout(() => {
      ref.current?.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 50);
  };

  // ----- Intro submit -----

  const handleIntroSubmit = async () => {
    setIntroError(null);

    if (!introForm.section_name.trim()) {
      setIntroError("Section name is required.");
      return;
    }

    try {
      setIntroSubmitting(true);

      const payload: any = { ...introForm };
      if (existingIntro) payload.id = existingIntro.id;

      const response = await fetch("/api/admin/cms/kuchipudi-exams", {
        method: existingIntro ? "PUT" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      const result = await response.json();

      if (!result.success) {
        setIntroError(result.message || "Something went wrong.");
        return;
      }

      await fetchIntro();
    } catch (err) {
      console.error(err);
      setIntroError("Something went wrong.");
    } finally {
      setIntroSubmitting(false);
    }
  };

  // ----- Syllabus CRUD -----

  const resetSyllabusForm = () => {
    setSyllabusForm(EMPTY_SYLLABUS);
    setEditingSyllabusId(null);
    setSyllabusError(null);
  };

  const handleEditSyllabus = (item: SyllabusItem) => {
    setSyllabusForm(item);
    setEditingSyllabusId(item.id);
    setSyllabusError(null);
    scrollToRef(syllabusFormRef);
  };

  const handleSyllabusPdfChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (file.type !== "application/pdf") {
      setSyllabusError("Please upload a PDF file.");
      e.target.value = "";
      return;
    }

    try {
      setSyllabusPdfUploading(true);
      setSyllabusError(null);

      const formData = new FormData();
      formData.append("file", file);

      const response = await fetch("/api/admin/cms/kuchipudi-exams/upload-image", {
        method: "POST",
        body: formData,
      });

      const result = await response.json();

      if (!result.success || !result.url) {
        setSyllabusError(result.message || "PDF upload failed.");
        return;
      }

      setSyllabusForm((prev) => ({ ...prev, pdf_url: result.url }));
    } catch (err) {
      console.error(err);
      setSyllabusError("PDF upload failed.");
    } finally {
      setSyllabusPdfUploading(false);
      e.target.value = "";
    }
  };

  const handleSyllabusSubmit = async () => {
    setSyllabusError(null);

    if (!syllabusForm.level_name.trim() || !syllabusForm.pdf_url.trim()) {
      setSyllabusError("Level name and a PDF (uploaded or linked) are required.");
      return;
    }

    try {
      setSyllabusSubmitting(true);

      const payload: any = { ...syllabusForm };
      if (editingSyllabusId) payload.id = editingSyllabusId;

      const response = await fetch("/api/admin/cms/kuchipudi-exams/syllabus", {
        method: editingSyllabusId ? "PUT" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      const result = await response.json();

      if (!result.success) {
        setSyllabusError(result.message || "Something went wrong.");
        return;
      }

      resetSyllabusForm();
      await fetchSyllabus();
    } catch (err) {
      console.error(err);
      setSyllabusError("Something went wrong.");
    } finally {
      setSyllabusSubmitting(false);
    }
  };

  const handleDeleteSyllabus = async (id: string) => {
    if (!confirm("Delete this syllabus entry? This cannot be undone.")) return;

    try {
      const response = await fetch(`/api/admin/cms/kuchipudi-exams/syllabus?id=${id}`, {
        method: "DELETE",
      });
      const result = await response.json();

      if (result.success) {
        setSyllabus((prev) => prev.filter((s) => s.id !== id));
        if (editingSyllabusId === id) resetSyllabusForm();
      }
    } catch (err) {
      console.error(err);
    }
  };

  // ----- Certified students CRUD -----

  const resetStudentForm = () => {
    setStudentForm(EMPTY_STUDENT);
    setEditingStudentId(null);
    setStudentError(null);
  };

  const handleEditStudent = (student: CertifiedStudent) => {
    setStudentForm(student);
    setEditingStudentId(student.id);
    setStudentError(null);
    scrollToRef(studentFormRef);
  };

  const handleStudentImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    try {
      setStudentImageUploading(true);
      setStudentError(null);

      const formData = new FormData();
      formData.append("file", file);

      const response = await fetch("/api/admin/cms/kuchipudi-exams/upload-image", {
        method: "POST",
        body: formData,
      });

      const result = await response.json();

      if (!result.success || !result.url) {
        setStudentError(result.message || "Image upload failed.");
        return;
      }

      setStudentForm((prev) => ({ ...prev, image: result.url }));
    } catch (err) {
      console.error(err);
      setStudentError("Image upload failed.");
    } finally {
      setStudentImageUploading(false);
      e.target.value = "";
    }
  };

  const handleStudentSubmit = async () => {
    setStudentError(null);

    if (!studentForm.level_name.trim() || !studentForm.student_name.trim()) {
      setStudentError("Level and student name are required.");
      return;
    }

    if (!studentForm.image || !studentForm.image.trim()) {
      setStudentError("Student photo is required.");
      return;
    }

    try {
      setStudentSubmitting(true);

      const payload: any = { ...studentForm };
      if (editingStudentId) payload.id = editingStudentId;

      const response = await fetch("/api/admin/cms/kuchipudi-exams/students", {
        method: editingStudentId ? "PUT" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      const result = await response.json();

      if (!result.success) {
        setStudentError(result.message || "Something went wrong.");
        return;
      }

      resetStudentForm();
      await fetchStudents();
    } catch (err) {
      console.error(err);
      setStudentError("Something went wrong.");
    } finally {
      setStudentSubmitting(false);
    }
  };

  const handleDeleteStudent = async (id: string) => {
    if (!confirm("Delete this student? This cannot be undone.")) return;

    try {
      const response = await fetch(`/api/admin/cms/kuchipudi-exams/students?id=${id}`, {
        method: "DELETE",
      });
      const result = await response.json();

      if (result.success) {
        setStudents((prev) => prev.filter((s) => s.id !== id));
        if (editingStudentId === id) resetStudentForm();
      }
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div className="admin-page-wrapper">
      <div className="admin-page-header mb-4">
        <div>
          <h2 className="admin-page-title">Kuchipudi Exams</h2>
          <p className="admin-page-subtitle">
            Manage the Kuchipudi Exams (SAMPADA) page content
          </p>
        </div>
      </div>

      {/* ---------- Intro block ---------- */}
      {introLoading ? (
        <CustomLoader />
      ) : (
        <div className="admin-form-section card mb-4">
          <div className="card-body">
            <h5 className="mb-3">Intro Section</h5>

            {introError && <div className="alert alert-danger">{introError}</div>}

            <div className="row gx-3">
              <div className="col-12 mb-3">
                <label className="form-label">
                  Section Heading <span className="text-danger">*</span>
                </label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="e.g. SAMPADA Certificate from SiliconAndhra"
                  value={introForm.section_name}
                  onChange={(e) =>
                    setIntroForm((prev) => ({ ...prev, section_name: e.target.value }))
                  }
                />
              </div>

              <div className="col-12 mb-3">
                <label className="form-label">Content</label>
                <div className="w-100 overflow-hidden">
                  <RichTextEditor
                    value={introForm.html_content}
                    onChange={(value) =>
                      setIntroForm((prev) => ({ ...prev, html_content: value }))
                    }
                    uploadEndpoint="/api/admin/cms/kuchipudi-exams/upload-image"
                    placeholder="Write the SAMPADA description, credit info, and Why SAMPADA? list here..."
                  />
                </div>
              </div>

              <div className="col-12">
                <div className="form-check form-switch mt-2">
                  <input
                    className="form-check-input"
                    type="checkbox"
                    id="introStatus"
                    checked={introForm.status}
                    onChange={(e) =>
                      setIntroForm((prev) => ({ ...prev, status: e.target.checked }))
                    }
                  />
                  <label className="form-check-label" htmlFor="introStatus">
                    {introForm.status ? "Active" : "Inactive"}
                  </label>
                </div>
              </div>
            </div>

            <div className="d-flex justify-content-end mt-4">
              <button
                className="admin-theme-btn"
                disabled={introSubmitting}
                onClick={handleIntroSubmit}
              >
                {introSubmitting ? (
                  <>
                    <span className="spinner-border spinner-border-sm me-2"></span>
                    Saving...
                  </>
                ) : existingIntro ? (
                  <>Update</>
                ) : (
                  <>Add</>
                )}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ---------- Syllabus ---------- */}
      <div className="admin-form-section card mb-4" ref={syllabusFormRef}>
        <div className="card-body">
          <h5 className="mb-3">{editingSyllabusId ? "Edit Syllabus" : "Add Syllabus"}</h5>

          {syllabusError && <div className="alert alert-danger">{syllabusError}</div>}

          <div className="row gx-3">
            <div className="col-md-4 col-12 mb-3">
              <label className="form-label">
                Level Name <span className="text-danger">*</span>
              </label>
              <input
                type="text"
                className="form-control"
                placeholder="e.g. Level 1 Syllabus - 2020"
                value={syllabusForm.level_name}
                onChange={(e) =>
                  setSyllabusForm((prev) => ({ ...prev, level_name: e.target.value }))
                }
              />
            </div>

            <div className="col-md-6 col-12 mb-3">
              <label className="form-label">
                Syllabus PDF <span className="text-danger">*</span>
              </label>

              <input
                type="file"
                accept="application/pdf"
                className="form-control mb-2"
                onChange={handleSyllabusPdfChange}
                disabled={syllabusPdfUploading}
              />
              {syllabusPdfUploading && (
                <div className="text-muted small mb-2">
                  <span className="spinner-border spinner-border-sm me-1" />
                  Uploading PDF...
                </div>
              )}

              {syllabusForm.pdf_url && (
                <div className="mt-1">
                  <a
                    href={syllabusForm.pdf_url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="small"
                  >
                    View current PDF
                  </a>
                </div>
              )}
            </div>

            <div className="col-md-2 col-12 mb-3">
              <label className="form-label">Sort Order</label>
              <input
                type="number"
                className="form-control"
                value={syllabusForm.sort_order ?? 0}
                onChange={(e) =>
                  setSyllabusForm((prev) => ({
                    ...prev,
                    sort_order: Number(e.target.value),
                  }))
                }
                min={0}
              />
            </div>

            <div className="col-12">
              <div className="form-check form-switch mt-2">
                <input
                  className="form-check-input"
                  type="checkbox"
                  id="syllabusStatus"
                  checked={syllabusForm.status ?? true}
                  onChange={(e) =>
                    setSyllabusForm((prev) => ({ ...prev, status: e.target.checked }))
                  }
                />
                <label className="form-check-label" htmlFor="syllabusStatus">
                  {syllabusForm.status ? "Active" : "Inactive"}
                </label>
              </div>
            </div>
          </div>

          <div className="d-flex justify-content-end gap-2 mt-4">
            {editingSyllabusId && (
              <button className="btn btn-outline-secondary" onClick={resetSyllabusForm}>
                Cancel
              </button>
            )}
            <button
              className="admin-theme-btn"
              disabled={syllabusSubmitting || syllabusPdfUploading}
              onClick={handleSyllabusSubmit}
            >
              {syllabusSubmitting ? (
                <>
                  <span className="spinner-border spinner-border-sm me-2"></span>
                  Saving...
                </>
              ) : editingSyllabusId ? (
                <>Update Syllabus</>
              ) : (
                <>Add Syllabus</>
              )}
            </button>
          </div>
        </div>

        <div className="card-body pt-0">
          <h5 className="mb-2">Syllabus List</h5>

          {syllabusLoading ? (
            <CustomLoader />
          ) : syllabus.length === 0 ? (
            <div className="text-muted">No syllabus entries added yet.</div>
          ) : (
            <div className="table-responsive">
              <table className="custom-table">
                <thead>
                  <tr>
                    <th>Level</th>
                    <th>PDF</th>
                    <th>Sort</th>
                    <th>Status</th>
                    <th className="text-end">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {syllabus.map((item) => (
                    <tr key={item.id}>
                      <td>{item.level_name}</td>
                      <td>
                        <a href={item.pdf_url} target="_blank" rel="noopener noreferrer">
                          View PDF
                        </a>
                      </td>
                      <td>{item.sort_order ?? 0}</td>
                      <td>
                        <span
                          className={`badge ${item.status ? "bg-success" : "bg-secondary"}`}
                        >
                          {item.status ? "Active" : "Inactive"}
                        </span>
                      </td>
                      <td className="text-end">
                        <div className="d-flex gap-1 justify-content-end">
                          <button
                            className="btn btn-warning btn-sm table-action-btn"
                            onClick={() => handleEditSyllabus(item)}
                          >
                            <i className="bi bi-pencil-square"></i>
                          </button>
                          <button
                            className="btn btn-danger btn-sm table-action-btn"
                            onClick={() => handleDeleteSyllabus(item.id)}
                          >
                            <i className="bi bi-trash"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>

      {/* ---------- Certified Students ---------- */}
      <div className="admin-form-section card" ref={studentFormRef}>
        <div className="card-body">
          <h5 className="mb-3">
            {editingStudentId ? "Edit Certified Student" : "Add Certified Student"}
          </h5>

          {studentError && <div className="alert alert-danger">{studentError}</div>}

          <div className="row gx-3">
            <div className="col-md-2 col-12 mb-3">
              <label className="form-label">
                Level <span className="text-danger">*</span>
              </label>
              <input
                type="text"
                className="form-control"
                placeholder="e.g. Level 4"
                value={studentForm.level_name}
                onChange={(e) =>
                  setStudentForm((prev) => ({ ...prev, level_name: e.target.value }))
                }
              />
            </div>

            <div className="col-md-4 col-12 mb-3">
              <label className="form-label">
                Student Name <span className="text-danger">*</span>
              </label>
              <input
                type="text"
                className="form-control"
                placeholder="e.g. Sriamsha Dubbaka"
                value={studentForm.student_name}
                onChange={(e) =>
                  setStudentForm((prev) => ({ ...prev, student_name: e.target.value }))
                }
              />
            </div>

            <div className="col-md-4 col-12 mb-3">
              <label className="form-label">Photo <span className="text-danger">*</span></label>
              <input
                type="file"
                accept="image/*"
                className="form-control"
                onChange={handleStudentImageChange}
                disabled={studentImageUploading}
              />
              {studentImageUploading && (
                <div className="text-muted small mt-1">
                  <span className="spinner-border spinner-border-sm me-1" />
                  Uploading...
                </div>
              )}
              {studentForm.image && (
                <div className="mt-2">
                  <img
                    src={studentForm.image}
                    alt="Preview"
                    style={{ width: 80, height: 100, objectFit: "cover" }}
                    className="rounded border"
                  />
                </div>
              )}
            </div>

            <div className="col-md-2 col-12 mb-3">
              <label className="form-label">Sort Order</label>
              <input
                type="number"
                className="form-control"
                value={studentForm.sort_order ?? 0}
                onChange={(e) =>
                  setStudentForm((prev) => ({
                    ...prev,
                    sort_order: Number(e.target.value),
                  }))
                }
                min={0}
              />
            </div>

            <div className="col-12">
              <div className="form-check form-switch mt-2">
                <input
                  className="form-check-input"
                  type="checkbox"
                  id="studentStatus"
                  checked={studentForm.status ?? true}
                  onChange={(e) =>
                    setStudentForm((prev) => ({ ...prev, status: e.target.checked }))
                  }
                />
                <label className="form-check-label" htmlFor="studentStatus">
                  {studentForm.status ? "Active" : "Inactive"}
                </label>
              </div>
            </div>
          </div>

          <div className="d-flex justify-content-end gap-2 mt-4">
            {editingStudentId && (
              <button className="btn btn-outline-secondary" onClick={resetStudentForm}>
                Cancel
              </button>
            )}
            <button
              className="admin-theme-btn"
              disabled={studentSubmitting || studentImageUploading}
              onClick={handleStudentSubmit}
            >
              {studentSubmitting ? (
                <>
                  <span className="spinner-border spinner-border-sm me-2"></span>
                  Saving...
                </>
              ) : editingStudentId ? (
                <>Update Student</>
              ) : (
                <>Add Student</>
              )}
            </button>
          </div>
        </div>

        <div className="card-body pt-0">
          <h5 className="mb-2">Certified Students List</h5>

          {studentsLoading ? (
            <CustomLoader />
          ) : students.length === 0 ? (
            <div className="text-muted">No certified students added yet.</div>
          ) : (
            <div className="table-responsive">
              <table className="custom-table">
                <thead>
                  <tr>
                    <th>Photo</th>
                    <th>Level</th>
                    <th>Name</th>
                    <th>Sort</th>
                    <th>Status</th>
                    <th className="text-end">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {students.map((student) => (
                    <tr key={student.id}>
                      <td>
                        {student.image ? (
                          <img
                            src={student.image}
                            alt={student.student_name}
                            style={{ width: 40, height: 50, objectFit: "cover" }}
                            className="rounded border"
                          />
                        ) : (
                          <span className="text-muted">-</span>
                        )}
                      </td>
                      <td>{student.level_name}</td>
                      <td>{student.student_name}</td>
                      <td>{student.sort_order ?? 0}</td>
                      <td>
                        <span
                          className={`badge ${student.status ? "bg-success" : "bg-secondary"
                            }`}
                        >
                          {student.status ? "Active" : "Inactive"}
                        </span>
                      </td>
                      <td className="text-end">
                        <div className="d-flex gap-1 justify-content-end">
                          <button
                            className="btn btn-warning btn-sm table-action-btn"
                            onClick={() => handleEditStudent(student)}
                          >
                            <i className="bi bi-pencil-square"></i>
                          </button>
                          <button
                            className="btn btn-danger btn-sm table-action-btn"
                            onClick={() => handleDeleteStudent(student.id)}
                          >
                            <i className="bi bi-trash"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}