"use client";

import React, { useEffect, useState } from "react";
import { AdminHeader, AlertBanner, Modal, ConfirmDeleteModal, getClientToken } from "../_components/AdminComponents";
import {
  adminGetStandardsBodies,
  adminCreateStandardsBody,
  adminUpdateStandardsBody,
  adminDeleteStandardsBody,
  adminCreateStandardDocument,
  adminUpdateStandardDocument,
  adminDeleteStandardDocument,
  AdminStandardsBody,
  AdminStandardDocument,
} from "../../../lib/adminApi";

const DOC_STATUSES = ["IS", "TS", "TR", "CDV", "WDTR", "InProgress"];

export default function AdminStandardizationPage() {
  const [bodies, setBodies] = useState<AdminStandardsBody[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [successMsg, setSuccessMsg] = useState<string | null>(null);

  // Body Modal State
  const [isBodyModalOpen, setIsBodyModalOpen] = useState(false);
  const [editingBody, setEditingBody] = useState<AdminStandardsBody | null>(null);
  const [bodyForm, setBodyForm] = useState({
    org: "",
    full_name: "",
    scope: "international" as "international" | "domestic",
    period: "",
    role: "",
    display_order: 0,
  });

  // Document Modal State
  const [isDocModalOpen, setIsDocModalOpen] = useState(false);
  const [targetBodyId, setTargetBodyId] = useState<number | null>(null);
  const [editingDoc, setEditingDoc] = useState<AdminStandardDocument | null>(null);
  const [docForm, setDocForm] = useState({
    wg: "",
    project_name: "",
    title: "",
    doc_ref: "",
    status: "IS" as "IS" | "TS" | "TR" | "CDV" | "WDTR" | "InProgress",
    published_at: "",
  });

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [deletingBodyId, setDeletingBodyId] = useState<number | null>(null);
  const [deletingDocId, setDeletingDocId] = useState<number | null>(null);

  const loadBodies = async () => {
    try {
      setIsLoading(true);
      setError(null);
      const data = await adminGetStandardsBodies();
      setBodies(data);
    } catch (err: any) {
      setError(err?.message || "Failed to load standards bodies.");
    } finally {
      setIsLoading(false);
    }
  };

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

  // Body Actions
  const handleOpenBodyCreate = () => {
    setEditingBody(null);
    setBodyForm({
      org: "",
      full_name: "",
      scope: "international",
      period: "",
      role: "",
      display_order: bodies.length + 1,
    });
    setIsBodyModalOpen(true);
  };

  const handleOpenBodyEdit = (b: AdminStandardsBody) => {
    setEditingBody(b);
    setBodyForm({
      org: b.org,
      full_name: b.full_name,
      scope: b.scope,
      period: b.period,
      role: b.role || "",
      display_order: b.display_order,
    });
    setIsBodyModalOpen(true);
  };

  const handleBodySubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const token = getClientToken();
    if (!token) return;

    const payload = {
      org: bodyForm.org.trim(),
      full_name: bodyForm.full_name.trim(),
      scope: bodyForm.scope,
      period: bodyForm.period.trim(),
      role: bodyForm.role.trim() || undefined,
      display_order: Number(bodyForm.display_order) || 0,
    };

    setIsSubmitting(true);
    setError(null);

    try {
      if (editingBody) {
        await adminUpdateStandardsBody(token, editingBody.id, payload);
        setSuccessMsg(`Standards Body "${payload.org}" updated.`);
      } else {
        await adminCreateStandardsBody(token, payload);
        setSuccessMsg(`Standards Body "${payload.org}" created.`);
      }
      setIsBodyModalOpen(false);
      await loadBodies();
    } catch (err: any) {
      setError(err?.message || "Failed to save standards body.");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleConfirmDeleteBody = async () => {
    if (!deletingBodyId) return;
    const token = getClientToken();
    if (!token) return;

    setIsSubmitting(true);
    try {
      await adminDeleteStandardsBody(token, deletingBodyId);
      setSuccessMsg("Standards body and associated documents deleted successfully (Cascade).");
      setDeletingBodyId(null);
      await loadBodies();
    } catch (err: any) {
      setError(err?.message || "Failed to delete standards body.");
    } finally {
      setIsSubmitting(false);
    }
  };

  // Doc Actions
  const handleOpenDocCreate = (bodyId: number) => {
    setTargetBodyId(bodyId);
    setEditingDoc(null);
    setDocForm({
      wg: "",
      project_name: "",
      title: "",
      doc_ref: "",
      status: "IS",
      published_at: "",
    });
    setIsDocModalOpen(true);
  };

  const handleOpenDocEdit = (d: AdminStandardDocument) => {
    setTargetBodyId(d.body_id);
    setEditingDoc(d);
    setDocForm({
      wg: d.wg,
      project_name: d.project_name,
      title: d.title,
      doc_ref: d.doc_ref,
      status: d.status,
      published_at: d.published_at || "",
    });
    setIsDocModalOpen(true);
  };

  const handleDocSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const token = getClientToken();
    if (!token || !targetBodyId) return;

    const payload = {
      wg: docForm.wg.trim(),
      project_name: docForm.project_name.trim(),
      title: docForm.title.trim(),
      doc_ref: docForm.doc_ref.trim(),
      status: docForm.status,
      published_at: docForm.published_at.trim() || undefined,
    };

    setIsSubmitting(true);
    setError(null);

    try {
      if (editingDoc) {
        await adminUpdateStandardDocument(token, editingDoc.id, payload);
        setSuccessMsg(`Document "${payload.doc_ref}" updated.`);
      } else {
        await adminCreateStandardDocument(token, targetBodyId, payload);
        setSuccessMsg(`Document "${payload.doc_ref}" added.`);
      }
      setIsDocModalOpen(false);
      await loadBodies();
    } catch (err: any) {
      setError(err?.message || "Failed to save standard document.");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleConfirmDeleteDoc = async () => {
    if (!deletingDocId) return;
    const token = getClientToken();
    if (!token) return;

    setIsSubmitting(true);
    try {
      await adminDeleteStandardDocument(token, deletingDocId);
      setSuccessMsg("Standard document deleted successfully.");
      setDeletingDocId(null);
      await loadBodies();
    } catch (err: any) {
      setError(err?.message || "Failed to delete document.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div>
      <AdminHeader
        title="Standardization Management"
        description="Manage international and domestic standardization organizations, working groups, and published specifications."
        action={
          <button
            onClick={handleOpenBodyCreate}
            className="px-4 py-2 text-sm rounded bg-cobalt hover:bg-cobalt/90 text-white font-medium shadow-sm transition-colors"
          >
            + Add Standards Body
          </button>
        }
      />

      {error && <AlertBanner type="error" message={error} onClose={() => setError(null)} />}
      {successMsg && <AlertBanner type="success" message={successMsg} onClose={() => setSuccessMsg(null)} />}

      {isLoading ? (
        <div className="py-12 text-center text-sm text-ink/70">Loading standardization records...</div>
      ) : bodies.length === 0 ? (
        <div className="bg-paper border border-line rounded-lg p-12 text-center text-ink/60">
          No standards bodies recorded. Click &quot;+ Add Standards Body&quot; to get started.
        </div>
      ) : (
        <div className="space-y-6">
          {bodies.map((body) => {
            const allDocs = body.projects?.flatMap((p) => p.documents) || [];

            return (
              <div key={body.id} className="bg-paper border border-line rounded-lg overflow-hidden shadow-sm">
                {/* Body Header Bar */}
                <div className="px-6 py-4 bg-ivory border-b border-line flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                  <div>
                    <div className="flex items-center gap-3">
                      <span className="font-bold text-base text-ink">{body.org}</span>
                      <span className="text-xs font-mono text-ink/60">({body.full_name})</span>
                      <span
                        className={`text-[10px] px-2 py-0.5 rounded font-bold uppercase ${
                          body.scope === "international"
                            ? "bg-blue-500/10 text-blue-600 dark:text-blue-400"
                            : "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
                        }`}
                      >
                        {body.scope}
                      </span>
                    </div>
                    <div className="text-xs text-ink/60 mt-1">
                      Period: {body.period} {body.role && `· Role: ${body.role}`} · {allDocs.length} Total Documents
                    </div>
                  </div>

                  <div className="flex items-center gap-2">
                    <button
                      onClick={() => handleOpenDocCreate(body.id)}
                      className="px-2.5 py-1 text-xs rounded bg-cobalt text-white font-medium hover:bg-cobalt/90"
                    >
                      + Add Document
                    </button>
                    <button
                      onClick={() => handleOpenBodyEdit(body)}
                      className="px-2.5 py-1 text-xs rounded border border-line hover:bg-ivory font-medium text-ink"
                    >
                      Edit
                    </button>
                    <button
                      onClick={() => setDeletingBodyId(body.id)}
                      className="px-2.5 py-1 text-xs rounded bg-red-50 hover:bg-red-100 text-red-600 border border-red-200 dark:bg-red-950/30 dark:hover:bg-red-950/60 dark:text-red-400 dark:border-red-900 font-medium"
                    >
                      Delete Body
                    </button>
                  </div>
                </div>

                {/* Documents Table */}
                <table className="w-full text-left text-sm border-collapse">
                  <thead>
                    <tr className="border-b border-line text-xs font-semibold text-ink/60 bg-paper">
                      <th className="p-3 w-28">Ref / Status</th>
                      <th className="p-3">Title & WG</th>
                      <th className="p-3">Project Group</th>
                      <th className="p-3 w-24">Date</th>
                      <th className="p-3 text-right">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-line">
                    {allDocs.length === 0 ? (
                      <tr>
                        <td colSpan={5} className="p-4 text-center text-xs text-ink/50">
                          No documents added for this standards body.
                        </td>
                      </tr>
                    ) : (
                      allDocs.map((d) => (
                        <tr key={d.id} className="hover:bg-ivory/40 text-xs">
                          <td className="p-3">
                            <div className="font-mono font-semibold text-cobalt">{d.doc_ref}</div>
                            <span className="inline-block mt-0.5 px-1.5 py-0.2 text-[10px] rounded bg-ink/5 text-ink/70 font-bold">
                              {d.status}
                            </span>
                          </td>
                          <td className="p-3">
                            <div className="font-medium text-ink">{d.title}</div>
                            <div className="text-[11px] text-ink/50 mt-0.5">{d.wg}</div>
                          </td>
                          <td className="p-3 text-ink/70">{d.project_name}</td>
                          <td className="p-3 font-mono text-ink/60">{d.published_at || "—"}</td>
                          <td className="p-3 text-right space-x-2">
                            <button
                              onClick={() => handleOpenDocEdit(d)}
                              className="px-2 py-0.5 rounded border border-line hover:bg-ivory font-medium text-ink"
                            >
                              Edit
                            </button>
                            <button
                              onClick={() => setDeletingDocId(d.id)}
                              className="px-2 py-0.5 rounded text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30 font-medium"
                            >
                              Delete
                            </button>
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            );
          })}
        </div>
      )}

      {/* Body Modal */}
      <Modal
        isOpen={isBodyModalOpen}
        title={editingBody ? "Edit Standards Body" : "Create Standards Body"}
        onClose={() => setIsBodyModalOpen(false)}
      >
        <form onSubmit={handleBodySubmit} className="space-y-4">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-semibold text-ink mb-1">Organization Acronym *</label>
              <input
                type="text"
                value={bodyForm.org}
                onChange={(e) => setBodyForm({ ...bodyForm, org: e.target.value })}
                placeholder="e.g. ISO/IEC"
                required
                className="w-full px-3 py-2 text-sm border border-line rounded bg-ivory text-ink focus:outline-none focus:ring-1 focus:ring-cobalt"
              />
            </div>
            <div>
              <label className="block text-xs font-semibold text-ink mb-1">Scope *</label>
              <select
                value={bodyForm.scope}
                onChange={(e) => setBodyForm({ ...bodyForm, scope: e.target.value as "international" | "domestic" })}
                className="w-full px-3 py-2 text-sm border border-line rounded bg-ivory text-ink focus:outline-none focus:ring-1 focus:ring-cobalt"
              >
                <option value="international">International</option>
                <option value="domestic">Domestic</option>
              </select>
            </div>
          </div>

          <div>
            <label className="block text-xs font-semibold text-ink mb-1">Full Organization Name *</label>
            <input
              type="text"
              value={bodyForm.full_name}
              onChange={(e) => setBodyForm({ ...bodyForm, full_name: e.target.value })}
              placeholder="e.g. International Organization for Standardization"
              required
              className="w-full px-3 py-2 text-sm border border-line rounded bg-ivory text-ink focus:outline-none focus:ring-1 focus:ring-cobalt"
            />
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-semibold text-ink mb-1">Period *</label>
              <input
                type="text"
                value={bodyForm.period}
                onChange={(e) => setBodyForm({ ...bodyForm, period: e.target.value })}
                placeholder="e.g. 2020 - Present"
                required
                className="w-full px-3 py-2 text-sm border border-line rounded bg-ivory text-ink focus:outline-none focus:ring-1 focus:ring-cobalt"
              />
            </div>
            <div>
              <label className="block text-xs font-semibold text-ink mb-1">Role in Committee</label>
              <input
                type="text"
                value={bodyForm.role}
                onChange={(e) => setBodyForm({ ...bodyForm, role: e.target.value })}
                placeholder="e.g. Project Leader"
                className="w-full px-3 py-2 text-sm border border-line rounded bg-ivory text-ink focus:outline-none focus:ring-1 focus:ring-cobalt"
              />
            </div>
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-line">
            <button
              type="button"
              onClick={() => setIsBodyModalOpen(false)}
              className="px-4 py-2 text-sm rounded border border-line hover:bg-ivory font-medium text-ink"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
              className="px-4 py-2 text-sm rounded bg-cobalt hover:bg-cobalt/90 text-white font-medium disabled:opacity-50"
            >
              {isSubmitting ? "Saving..." : editingBody ? "Save Changes" : "Create Body"}
            </button>
          </div>
        </form>
      </Modal>

      {/* Doc Modal */}
      <Modal
        isOpen={isDocModalOpen}
        title={editingDoc ? "Edit Standard Document" : "Add Standard Document"}
        onClose={() => setIsDocModalOpen(false)}
      >
        <form onSubmit={handleDocSubmit} className="space-y-4">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-semibold text-ink mb-1">Document Reference *</label>
              <input
                type="text"
                value={docForm.doc_ref}
                onChange={(e) => setDocForm({ ...docForm, doc_ref: e.target.value })}
                placeholder="e.g. ISO/IEC 63246-1"
                required
                className="w-full px-3 py-2 text-sm border border-line rounded bg-ivory text-ink focus:outline-none focus:ring-1 focus:ring-cobalt"
              />
            </div>
            <div>
              <label className="block text-xs font-semibold text-ink mb-1">Status *</label>
              <select
                value={docForm.status}
                onChange={(e) =>
                  setDocForm({
                    ...docForm,
                    status: e.target.value as "IS" | "TS" | "TR" | "CDV" | "WDTR" | "InProgress",
                  })
                }
                className="w-full px-3 py-2 text-sm border border-line rounded bg-ivory text-ink focus:outline-none focus:ring-1 focus:ring-cobalt"
              >
                {DOC_STATUSES.map((st) => (
                  <option key={st} value={st}>
                    {st}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div>
            <label className="block text-xs font-semibold text-ink mb-1">Document Title *</label>
            <input
              type="text"
              value={docForm.title}
              onChange={(e) => setDocForm({ ...docForm, title: e.target.value })}
              placeholder="e.g. Part 1: Architecture and functional model"
              required
              className="w-full px-3 py-2 text-sm border border-line rounded bg-ivory text-ink focus:outline-none focus:ring-1 focus:ring-cobalt"
            />
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-xs font-semibold text-ink mb-1">Working Group (WG) *</label>
              <input
                type="text"
                value={docForm.wg}
                onChange={(e) => setDocForm({ ...docForm, wg: e.target.value })}
                placeholder="e.g. ISO/IEC JTC 1/SC 29/WG 11"
                required
                className="w-full px-3 py-2 text-sm border border-line rounded bg-ivory text-ink focus:outline-none focus:ring-1 focus:ring-cobalt"
              />
            </div>
            <div>
              <label className="block text-xs font-semibold text-ink mb-1">Project Name *</label>
              <input
                type="text"
                value={docForm.project_name}
                onChange={(e) => setDocForm({ ...docForm, project_name: e.target.value })}
                placeholder="e.g. CCIS (Camera Communications)"
                required
                className="w-full px-3 py-2 text-sm border border-line rounded bg-ivory text-ink focus:outline-none focus:ring-1 focus:ring-cobalt"
              />
            </div>
          </div>

          <div>
            <label className="block text-xs font-semibold text-ink mb-1">Published Date (ISO 8601 optional)</label>
            <input
              type="text"
              value={docForm.published_at}
              onChange={(e) => setDocForm({ ...docForm, published_at: e.target.value })}
              placeholder="e.g. 2023-08"
              className="w-full px-3 py-2 text-sm border border-line rounded bg-ivory text-ink focus:outline-none focus:ring-1 focus:ring-cobalt"
            />
          </div>

          <div className="flex justify-end gap-3 pt-4 border-t border-line">
            <button
              type="button"
              onClick={() => setIsDocModalOpen(false)}
              className="px-4 py-2 text-sm rounded border border-line hover:bg-ivory font-medium text-ink"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
              className="px-4 py-2 text-sm rounded bg-cobalt hover:bg-cobalt/90 text-white font-medium disabled:opacity-50"
            >
              {isSubmitting ? "Saving..." : editingDoc ? "Save Changes" : "Add Document"}
            </button>
          </div>
        </form>
      </Modal>

      <ConfirmDeleteModal
        isOpen={deletingBodyId !== null}
        onClose={() => setDeletingBodyId(null)}
        onConfirm={handleConfirmDeleteBody}
        isSubmitting={isSubmitting}
        title="Delete Standards Body (Cascade Warning)"
        description="Are you sure you want to delete this standards body? All standard documents under this body will also be permanently deleted (Database Cascade)."
      />

      <ConfirmDeleteModal
        isOpen={deletingDocId !== null}
        onClose={() => setDeletingDocId(null)}
        onConfirm={handleConfirmDeleteDoc}
        isSubmitting={isSubmitting}
        title="Delete Standard Document"
        description="Are you sure you want to delete this standard document?"
      />
    </div>
  );
}