"use client";

import { useEffect, useState } from "react";
import { useLang } from "@/context/LanguageContext";
import { Alert, Button, PageHeader } from "@/components/ui";
import { api, useApi } from "@/lib/client";
import { IconUpload } from "@/components/icons";

const FIELDS = [
  { key: "imageMaxKb" as const, min: 50, max: 20480 },
  { key: "imageMaxDim" as const, min: 128, max: 4096 },
  { key: "docMaxKb" as const, min: 50, max: 20480 },
];

export default function CentralUploadPolicyPage() {
  const { t } = useLang();
  const p = t.central.uploadPolicyPage;
  const { data, reload } = useApi<{
    imageMaxKb: number;
    imageMaxDim: number;
    docMaxKb: number;
  }>("/api/central/upload-policy");

  const [form, setForm] = useState<{ imageMaxKb: string; imageMaxDim: string; docMaxKb: string }>({
    imageMaxKb: "",
    imageMaxDim: "",
    docMaxKb: "",
  });
  const [loaded, setLoaded] = useState(false);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

  useEffect(() => {
    if (data && !loaded) {
      setForm({
        imageMaxKb: String(data.imageMaxKb),
        imageMaxDim: String(data.imageMaxDim),
        docMaxKb: String(data.docMaxKb),
      });
      setLoaded(true);
    }
  }, [data, loaded]);

  /** Save the upload policy applied to every institution's uploads. */
  async function save() {
    const values = FIELDS.map((f) => Number(form[f.key]));
    if (!values.every((v) => Number.isFinite(v) && v > 0)) {
      setMessage({ type: "error", text: p.invalid });
      return;
    }
    setSaving(true);
    setMessage(null);
    try {
      await api("/api/central/upload-policy", {
        method: "PUT",
        body: JSON.stringify({
          imageMaxKb: values[0],
          imageMaxDim: values[1],
          docMaxKb: values[2],
        }),
      });
      setMessage({ type: "success", text: p.saved });
      reload();
    } catch (err) {
      setMessage({ type: "error", text: err instanceof Error ? err.message : t.common.tryAgain });
    } finally {
      setSaving(false);
    }
  }

  const fields = [
    {
      key: "imageMaxKb" as const,
      label: p.imageSizeLabel,
      hint: p.imageSizeHint,
      min: FIELDS[0].min,
      max: FIELDS[0].max,
    },
    {
      key: "imageMaxDim" as const,
      label: p.imageDimLabel,
      hint: p.imageDimHint,
      min: FIELDS[1].min,
      max: FIELDS[1].max,
    },
    {
      key: "docMaxKb" as const,
      label: p.docSizeLabel,
      hint: p.docSizeHint,
      min: FIELDS[2].min,
      max: FIELDS[2].max,
    },
  ];

  return (
    <div>
      <PageHeader title={p.title} subtitle={p.subtitle} />

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

      <div className="card p-4 mb-4">
        <div className="d-flex align-items-center gap-2 mb-3">
          <span className="ems-stat-icon teal" style={{ width: 40, height: 40, borderRadius: 10 }}>
            <IconUpload className="svg-18" />
          </span>
          <div>
            <h6 className="mb-0 f-w-800">{p.cardTitle}</h6>
            <p className="mb-0 ems-fs-12 text-muted">{p.cardNote}</p>
          </div>
        </div>

        <div className="row g-3">
          {fields.map((f) => (
            <div className="col-md-4" key={f.key}>
              <label className="ems-fs-12 f-w-700 mb-1 d-block">{f.label}</label>
              <input
                type="number"
                min={f.min}
                max={f.max}
                className="form-control"
                value={form[f.key]}
                onChange={(e) => setForm({ ...form, [f.key]: e.target.value })}
              />
              <p className="ems-fs-11 text-muted mb-0 mt-1">{f.hint}</p>
            </div>
          ))}
        </div>

        <div className="d-flex justify-content-end gap-2 pt-3">
          <Button variant="primary" loading={saving} onClick={save}>
            {t.common.save}
          </Button>
        </div>
      </div>

      <div className="card p-4">
        <h6 className="f-w-800 ems-fs-13 mb-2">{p.appliesTitle}</h6>
        <ul className="mb-0 ps-3 ems-fs-13 text-muted">
          <li>{p.appliesStudents}</li>
          <li>{p.appliesIdentity}</li>
          <li>{p.appliesLogo}</li>
          <li>{p.appliesSupport}</li>
          <li>{p.appliesMembers}</li>
        </ul>
      </div>
    </div>
  );
}