"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";

type Program = {
  id: string;
  nameSr: string;
  nameEn: string | null;
  degreeLevel: string;
  facultyName: string | null;
  durationYears: number | null;
  ects: number | null;
  studyMode: string | null;
  language: string;
  tuitionRsd: number | null;
  tuitionInternational: number | null;
  currency: string;
  description: string | null;
  requirements: string | null;
  applicationUrl: string | null;
  status: string;
  deadlines: Array<{
    id: string;
    label: string;
    academicYear: string;
    applicationEnd: string;
    seats: number | null;
  }>;
};
type Inquiry = {
  id: string;
  type: string;
  status: string;
  fullName: string;
  email: string;
  phone: string | null;
  message: string;
  createdAt: string;
  program: { nameSr: string } | null;
};
type Partner = {
  id: string;
  name: string;
  partnershipType: string | null;
  website: string | null;
  isPublished: boolean;
};
type Internship = {
  id: string;
  title: string;
  summary: string | null;
  status: string;
  applicationDeadline: string | null;
  employerPartnerId: string | null;
  employerPartner: { name: string } | null;
};
type PortalData = {
  id: string;
  slug: string;
  shortName: string | null;
  institutionType: string;
  ownership: string | null;
  summary: string | null;
  heroTitle: string | null;
  accreditationBody: string | null;
  accreditationValidTo: string | null;
  foundingYear: number | null;
  rectorName: string | null;
  studentCount: number | null;
  facultyCount: number | null;
  admissionsEmail: string | null;
  admissionsPhone: string | null;
  admissionsWebsite: string | null;
  enrollmentOpen: boolean;
  internationalStudents: boolean;
  isPublished: boolean;
  company: { name: string };
  programs: Program[];
  inquiries: Inquiry[];
  employerPartners: Partner[];
  internships: Internship[];
};

const input =
  "mt-2 w-full rounded-xl border border-[#ded8e8] bg-white px-3 py-2.5 text-sm text-[#171126] outline-none focus:border-[#705bc4]";
const label = "text-sm font-bold text-[#332b3e]";
const inquiryLabels: Record<string, string> = {
  ENROLLMENT: "Upis",
  PROGRAM: "Program",
  TUITION: "Školarina",
  SCHOLARSHIP: "Stipendija",
  DOCUMENTS: "Dokumentacija",
  INTERNATIONAL: "Međunarodni studenti",
  INTERNSHIP: "Praksa",
  PARTNERSHIP: "Partnerstvo",
  OTHER: "Drugo",
};
const tierLabels: Record<string, string> = {
  CONFIRMED: "potvrđen",
  PARTNER: "partnerski",
  STRATEGIC: "strateški",
};
const degreeLabels: Record<string, string> = {
  SHORT_CYCLE: "Kratki program",
  BACHELOR: "Osnovne studije",
  MASTER: "Master",
  DOCTORATE: "Doktorske studije",
  SPECIALIST: "Specijalističke studije",
  PROFESSIONAL: "Strukovne studije",
  OTHER: "Drugo",
};
const programStatusLabels: Record<string, string> = {
  DRAFT: "Nacrt",
  PUBLISHED: "Objavljeno",
  ARCHIVED: "Arhivirano",
};

export function UniversityPortalManager({
  data,
  entitlements,
  tier,
  validTo,
}: {
  data: PortalData;
  entitlements: string[];
  tier: string;
  validTo: string | null;
}) {
  const router = useRouter();
  const [tab, setTab] = useState("profil");
  const [notice, setNotice] = useState<{ ok: boolean; text: string } | null>(
    null
  );
  const [editingProgram, setEditingProgram] = useState<Program | null>(null);
  const canCatalog = entitlements.includes("PROGRAM_CATALOG");
  const canInquiries = entitlements.includes("STUDENT_INQUIRIES");
  const canPartners = entitlements.includes("EMPLOYER_PARTNERS");
  const canInternships = entitlements.includes("INTERNSHIPS");
  async function mutate(
    method: "POST" | "PATCH" | "DELETE",
    resource: string,
    payload?: unknown,
    id?: string
  ) {
    setNotice(null);
    const url =
      method === "DELETE"
        ? `/api/portal/university?resource=${resource}&id=${id}`
        : "/api/portal/university";
    const response = await fetch(url, {
      method,
      headers:
        method === "DELETE"
          ? undefined
          : { "content-type": "application/json" },
      body:
        method === "DELETE"
          ? undefined
          : JSON.stringify({ resource, id, data: payload }),
    });
    const result = (await response.json()) as { error?: string };
    if (!response.ok) throw new Error(result.error || "Promena nije sačuvana.");
    setNotice({ ok: true, text: "Sačuvano." });
    router.refresh();
  }
  async function run(action: () => Promise<void>) {
    try {
      await action();
    } catch (error) {
      setNotice({
        ok: false,
        text: error instanceof Error ? error.message : "Promena nije sačuvana.",
      });
    }
  }
  function value(form: FormData, key: string) {
    return String(form.get(key) || "").trim();
  }
  function numberValue(form: FormData, key: string) {
    const raw = value(form, key);
    return raw ? Number(raw) : null;
  }
  const tabs = [
    { id: "profil", name: "Profil" },
    ...(canCatalog
      ? [{ id: "programi", name: `Programi (${data.programs.length})` }]
      : []),
    ...(canInquiries
      ? [
          {
            id: "upiti",
            name: `Studentski upiti (${
              data.inquiries.filter((i) => i.status === "NEW").length
            })`,
          },
        ]
      : []),
    ...(canPartners || canInternships
      ? [{ id: "karijera", name: "Prakse i partneri" }]
      : []),
  ];

  return (
    <div>
      <div className="mb-6 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-[#ded8e8] bg-white p-5">
        <div>
          <p className="text-xs font-extrabold uppercase tracking-[0.14em] text-[#705bc4]">
            Aktivan {tierLabels[tier] || "institucionalni"} nivo
          </p>
          <p className="mt-1 text-sm text-[#6b6475]">
            {validTo
              ? `Prava važe do ${new Date(validTo).toLocaleDateString("sr-RS")}`
              : "Institucionalna prava su aktivna."}
          </p>
        </div>
        <div className="flex gap-2">
          <Link
            href={`/univerziteti/${data.slug}`}
            target="_blank"
            className="rounded-xl border border-[#ded8e8] px-4 py-2 text-sm font-bold text-[#4b3b82]"
          >
            Javni profil ↗
          </Link>
          <Link
            href="/portal/univerzitet/paketi"
            className="rounded-xl bg-[#705bc4] px-4 py-2 text-sm font-extrabold text-white"
          >
            Paket i obnova
          </Link>
        </div>
      </div>
      <div className="mb-5 flex gap-2 overflow-x-auto rounded-2xl border border-[#e5e0eb] bg-white p-2">
        {tabs.map((item) => (
          <button
            key={item.id}
            onClick={() => setTab(item.id)}
            className={`whitespace-nowrap rounded-xl px-4 py-2.5 text-sm font-extrabold ${
              tab === item.id
                ? "bg-[#171126] text-white"
                : "text-[#6b6475] hover:bg-[#f5f2fb]"
            }`}
          >
            {item.name}
          </button>
        ))}
      </div>
      {notice ? (
        <p
          role="status"
          className={`mb-5 rounded-xl p-4 text-sm font-bold ${
            notice.ok
              ? "bg-emerald-50 text-emerald-800"
              : "bg-red-50 text-red-700"
          }`}
        >
          {notice.text}
        </p>
      ) : null}

      {tab === "profil" ? (
        <form
          className="partner-app-panel grid gap-5 md:grid-cols-2"
          onSubmit={(event) => {
            event.preventDefault();
            const formElement = event.currentTarget;
            const form = new FormData(formElement);
            void run(async () =>
              mutate("PATCH", "profile", {
                shortName: value(form, "shortName"),
                institutionType: value(form, "institutionType"),
                ownership: value(form, "ownership"),
                heroTitle: value(form, "heroTitle"),
                summary: value(form, "summary"),
                accreditationBody: value(form, "accreditationBody"),
                accreditationValidTo: value(form, "accreditationValidTo"),
                foundingYear: numberValue(form, "foundingYear"),
                rectorName: value(form, "rectorName"),
                studentCount: numberValue(form, "studentCount"),
                facultyCount: numberValue(form, "facultyCount"),
                admissionsEmail: value(form, "admissionsEmail"),
                admissionsPhone: value(form, "admissionsPhone"),
                admissionsWebsite: value(form, "admissionsWebsite"),
                enrollmentOpen: form.get("enrollmentOpen") === "on",
                internationalStudents:
                  form.get("internationalStudents") === "on",
                isPublished: form.get("isPublished") === "on",
              })
            );
          }}
        >
          <div className="md:col-span-2">
            <h2 className="font-display text-2xl font-semibold text-[#171126]">
              Identitet i upisne informacije
            </h2>
            <p className="mt-2 text-sm text-[#6b6475]">
              Ovi podaci grade individualnu akademsku landing stranicu.
            </p>
          </div>
          <Field
            name="shortName"
            title="Kratak naziv"
            defaultValue={data.shortName || data.company.name}
          />
          <Field
            name="institutionType"
            title="Tip institucije"
            defaultValue={data.institutionType}
          />
          <Field
            name="ownership"
            title="Vlasništvo"
            defaultValue={data.ownership || ""}
          />
          <Field
            name="rectorName"
            title="Rektor / rukovodilac"
            defaultValue={data.rectorName || ""}
          />
          <Field
            name="heroTitle"
            title="Glavni naslov"
            defaultValue={data.heroTitle || ""}
            span
          />
          <label className={`${label} md:col-span-2`}>
            Opis institucije
            <textarea
              name="summary"
              rows={5}
              defaultValue={data.summary || ""}
              className={input}
            />
          </label>
          <Field
            name="accreditationBody"
            title="Telo za akreditaciju"
            defaultValue={data.accreditationBody || ""}
          />
          <Field
            name="accreditationValidTo"
            title="Akreditacija važi do"
            type="date"
            defaultValue={data.accreditationValidTo?.slice(0, 10) || ""}
          />
          <Field
            name="foundingYear"
            title="Godina osnivanja"
            type="number"
            defaultValue={data.foundingYear || ""}
          />
          <Field
            name="studentCount"
            title="Broj studenata"
            type="number"
            defaultValue={data.studentCount || ""}
          />
          <Field
            name="facultyCount"
            title="Broj fakulteta / jedinica"
            type="number"
            defaultValue={data.facultyCount || ""}
          />
          <Field
            name="admissionsEmail"
            title="E-mail za upis"
            type="email"
            defaultValue={data.admissionsEmail || ""}
          />
          <Field
            name="admissionsPhone"
            title="Telefon za upis"
            defaultValue={data.admissionsPhone || ""}
          />
          <Field
            name="admissionsWebsite"
            title="Sajt za upis"
            type="url"
            defaultValue={data.admissionsWebsite || ""}
          />
          <div className="md:col-span-2 flex flex-wrap gap-5">
            <Check
              name="enrollmentOpen"
              title="Upis je otvoren"
              checked={data.enrollmentOpen}
            />
            <Check
              name="internationalStudents"
              title="Programi za strane studente"
              checked={data.internationalStudents}
            />
            <Check
              name="isPublished"
              title="Javni profil je objavljen"
              checked={data.isPublished}
            />
          </div>
          <button className="md:col-span-2 rounded-xl bg-[#705bc4] px-5 py-3 text-sm font-extrabold text-white">
            Sačuvaj profil
          </button>
        </form>
      ) : null}

      {tab === "programi" && canCatalog ? (
        <div className="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
          <form
            className="partner-app-panel grid gap-4"
            onSubmit={(event) => {
              event.preventDefault();
              const formElement = event.currentTarget;
              const form = new FormData(formElement);
              const payload = {
                nameSr: value(form, "nameSr"),
                nameEn: value(form, "nameEn"),
                degreeLevel: value(form, "degreeLevel"),
                facultyName: value(form, "facultyName"),
                durationYears: numberValue(form, "durationYears"),
                ects: numberValue(form, "ects"),
                studyMode: value(form, "studyMode"),
                language: value(form, "language") || "Srpski",
                tuitionRsd: numberValue(form, "tuitionRsd"),
                tuitionInternational: numberValue(form, "tuitionInternational"),
                currency: value(form, "currency") || "RSD",
                description: value(form, "description"),
                requirements: value(form, "requirements"),
                applicationUrl: value(form, "applicationUrl"),
                status: value(form, "status") || "DRAFT",
              };
              void run(async () => {
                await mutate(
                  editingProgram ? "PATCH" : "POST",
                  "program",
                  payload,
                  editingProgram?.id
                );
                setEditingProgram(null);
                formElement.reset();
              });
            }}
          >
            <div>
              <h2 className="font-display text-2xl font-semibold">
                {editingProgram
                  ? "Uredite program"
                  : "Dodajte studijski program"}
              </h2>
              <p className="mt-1 text-sm text-[#6b6475]">
                Strukturirani podaci se prikazuju i na Google Course šemi.
              </p>
            </div>
            <Field
              key={`name-${editingProgram?.id}`}
              name="nameSr"
              title="Naziv programa"
              required
              defaultValue={editingProgram?.nameSr || ""}
            />
            <Field
              key={`faculty-${editingProgram?.id}`}
              name="facultyName"
              title="Fakultet / odsek"
              defaultValue={editingProgram?.facultyName || ""}
            />
            <label className={label}>
              Nivo
              <select
                name="degreeLevel"
                defaultValue={editingProgram?.degreeLevel || "BACHELOR"}
                className={input}
              >
                <option value="BACHELOR">Osnovne</option>
                <option value="MASTER">Master</option>
                <option value="DOCTORATE">Doktorske</option>
                <option value="SPECIALIST">Specijalističke</option>
                <option value="PROFESSIONAL">Strukovne</option>
                <option value="OTHER">Drugo</option>
              </select>
            </label>
            <div className="grid grid-cols-2 gap-3">
              <Field
                name="durationYears"
                title="Trajanje (god.)"
                type="number"
                step="0.5"
                defaultValue={editingProgram?.durationYears || ""}
              />
              <Field
                name="ects"
                title="ESPB"
                type="number"
                defaultValue={editingProgram?.ects || ""}
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <Field
                name="language"
                title="Jezik"
                defaultValue={editingProgram?.language || "Srpski"}
              />
              <Field
                name="studyMode"
                title="Način studiranja"
                defaultValue={editingProgram?.studyMode || ""}
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <Field
                name="tuitionRsd"
                title="Školarina"
                type="number"
                defaultValue={editingProgram?.tuitionRsd || ""}
              />
              <Field
                name="currency"
                title="Valuta"
                defaultValue={editingProgram?.currency || "RSD"}
              />
            </div>
            <label className={label}>
              Opis
              <textarea
                name="description"
                rows={4}
                defaultValue={editingProgram?.description || ""}
                className={input}
              />
            </label>
            <label className={label}>
              Uslovi upisa
              <textarea
                name="requirements"
                rows={4}
                defaultValue={editingProgram?.requirements || ""}
                className={input}
              />
            </label>
            <Field
              name="applicationUrl"
              title="Link za prijavu"
              type="url"
              defaultValue={editingProgram?.applicationUrl || ""}
            />
            <label className={label}>
              Status
              <select
                name="status"
                defaultValue={editingProgram?.status || "DRAFT"}
                className={input}
              >
                <option value="DRAFT">Nacrt</option>
                <option value="PUBLISHED">Objavljeno</option>
                <option value="ARCHIVED">Arhivirano</option>
              </select>
            </label>
            <div className="flex gap-2">
              <button className="flex-1 rounded-xl bg-[#705bc4] px-4 py-3 text-sm font-extrabold text-white">
                {editingProgram ? "Sačuvaj izmene" : "Dodaj program"}
              </button>
              {editingProgram ? (
                <button
                  type="button"
                  onClick={() => setEditingProgram(null)}
                  className="rounded-xl border px-4 text-sm font-bold"
                >
                  Otkaži
                </button>
              ) : null}
            </div>
          </form>
          <div className="space-y-4">
            {data.programs.map((program) => (
              <article key={program.id} className="partner-app-panel">
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <p className="text-xs font-extrabold text-[#705bc4]">
                      {degreeLabels[program.degreeLevel] || program.degreeLevel}{" "}
                      · {programStatusLabels[program.status] || program.status}
                    </p>
                    <h3 className="mt-1 text-lg font-black">
                      {program.nameSr}
                    </h3>
                    {program.facultyName ? (
                      <p className="mt-1 text-sm text-[#6b6475]">
                        {program.facultyName}
                      </p>
                    ) : null}
                  </div>
                  <div className="flex gap-2">
                    <button
                      onClick={() => setEditingProgram(program)}
                      className="rounded-lg border px-3 py-2 text-xs font-bold"
                    >
                      Uredi
                    </button>
                    <button
                      onClick={() =>
                        confirm("Obrisati program i njegove rokove?") &&
                        void run(() =>
                          mutate("DELETE", "program", undefined, program.id)
                        )
                      }
                      className="rounded-lg border border-red-200 px-3 py-2 text-xs font-bold text-red-600"
                    >
                      Obriši
                    </button>
                  </div>
                </div>
                <div className="mt-4 space-y-2">
                  {program.deadlines.map((deadline) => (
                    <div
                      key={deadline.id}
                      className="flex items-center justify-between rounded-xl bg-[#f7f5fb] px-4 py-3 text-sm"
                    >
                      <span>
                        <b>{deadline.label}</b> · do{" "}
                        {new Date(deadline.applicationEnd).toLocaleDateString(
                          "sr-RS"
                        )}
                      </span>
                      <button
                        onClick={() =>
                          confirm("Obrisati rok?") &&
                          void run(() =>
                            mutate("DELETE", "deadline", undefined, deadline.id)
                          )
                        }
                        className="text-xs font-bold text-red-600"
                      >
                        Obriši
                      </button>
                    </div>
                  ))}
                </div>
                <form
                  className="mt-4 grid gap-3 rounded-xl border border-dashed border-[#d8d0e6] p-4 sm:grid-cols-2"
                  onSubmit={(event) => {
                    event.preventDefault();
                    const formElement = event.currentTarget;
                    const form = new FormData(formElement);
                    void run(async () => {
                      await mutate("POST", "deadline", {
                        programId: program.id,
                        label: value(form, "label"),
                        academicYear: value(form, "academicYear"),
                        applicationStart: value(form, "applicationStart"),
                        applicationEnd: value(form, "applicationEnd"),
                        seats: numberValue(form, "seats"),
                        documents: value(form, "documents"),
                        applyUrl: value(form, "applyUrl"),
                        isPublished: true,
                      });
                      formElement.reset();
                    });
                  }}
                >
                  <Field
                    name="label"
                    title="Naziv roka"
                    required
                    defaultValue="Prvi upisni rok"
                  />
                  <Field
                    name="academicYear"
                    title="Školska godina"
                    required
                    defaultValue="2026/27"
                  />
                  <Field
                    name="applicationEnd"
                    title="Prijave do"
                    required
                    type="date"
                  />
                  <Field name="seats" title="Broj mesta" type="number" />
                  <button className="sm:col-span-2 rounded-xl bg-[#171126] px-4 py-2.5 text-sm font-extrabold text-white">
                    Dodaj upisni rok
                  </button>
                </form>
              </article>
            ))}
          </div>
        </div>
      ) : null}

      {tab === "upiti" && canInquiries ? (
        <div className="space-y-3">
          {data.inquiries.map((inquiry) => (
            <article key={inquiry.id} className="partner-app-panel">
              <div className="flex flex-wrap items-start justify-between gap-4">
                <div>
                  <p className="text-xs font-extrabold uppercase tracking-[0.12em] text-[#705bc4]">
                    {inquiryLabels[inquiry.type] || inquiry.type}
                    {inquiry.program ? ` · ${inquiry.program.nameSr}` : ""}
                  </p>
                  <h3 className="mt-2 text-lg font-black">
                    {inquiry.fullName}
                  </h3>
                  <p className="mt-1 text-sm text-[#6b6475]">
                    <a href={`mailto:${inquiry.email}`}>{inquiry.email}</a>
                    {inquiry.phone ? ` · ${inquiry.phone}` : ""} ·{" "}
                    {new Date(inquiry.createdAt).toLocaleDateString("sr-RS")}
                  </p>
                </div>
                <select
                  value={inquiry.status}
                  onChange={(event) =>
                    void run(() =>
                      mutate(
                        "PATCH",
                        "inquiry",
                        { status: event.target.value },
                        inquiry.id
                      )
                    )
                  }
                  className="rounded-xl border border-[#ded8e8] bg-white px-3 py-2 text-sm font-bold"
                >
                  <option value="NEW">Novo</option>
                  <option value="IN_PROGRESS">U obradi</option>
                  <option value="ANSWERED">Odgovoreno</option>
                  <option value="CLOSED">Zatvoreno</option>
                  <option value="SPAM">Spam</option>
                </select>
              </div>
              <p className="mt-4 whitespace-pre-line rounded-xl bg-[#f7f5fb] p-4 text-sm leading-7 text-[#4f4859]">
                {inquiry.message}
              </p>
              <a
                href={`mailto:${inquiry.email}`}
                className="mt-4 inline-flex text-sm font-extrabold text-[#705bc4]"
              >
                Odgovori e-mailom →
              </a>
            </article>
          ))}
          {!data.inquiries.length ? (
            <div className="partner-app-panel text-sm text-[#6b6475]">
              Nema primljenih studentskih upita.
            </div>
          ) : null}
        </div>
      ) : null}

      {tab === "karijera" ? (
        <div className="grid gap-6 xl:grid-cols-2">
          {canPartners ? (
            <section className="partner-app-panel">
              <h2 className="font-display text-2xl font-semibold">
                Employer partneri
              </h2>
              <form
                className="mt-5 grid gap-3"
                onSubmit={(event) => {
                  event.preventDefault();
                  const formElement = event.currentTarget;
                  const form = new FormData(formElement);
                  void run(async () => {
                    await mutate("POST", "partner", {
                      name: value(form, "name"),
                      partnershipType: value(form, "partnershipType"),
                      website: value(form, "website"),
                      logoUrl: value(form, "logoUrl"),
                      description: value(form, "description"),
                      isPublished: true,
                    });
                    formElement.reset();
                  });
                }}
              >
                <Field name="name" title="Naziv partnera" required />
                <Field
                  name="partnershipType"
                  title="Vrsta saradnje"
                  defaultValue="Employer partner"
                />
                <Field name="website" title="Sajt" type="url" />
                <Field name="logoUrl" title="URL logotipa" type="url" />
                <button className="rounded-xl bg-[#705bc4] px-4 py-3 text-sm font-extrabold text-white">
                  Dodaj partnera
                </button>
              </form>
              <div className="mt-5 space-y-2">
                {data.employerPartners.map((partner) => (
                  <div
                    key={partner.id}
                    className="flex items-center justify-between rounded-xl bg-[#f7f5fb] px-4 py-3"
                  >
                    <div>
                      <p className="font-bold">{partner.name}</p>
                      <p className="text-xs text-[#6b6475]">
                        {partner.partnershipType}
                      </p>
                    </div>
                    <button
                      onClick={() =>
                        confirm("Obrisati partnera?") &&
                        void run(() =>
                          mutate("DELETE", "partner", undefined, partner.id)
                        )
                      }
                      className="text-xs font-bold text-red-600"
                    >
                      Obriši
                    </button>
                  </div>
                ))}
              </div>
            </section>
          ) : null}
          {canInternships ? (
            <section className="partner-app-panel">
              <h2 className="font-display text-2xl font-semibold">Prakse</h2>
              <form
                className="mt-5 grid gap-3"
                onSubmit={(event) => {
                  event.preventDefault();
                  const formElement = event.currentTarget;
                  const form = new FormData(formElement);
                  void run(async () => {
                    await mutate("POST", "internship", {
                      title: value(form, "title"),
                      employerPartnerId: value(form, "employerPartnerId"),
                      summary: value(form, "summary"),
                      description: value(form, "description"),
                      location: value(form, "location"),
                      workMode: value(form, "workMode") || "ONSITE",
                      isPaid: form.get("isPaid") === "on",
                      compensation: value(form, "compensation"),
                      positions: numberValue(form, "positions"),
                      applicationDeadline: value(form, "applicationDeadline"),
                      applyUrl: value(form, "applyUrl"),
                      contactEmail: value(form, "contactEmail"),
                      status: value(form, "status") || "PUBLISHED",
                    });
                    formElement.reset();
                  });
                }}
              >
                <Field name="title" title="Naziv prakse" required />
                <label className={label}>
                  Partner
                  <select name="employerPartnerId" className={input}>
                    <option value="">Bez partnera</option>
                    {data.employerPartners.map((p) => (
                      <option key={p.id} value={p.id}>
                        {p.name}
                      </option>
                    ))}
                  </select>
                </label>
                <Field name="summary" title="Kratak opis" />
                <Field name="location" title="Lokacija" />
                <label className={label}>
                  Način rada
                  <select name="workMode" className={input}>
                    <option value="ONSITE">Na lokaciji</option>
                    <option value="HYBRID">Hibridno</option>
                    <option value="REMOTE">Na daljinu</option>
                  </select>
                </label>
                <Field
                  name="applicationDeadline"
                  title="Rok za prijavu"
                  type="date"
                />
                <Field name="applyUrl" title="Link za prijavu" type="url" />
                <Check name="isPaid" title="Plaćena praksa" />
                <input type="hidden" name="status" value="PUBLISHED" />
                <button className="rounded-xl bg-[#705bc4] px-4 py-3 text-sm font-extrabold text-white">
                  Objavi praksu
                </button>
              </form>
              <div className="mt-5 space-y-2">
                {data.internships.map((item) => (
                  <div
                    key={item.id}
                    className="flex items-center justify-between rounded-xl bg-[#f7f5fb] px-4 py-3"
                  >
                    <div>
                      <p className="font-bold">{item.title}</p>
                      <p className="text-xs text-[#6b6475]">
                        {item.employerPartner?.name || "Bez partnera"} ·{" "}
                        {item.status}
                      </p>
                    </div>
                    <button
                      onClick={() =>
                        confirm("Obrisati praksu?") &&
                        void run(() =>
                          mutate("DELETE", "internship", undefined, item.id)
                        )
                      }
                      className="text-xs font-bold text-red-600"
                    >
                      Obriši
                    </button>
                  </div>
                ))}
              </div>
            </section>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

function Field({
  name,
  title,
  defaultValue = "",
  type = "text",
  required = false,
  span = false,
  step,
}: {
  name: string;
  title: string;
  defaultValue?: string | number;
  type?: string;
  required?: boolean;
  span?: boolean;
  step?: string;
}) {
  return (
    <label className={`${label}${span ? " md:col-span-2" : ""}`}>
      {title}
      <input
        name={name}
        type={type}
        required={required}
        step={step}
        defaultValue={defaultValue}
        className={input}
      />
    </label>
  );
}
function Check({
  name,
  title,
  checked = false,
}: {
  name: string;
  title: string;
  checked?: boolean;
}) {
  return (
    <label className="flex items-center gap-2 text-sm font-bold text-[#4f4859]">
      <input type="checkbox" name={name} defaultChecked={checked} />
      {title}
    </label>
  );
}