"use client";

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

interface Academy {
  id: string;
  page_id: string;
  remote_classes_heading?: string | null;
  remote_classes_content?: string | null;
  remote_classes_image_1?: string | null;
  remote_classes_image_2?: string | null;
  syllabus_heading?: string | null;
  syllabus_content?: string | null;
  syllabus_image?: string | null;
  syllabus_items?: string | null;
  teaching_heading?: string | null;
  teaching_content?: string | null;
  teaching_image?: string | null;
  status?: boolean | null;
}

interface FormState {
  remote_classes_heading: string;
  remote_classes_content: string;
  remote_classes_image_1_file: File | null;
  remote_classes_image_2_file: File | null;
  syllabus_heading: string;
  syllabus_content: string;
  syllabus_image_file: File | null;
  syllabus_items: string;
  teaching_heading: string;
  teaching_content: string;
  teaching_image_file: File | null;
  status: boolean;
}

const EMPTY_FORM: FormState = {
  remote_classes_heading: "Remote Classes",
  remote_classes_content: "",
  remote_classes_image_1_file: null,
  remote_classes_image_2_file: null,
  syllabus_heading: "Kuchipudi Syllabus",
  syllabus_content: "",
  syllabus_image_file: null,
  syllabus_items: "",
  teaching_heading: "Teaching Techniques",
  teaching_content: "",
  teaching_image_file: null,
  status: true,
};

export default function AcademyPage() {
  const [existing, setExisting] = useState<Academy | null>(null);
  const [loading, setLoading] = useState(true);

  const [form, setForm] = useState<FormState>(EMPTY_FORM);

  const [previews, setPreviews] = useState<{
    remote1: string | null;
    remote2: string | null;
    syllabus: string | null;
    teaching: string | null;
  }>({ remote1: null, remote2: null, syllabus: null, teaching: null });

  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchAcademy = async () => {
    try {
      setLoading(true);

      const response = await fetch("/api/admin/cms/academy");
      const result = await response.json();

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

        setExisting(item);

        if (item) {
          setForm({
            remote_classes_heading: item.remote_classes_heading ?? "Remote Classes",
            remote_classes_content: item.remote_classes_content ?? "",
            remote_classes_image_1_file: null,
            remote_classes_image_2_file: null,
            syllabus_heading: item.syllabus_heading ?? "Kuchipudi Syllabus",
            syllabus_content: item.syllabus_content ?? "",
            syllabus_image_file: null,
            syllabus_items: item.syllabus_items ?? "",
            teaching_heading: item.teaching_heading ?? "Teaching Techniques",
            teaching_content: item.teaching_content ?? "",
            teaching_image_file: null,
            status: item.status ?? true,
          });

          setPreviews({
            remote1: item.remote_classes_image_1 ?? null,
            remote2: item.remote_classes_image_2 ?? null,
            syllabus: item.syllabus_image ?? null,
            teaching: item.teaching_image ?? null,
          });
        } else {
          setForm(EMPTY_FORM);
          setPreviews({ remote1: null, remote2: null, syllabus: null, teaching: null });
        }
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchAcademy();
  }, []);

  const handleImageChange = (
    field:
      | "remote_classes_image_1_file"
      | "remote_classes_image_2_file"
      | "syllabus_image_file"
      | "teaching_image_file",
    previewKey: "remote1" | "remote2" | "syllabus" | "teaching",
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const file = e.target.files?.[0] || null;

    setForm((prev) => ({ ...prev, [field]: file }));

    if (file) {
      setPreviews((prev) => ({
        ...prev,
        [previewKey]: URL.createObjectURL(file),
      }));
    }
  };

  const handleSubmit = async () => {
    setError(null);

    try {
      setSubmitting(true);

      const payload = new FormData();

      if (existing) payload.append("id", existing.id);

      payload.append("remote_classes_heading", form.remote_classes_heading);
      payload.append("remote_classes_content", form.remote_classes_content);
      payload.append("syllabus_heading", form.syllabus_heading);
      payload.append("syllabus_content", form.syllabus_content);
      payload.append("syllabus_items", form.syllabus_items);
      payload.append("teaching_heading", form.teaching_heading);
      payload.append("teaching_content", form.teaching_content);
      payload.append("status", String(form.status));

      if (form.remote_classes_image_1_file)
        payload.append(
          "remote_classes_image_1",
          form.remote_classes_image_1_file
        );
      if (form.remote_classes_image_2_file)
        payload.append(
          "remote_classes_image_2",
          form.remote_classes_image_2_file
        );
      if (form.syllabus_image_file)
        payload.append("syllabus_image", form.syllabus_image_file);
      if (form.teaching_image_file)
        payload.append("teaching_image", form.teaching_image_file);

      const response = await fetch("/api/admin/cms/academy", {
        method: existing ? "PUT" : "POST",
        body: payload,
      });

      const result = await response.json();

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

      await fetchAcademy();
    } catch (err) {
      console.error(err);
      setError("Something went wrong.");
    } finally {
      setSubmitting(false);
    }
  };

  if (loading) {
    return <CustomLoader />;
  }

  return (
    <div className="admin-page-wrapper">
      <div className="admin-page-header mb-4">
        <div>
          <h2 className="admin-page-title">The Academy Page</h2>
          <p className="admin-page-subtitle">
            Manage Remote Classes, Syllabus &amp; Teaching Techniques sections
          </p>
        </div>
      </div>

      <div className="admin-form-section card">
        <div className="card-body">
          {error && <div className="alert alert-danger">{error}</div>}

          {/* ---------------- Remote Classes ---------------- */}
          <h5 className="fw-semibold mb-3">
            <i className="bi bi-camera-video me-2 text-primary" />
            Remote Classes Section
          </h5>

          <div className="row gx-3 mb-4">
            <div className="col-12 mb-3">
              <label className="form-label">Heading</label>
              <input
                type="text"
                className="form-control"
                value={form.remote_classes_heading}
                onChange={(e) =>
                  setForm((prev) => ({
                    ...prev,
                    remote_classes_heading: e.target.value,
                  }))
                }
              />
            </div>

            <div className="col-12 mb-3">
              <label className="form-label">Content</label>
              <div className="w-100 overflow-hidden">
                <RichTextEditor
                  value={form.remote_classes_content}
                  onChange={(value) =>
                    setForm((prev) => ({
                      ...prev,
                      remote_classes_content: value,
                    }))
                  }
                  uploadEndpoint="/api/admin/cms/academy/upload-image"
                  placeholder="Write the remote classes content here..."
                />
              </div>
            </div>

            <div className="col-md-6 mb-3">
              <label className="form-label">Image 1</label>
              <input
                type="file"
                accept="image/*"
                className="form-control"
                onChange={(e) =>
                  handleImageChange(
                    "remote_classes_image_1_file",
                    "remote1",
                    e
                  )
                }
              />
              {previews.remote1 && (
                <div className="mt-2">
                  <Image
                    src={previews.remote1}
                    alt="Remote Classes Image 1"
                    width={160}
                    height={120}
                    className="rounded border"
                    style={{ objectFit: "cover" }}
                  />
                </div>
              )}
            </div>

            <div className="col-md-6 mb-3">
              <label className="form-label">Image 2</label>
              <input
                type="file"
                accept="image/*"
                className="form-control"
                onChange={(e) =>
                  handleImageChange(
                    "remote_classes_image_2_file",
                    "remote2",
                    e
                  )
                }
              />
              {previews.remote2 && (
                <div className="mt-2">
                  <Image
                    src={previews.remote2}
                    alt="Remote Classes Image 2"
                    width={160}
                    height={120}
                    className="rounded border"
                    style={{ objectFit: "cover" }}
                  />
                </div>
              )}
            </div>
          </div>

          <hr />

          {/* ---------------- Syllabus ---------------- */}
          <h5 className="fw-semibold mb-3 mt-4">
            <i className="bi bi-journal-text me-2 text-primary" />
            Kuchipudi Syllabus Section
          </h5>

          <div className="row gx-3 mb-4">
            <div className="col-12 mb-3">
              <label className="form-label">Heading</label>
              <input
                type="text"
                className="form-control"
                value={form.syllabus_heading}
                onChange={(e) =>
                  setForm((prev) => ({
                    ...prev,
                    syllabus_heading: e.target.value,
                  }))
                }
              />
            </div>

            <div className="col-12 mb-3">
              <label className="form-label">Content</label>
              <div className="w-100 overflow-hidden">
                <RichTextEditor
                  value={form.syllabus_content}
                  onChange={(value) =>
                    setForm((prev) => ({ ...prev, syllabus_content: value }))
                  }
                  uploadEndpoint="/api/admin/cms/academy/upload-image"
                  placeholder="Write the syllabus content here (First Half Steps, Second Half Steps, etc.)..."
                />
              </div>
            </div>

            <div className="col-12 mb-3">
              <label className="form-label">
                Syllabus Item List (one per line — Kouthukam, Pooja, Jatiswaram...)
              </label>
              <textarea
                rows={6}
                className="form-control"
                placeholder={"Kouthukam\nPooja\nJatiswaram\nThillana\n..."}
                value={form.syllabus_items}
                onChange={(e) =>
                  setForm((prev) => ({
                    ...prev,
                    syllabus_items: e.target.value,
                  }))
                }
              />
            </div>

            <div className="col-md-6 mb-3">
              <label className="form-label">Image</label>
              <input
                type="file"
                accept="image/*"
                className="form-control"
                onChange={(e) =>
                  handleImageChange("syllabus_image_file", "syllabus", e)
                }
              />
              {previews.syllabus && (
                <div className="mt-2">
                  <Image
                    src={previews.syllabus}
                    alt="Syllabus Image"
                    width={160}
                    height={120}
                    className="rounded border"
                    style={{ objectFit: "cover" }}
                  />
                </div>
              )}
            </div>
          </div>

          <hr />

          {/* ---------------- Teaching Techniques ---------------- */}
          <h5 className="fw-semibold mb-3 mt-4">
            <i className="bi bi-mortarboard me-2 text-primary" />
            Teaching Techniques Section
          </h5>

          <div className="row gx-3 mb-4">
            <div className="col-12 mb-3">
              <label className="form-label">Heading</label>
              <input
                type="text"
                className="form-control"
                value={form.teaching_heading}
                onChange={(e) =>
                  setForm((prev) => ({
                    ...prev,
                    teaching_heading: e.target.value,
                  }))
                }
              />
            </div>

            <div className="col-12 mb-3">
              <label className="form-label">Content</label>
              <div className="w-100 overflow-hidden">
                <RichTextEditor
                  value={form.teaching_content}
                  onChange={(value) =>
                    setForm((prev) => ({ ...prev, teaching_content: value }))
                  }
                  uploadEndpoint="/api/admin/cms/academy/upload-image"
                  placeholder="Write the teaching techniques content here (Sama Dana Bheda Dandopaya)..."
                />
              </div>
            </div>

            <div className="col-md-6 mb-3">
              <label className="form-label">Image</label>
              <input
                type="file"
                accept="image/*"
                className="form-control"
                onChange={(e) =>
                  handleImageChange("teaching_image_file", "teaching", e)
                }
              />
              {previews.teaching && (
                <div className="mt-2">
                  <Image
                    src={previews.teaching}
                    alt="Teaching Techniques Image"
                    width={160}
                    height={120}
                    className="rounded border"
                    style={{ objectFit: "cover" }}
                  />
                </div>
              )}
            </div>
          </div>

          <hr />

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

          <div className="d-flex justify-content-end mt-4">
            <button
              className="admin-theme-btn"
              disabled={submitting}
              onClick={handleSubmit}
            >
              {submitting ? (
                <>
                  <span className="spinner-border spinner-border-sm me-2" />
                  Saving...
                </>
              ) : existing ? (
                <>
                  <i className="bi bi-check-circle me-1" />
                  Update
                </>
              ) : (
                <>
                  <i className="bi bi-plus-circle me-1" /> Add
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}