"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState, type FormEvent, type ReactNode } from "react";

type Member = {
  id: string;
  name: string;
  membershipNumber: string | null;
  membershipType: string | null;
  sector: string | null;
  city: string | null;
  description: string | null;
  website: string | null;
  logoUrl: string | null;
  joinedAt: string | null;
  status: string;
  isVerified: boolean;
  isFeatured: boolean;
  isPublished: boolean;
};

type Opportunity = {
  id: string;
  title: string;
  type: string;
  summary: string | null;
  description: string | null;
  sectors: string[];
  region: string | null;
  deadline: string | null;
  contactEmail: string | null;
  sourceUrl: string | null;
  status: string;
};

type Activity = {
  id: string;
  title: string;
  type: string;
  summary: string | null;
  description: string | null;
  startsAt: string;
  endsAt: string | null;
  location: string | null;
  country: string | null;
  registrationUrl: string | null;
  contactEmail: string | null;
  capacity: number | null;
  status: string;
};

type Inquiry = {
  id: string;
  type: string;
  status: string;
  fullName: string;
  companyName: string | null;
  registrationNumber: string | null;
  email: string;
  phone: string | null;
  sectors: string[];
  targetRegion: string | null;
  message: string;
  createdAt: string;
  memberId: string | null;
  member: { name: string } | null;
  opportunity: { title: string } | null;
};

type PortalData = {
  id: string;
  slug: string;
  shortName: string | null;
  chamberType: string;
  territory: string | null;
  summary: string | null;
  heroTitle: string | null;
  foundingYear: number | null;
  presidentName: string | null;
  memberCount: number | null;
  sectorCount: number | null;
  membershipEmail: string | null;
  membershipPhone: string | null;
  membershipWebsite: string | null;
  membershipOpen: boolean;
  internationalRelations: boolean;
  isPublished: boolean;
  company: { name: string };
  members: Member[];
  opportunities: Opportunity[];
  activities: Activity[];
  inquiries: Inquiry[];
  analytics: {
    last30Days: Record<string, number>;
    last30DaysUniqueVisitors: number;
    last30DaysTotal: number;
  };
};

type Resource = "profile" | "member" | "opportunity" | "activity" | "inquiry";

const input =
  "mt-1.5 w-full rounded-xl border border-[#dbe2e7] bg-white px-3 py-2.5 text-sm text-[#142334] outline-none focus:border-[#1f6f65]";
const label = "text-sm font-bold text-[#334351]";
const panel =
  "rounded-[1.5rem] border border-[#dde5e9] bg-white p-5 shadow-[0_14px_38px_rgba(15,35,50,0.05)]";

const tierLabels: Record<string, string> = {
  CONFIRMED: "potvrđeni",
  PARTNER: "partnerski",
  STRATEGIC: "strateški",
};

const opportunityLabels: Record<string, string> = {
  PROCUREMENT: "Nabavka",
  PARTNERSHIP: "Partnerstvo",
  DISTRIBUTION: "Distribucija",
  EXPORT: "Izvoz",
  INVESTMENT: "Investicija",
  DELEGATION: "Delegacija",
  OTHER: "Drugo",
};

const activityLabels: Record<string, string> = {
  CONFERENCE: "Konferencija",
  TRAINING: "Edukacija",
  B2B_MEETING: "B2B susret",
  DELEGATION: "Delegacija",
  FAIR: "Sajam",
  WEBINAR: "Vebinar",
  OTHER: "Drugo",
};

const inquiryLabels: Record<string, string> = {
  MEMBERSHIP: "Članstvo",
  BUSINESS_MATCHING: "Poslovno povezivanje",
  EXPORT_SUPPORT: "Podrška izvozu",
  DELEGATION: "Delegacija",
  EVENT: "Događaj",
  PARTNERSHIP: "Partnerstvo",
  OTHER: "Drugo",
};

function dateInput(value: string | null | undefined) {
  return value ? new Date(value).toISOString().slice(0, 10) : "";
}

function dateTimeInput(value: string | null | undefined) {
  if (!value) return "";
  const date = new Date(value);
  date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
  return date.toISOString().slice(0, 16);
}

function Field({
  label: title,
  children,
}: {
  label: string;
  children: ReactNode;
}) {
  return (
    <label className={label}>
      {title}
      {children}
    </label>
  );
}

function Empty({ children }: { children: ReactNode }) {
  return (
    <div className="rounded-2xl border border-dashed border-[#ccd7dd] bg-[#f8fafb] px-5 py-8 text-center text-sm text-[#687782]">
      {children}
    </div>
  );
}

export function ChamberPortalManager({
  data,
  entitlements,
  tier,
  validTo,
}: {
  data: PortalData;
  entitlements: string[];
  tier: string;
  validTo: string | null;
}) {
  const router = useRouter();
  const [tab, setTab] = useState("pregled");
  const [notice, setNotice] = useState<{ ok: boolean; text: string } | null>(
    null
  );
  const [busy, setBusy] = useState(false);

  const canMembers = entitlements.includes("MEMBER_DIRECTORY");
  const canOpportunities = entitlements.includes("OPPORTUNITY_BOARD");
  const canActivities = entitlements.includes("ACTIVITIES");
  const canInquiries = entitlements.includes("B2B_INQUIRIES");

  async function mutate(
    method: "POST" | "PATCH" | "DELETE",
    resource: Resource,
    payload?: unknown,
    id?: string
  ) {
    setBusy(true);
    setNotice(null);
    try {
      const url =
        method === "DELETE"
          ? `/api/portal/chamber?resource=${resource}&id=${id}`
          : "/api/portal/chamber";
      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: "Promena je sačuvana." });
      router.refresh();
    } catch (caught) {
      setNotice({
        ok: false,
        text:
          caught instanceof Error ? caught.message : "Promena nije sačuvana.",
      });
    } finally {
      setBusy(false);
    }
  }

  function value(form: FormData, key: string) {
    return String(form.get(key) || "").trim();
  }

  function optionalNumber(form: FormData, key: string) {
    const raw = value(form, key);
    return raw ? Number(raw) : null;
  }

  function check(form: FormData, key: string) {
    return form.get(key) === "on";
  }

  function sectors(form: FormData) {
    return value(form, "sectors")
      .split(",")
      .map((item) => item.trim())
      .filter(Boolean);
  }

  function submitProfile(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    return mutate("PATCH", "profile", {
      shortName: value(form, "shortName"),
      chamberType: value(form, "chamberType"),
      territory: value(form, "territory"),
      heroTitle: value(form, "heroTitle"),
      summary: value(form, "summary"),
      foundingYear: optionalNumber(form, "foundingYear"),
      presidentName: value(form, "presidentName"),
      memberCount: optionalNumber(form, "memberCount"),
      sectorCount: optionalNumber(form, "sectorCount"),
      membershipEmail: value(form, "membershipEmail"),
      membershipPhone: value(form, "membershipPhone"),
      membershipWebsite: value(form, "membershipWebsite"),
      membershipOpen: check(form, "membershipOpen"),
      internationalRelations: check(form, "internationalRelations"),
      isPublished: check(form, "isPublished"),
    });
  }

  function memberPayload(form: FormData) {
    return {
      name: value(form, "name"),
      membershipNumber: value(form, "membershipNumber"),
      membershipType: value(form, "membershipType"),
      sector: value(form, "sector"),
      city: value(form, "city"),
      description: value(form, "description"),
      website: value(form, "website"),
      logoUrl: value(form, "logoUrl"),
      joinedAt: value(form, "joinedAt"),
      status: value(form, "status"),
      isVerified: check(form, "isVerified"),
      isFeatured: check(form, "isFeatured"),
      isPublished: check(form, "isPublished"),
    };
  }

  function opportunityPayload(form: FormData) {
    return {
      title: value(form, "title"),
      type: value(form, "type"),
      summary: value(form, "summary"),
      description: value(form, "description"),
      sectors: sectors(form),
      region: value(form, "region"),
      deadline: value(form, "deadline"),
      contactEmail: value(form, "contactEmail"),
      sourceUrl: value(form, "sourceUrl"),
      status: value(form, "status"),
    };
  }

  function activityPayload(form: FormData) {
    return {
      title: value(form, "title"),
      type: value(form, "type"),
      summary: value(form, "summary"),
      description: value(form, "description"),
      startsAt: value(form, "startsAt"),
      endsAt: value(form, "endsAt"),
      location: value(form, "location"),
      country: value(form, "country"),
      registrationUrl: value(form, "registrationUrl"),
      contactEmail: value(form, "contactEmail"),
      capacity: optionalNumber(form, "capacity"),
      status: value(form, "status"),
    };
  }

  const tabs = [
    { id: "pregled", label: "Pregled" },
    { id: "profil", label: "Profil" },
    ...(canMembers
      ? [{ id: "clanice", label: `Članice (${data.members.length})` }]
      : []),
    ...(canOpportunities
      ? [
          {
            id: "prilike",
            label: `Poslovne prilike (${data.opportunities.length})`,
          },
        ]
      : []),
    ...(canActivities
      ? [{ id: "aktivnosti", label: `Aktivnosti (${data.activities.length})` }]
      : []),
    ...(canInquiries
      ? [
          {
            id: "upiti",
            label: `B2B upiti (${
              data.inquiries.filter((item) => item.status === "NEW").length
            })`,
          },
        ]
      : []),
  ];

  return (
    <div>
      <section className="mb-6 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-[#dce5e9] bg-white p-5">
        <div>
          <p className="text-xs font-extrabold uppercase tracking-[0.14em] text-[#1f6f65]">
            Aktivan {tierLabels[tier] || "institucionalni"} nivo
          </p>
          <p className="mt-1 text-sm text-[#667580]">
            {validTo
              ? `Prava važe do ${new Date(validTo).toLocaleDateString("sr-RS")}`
              : "Komorska prava su aktivna."}
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Link
            href={`/privredne-komore/${data.slug}`}
            target="_blank"
            className="rounded-xl border border-[#d7e1e5] px-4 py-2 text-sm font-bold text-[#183c5a]"
          >
            Javni profil ↗
          </Link>
          <Link
            href="/portal/komora/paketi"
            className="rounded-xl bg-[#183c5a] px-4 py-2 text-sm font-extrabold text-white"
          >
            Paket i obnova
          </Link>
        </div>
      </section>

      <div className="mb-5 flex gap-2 overflow-x-auto rounded-2xl border border-[#dce5e9] bg-white p-2">
        {tabs.map((item) => (
          <button
            type="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-[#183c5a] text-white"
                : "text-[#657580] hover:bg-[#f0f5f6]"
            }`}
          >
            {item.label}
          </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 === "pregled" ? (
        <div className="grid gap-5 lg:grid-cols-[1fr_1fr]">
          <section className={panel}>
            <p className="text-xs font-extrabold uppercase tracking-[0.14em] text-[#1f6f65]">
              Poslednjih 30 dana
            </p>
            <div className="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-4">
              {[
                ["Pregledi", data.analytics.last30Days.VIEW || 0],
                ["Posetioci", data.analytics.last30DaysUniqueVisitors || 0],
                ["Kontakti", data.analytics.last30Days.CONTACT || 0],
                ["Interakcije", data.analytics.last30DaysTotal || 0],
              ].map(([name, amount]) => (
                <div
                  key={String(name)}
                  className="rounded-2xl bg-[#f1f6f6] p-4"
                >
                  <p className="text-2xl font-black text-[#163e4d]">{amount}</p>
                  <p className="mt-1 text-xs font-bold text-[#64747e]">
                    {name}
                  </p>
                </div>
              ))}
            </div>
          </section>
          <section className={panel}>
            <p className="text-xs font-extrabold uppercase tracking-[0.14em] text-[#a86f22]">
              Operativni pregled
            </p>
            <div className="mt-5 grid grid-cols-2 gap-3">
              <button
                type="button"
                onClick={() => setTab("clanice")}
                className="rounded-2xl border border-[#e1e8eb] p-4 text-left"
              >
                <strong className="block text-2xl text-[#142334]">
                  {data.members.length}
                </strong>
                <span className="text-sm text-[#657580]">
                  članica u direktorijumu
                </span>
              </button>
              <button
                type="button"
                onClick={() => setTab("upiti")}
                className="rounded-2xl border border-[#e1e8eb] p-4 text-left"
              >
                <strong className="block text-2xl text-[#142334]">
                  {
                    data.inquiries.filter((item) => item.status === "NEW")
                      .length
                  }
                </strong>
                <span className="text-sm text-[#657580]">novih B2B upita</span>
              </button>
              <button
                type="button"
                onClick={() => setTab("prilike")}
                className="rounded-2xl border border-[#e1e8eb] p-4 text-left"
              >
                <strong className="block text-2xl text-[#142334]">
                  {
                    data.opportunities.filter(
                      (item) => item.status === "PUBLISHED"
                    ).length
                  }
                </strong>
                <span className="text-sm text-[#657580]">
                  objavljenih prilika
                </span>
              </button>
              <button
                type="button"
                onClick={() => setTab("aktivnosti")}
                className="rounded-2xl border border-[#e1e8eb] p-4 text-left"
              >
                <strong className="block text-2xl text-[#142334]">
                  {
                    data.activities.filter(
                      (item) => item.status === "PUBLISHED"
                    ).length
                  }
                </strong>
                <span className="text-sm text-[#657580]">
                  javnih aktivnosti
                </span>
              </button>
            </div>
          </section>
        </div>
      ) : null}

      {tab === "profil" ? (
        <form onSubmit={submitProfile} className={panel}>
          <div className="grid gap-4 md:grid-cols-2">
            <Field label="Kratak naziv">
              <input
                name="shortName"
                defaultValue={data.shortName || ""}
                className={input}
              />
            </Field>
            <Field label="Tip komore">
              <input
                name="chamberType"
                required
                defaultValue={data.chamberType}
                className={input}
              />
            </Field>
            <Field label="Teritorija">
              <input
                name="territory"
                defaultValue={data.territory || ""}
                className={input}
              />
            </Field>
            <Field label="Godina osnivanja">
              <input
                name="foundingYear"
                type="number"
                defaultValue={data.foundingYear || ""}
                className={input}
              />
            </Field>
            <Field label="Predsednik / predsednica">
              <input
                name="presidentName"
                defaultValue={data.presidentName || ""}
                className={input}
              />
            </Field>
            <Field label="Naslov javnog profila">
              <input
                name="heroTitle"
                defaultValue={data.heroTitle || ""}
                className={input}
              />
            </Field>
            <Field label="Broj članica">
              <input
                name="memberCount"
                type="number"
                min="0"
                defaultValue={data.memberCount ?? ""}
                className={input}
              />
            </Field>
            <Field label="Broj sektora">
              <input
                name="sectorCount"
                type="number"
                min="0"
                defaultValue={data.sectorCount ?? ""}
                className={input}
              />
            </Field>
            <Field label="Email za članstvo">
              <input
                name="membershipEmail"
                type="email"
                defaultValue={data.membershipEmail || ""}
                className={input}
              />
            </Field>
            <Field label="Telefon za članstvo">
              <input
                name="membershipPhone"
                defaultValue={data.membershipPhone || ""}
                className={input}
              />
            </Field>
            <Field label="Stranica za članstvo">
              <input
                name="membershipWebsite"
                type="url"
                defaultValue={data.membershipWebsite || ""}
                className={input}
              />
            </Field>
          </div>
          <Field label="Predstavljanje komore">
            <textarea
              name="summary"
              rows={6}
              defaultValue={data.summary || ""}
              className={input}
            />
          </Field>
          <div className="mt-5 flex flex-wrap gap-5 text-sm font-bold text-[#45545f]">
            <label>
              <input
                name="membershipOpen"
                type="checkbox"
                defaultChecked={data.membershipOpen}
                className="mr-2"
              />
              Prima zahteve za članstvo
            </label>
            <label>
              <input
                name="internationalRelations"
                type="checkbox"
                defaultChecked={data.internationalRelations}
                className="mr-2"
              />
              Međunarodna saradnja
            </label>
            <label>
              <input
                name="isPublished"
                type="checkbox"
                defaultChecked={data.isPublished}
                className="mr-2"
              />
              Profil je javno objavljen
            </label>
          </div>
          <button
            disabled={busy}
            className="mt-6 rounded-xl bg-[#1f6f65] px-5 py-3 text-sm font-extrabold text-white disabled:opacity-60"
          >
            Sačuvaj profil
          </button>
        </form>
      ) : null}

      {tab === "clanice" && canMembers ? (
        <div className="space-y-4">
          <details className={panel}>
            <summary className="cursor-pointer font-extrabold text-[#183c5a]">
              Dodaj članicu
            </summary>
            <MemberForm
              busy={busy}
              onSubmit={(form) => mutate("POST", "member", memberPayload(form))}
            />
          </details>
          {data.members.length ? (
            data.members.map((item) => (
              <details key={item.id} className={panel}>
                <summary className="cursor-pointer list-none">
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div>
                      <strong className="text-[#142334]">{item.name}</strong>
                      <p className="mt-1 text-xs text-[#6a7882]">
                        {item.sector || "Sektor nije naveden"} ·{" "}
                        {item.city || "Lokacija nije navedena"}
                      </p>
                    </div>
                    <span
                      className={`rounded-full px-3 py-1 text-xs font-extrabold ${
                        item.isPublished
                          ? "bg-emerald-50 text-emerald-800"
                          : "bg-slate-100 text-slate-600"
                      }`}
                    >
                      {item.isPublished ? "Objavljeno" : "Sakriveno"}
                    </span>
                  </div>
                </summary>
                <MemberForm
                  item={item}
                  busy={busy}
                  onSubmit={(form) =>
                    mutate("PATCH", "member", memberPayload(form), item.id)
                  }
                  onDelete={() =>
                    mutate("DELETE", "member", undefined, item.id)
                  }
                />
              </details>
            ))
          ) : (
            <Empty>
              Direktorijum nema objavljene članice. Dodajte samo proverene
              podatke.
            </Empty>
          )}
        </div>
      ) : null}

      {tab === "prilike" && canOpportunities ? (
        <div className="space-y-4">
          <details className={panel}>
            <summary className="cursor-pointer font-extrabold text-[#183c5a]">
              Dodaj poslovnu priliku
            </summary>
            <OpportunityForm
              busy={busy}
              onSubmit={(form) =>
                mutate("POST", "opportunity", opportunityPayload(form))
              }
            />
          </details>
          {data.opportunities.length ? (
            data.opportunities.map((item) => (
              <details key={item.id} className={panel}>
                <summary className="cursor-pointer list-none">
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div>
                      <strong className="text-[#142334]">{item.title}</strong>
                      <p className="mt-1 text-xs text-[#6a7882]">
                        {opportunityLabels[item.type] || item.type}
                        {item.deadline
                          ? ` · rok ${new Date(
                              item.deadline
                            ).toLocaleDateString("sr-RS")}`
                          : ""}
                      </p>
                    </div>
                    <span className="rounded-full bg-[#f1f6f6] px-3 py-1 text-xs font-extrabold text-[#1f6f65]">
                      {item.status}
                    </span>
                  </div>
                </summary>
                <OpportunityForm
                  item={item}
                  busy={busy}
                  onSubmit={(form) =>
                    mutate(
                      "PATCH",
                      "opportunity",
                      opportunityPayload(form),
                      item.id
                    )
                  }
                  onDelete={() =>
                    mutate("DELETE", "opportunity", undefined, item.id)
                  }
                />
              </details>
            ))
          ) : (
            <Empty>
              Nema poslovnih prilika. Objavljujte samo aktuelne i proverene
              pozive.
            </Empty>
          )}
        </div>
      ) : null}

      {tab === "aktivnosti" && canActivities ? (
        <div className="space-y-4">
          <details className={panel}>
            <summary className="cursor-pointer font-extrabold text-[#183c5a]">
              Dodaj događaj ili delegaciju
            </summary>
            <ActivityForm
              busy={busy}
              onSubmit={(form) =>
                mutate("POST", "activity", activityPayload(form))
              }
            />
          </details>
          {data.activities.length ? (
            data.activities.map((item) => (
              <details key={item.id} className={panel}>
                <summary className="cursor-pointer list-none">
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div>
                      <strong className="text-[#142334]">{item.title}</strong>
                      <p className="mt-1 text-xs text-[#6a7882]">
                        {activityLabels[item.type] || item.type} ·{" "}
                        {new Date(item.startsAt).toLocaleString("sr-RS")}
                      </p>
                    </div>
                    <span className="rounded-full bg-[#f1f6f6] px-3 py-1 text-xs font-extrabold text-[#1f6f65]">
                      {item.status}
                    </span>
                  </div>
                </summary>
                <ActivityForm
                  item={item}
                  busy={busy}
                  onSubmit={(form) =>
                    mutate("PATCH", "activity", activityPayload(form), item.id)
                  }
                  onDelete={() =>
                    mutate("DELETE", "activity", undefined, item.id)
                  }
                />
              </details>
            ))
          ) : (
            <Empty>
              Nema javnih aktivnosti. Dodajte proverene događaje, edukacije ili
              delegacije.
            </Empty>
          )}
        </div>
      ) : null}

      {tab === "upiti" && canInquiries ? (
        <div className="space-y-4">
          {data.inquiries.length ? (
            data.inquiries.map((item) => (
              <article key={item.id} className={panel}>
                <div className="flex flex-wrap items-start justify-between gap-4">
                  <div>
                    <p className="text-xs font-extrabold uppercase tracking-[0.12em] text-[#1f6f65]">
                      {inquiryLabels[item.type] || item.type}
                    </p>
                    <h3 className="mt-2 text-lg font-black text-[#142334]">
                      {item.companyName || item.fullName}
                    </h3>
                    <p className="mt-1 text-sm text-[#657580]">
                      {item.fullName} · {item.email}
                      {item.phone ? ` · ${item.phone}` : ""}
                    </p>
                  </div>
                  <time className="text-xs font-bold text-[#7b8790]">
                    {new Date(item.createdAt).toLocaleString("sr-RS")}
                  </time>
                </div>
                <p className="mt-4 whitespace-pre-line rounded-2xl bg-[#f5f8f9] p-4 text-sm leading-6 text-[#45545f]">
                  {item.message}
                </p>
                {item.opportunity ? (
                  <p className="mt-3 text-xs text-[#667580]">
                    Prilika: {item.opportunity.title}
                  </p>
                ) : null}
                <form
                  onSubmit={(event) => {
                    event.preventDefault();
                    const form = new FormData(event.currentTarget);
                    void mutate(
                      "PATCH",
                      "inquiry",
                      {
                        status: value(form, "status"),
                        memberId: value(form, "memberId") || null,
                      },
                      item.id
                    );
                  }}
                  className="mt-4 grid gap-3 sm:grid-cols-[1fr_1fr_auto]"
                >
                  <select
                    name="status"
                    defaultValue={item.status}
                    className={input}
                  >
                    <option value="NEW">Nov</option>
                    <option value="IN_PROGRESS">U obradi</option>
                    <option value="ROUTED_TO_MEMBER">Prosleđen članici</option>
                    <option value="ANSWERED">Odgovoreno</option>
                    <option value="CLOSED">Zatvoren</option>
                    <option value="SPAM">Spam</option>
                  </select>
                  <select
                    name="memberId"
                    defaultValue={item.memberId || ""}
                    className={input}
                  >
                    <option value="">Bez dodeljene članice</option>
                    {data.members.map((member) => (
                      <option key={member.id} value={member.id}>
                        {member.name}
                      </option>
                    ))}
                  </select>
                  <button
                    disabled={busy}
                    className="mt-1.5 rounded-xl bg-[#1f6f65] px-4 py-2 text-sm font-extrabold text-white disabled:opacity-60"
                  >
                    Sačuvaj
                  </button>
                </form>
              </article>
            ))
          ) : (
            <Empty>Još nema B2B upita za ovu komoru.</Empty>
          )}
        </div>
      ) : null}
    </div>
  );
}

function MemberForm({
  item,
  busy,
  onSubmit,
  onDelete,
}: {
  item?: Member;
  busy: boolean;
  onSubmit: (form: FormData) => void;
  onDelete?: () => void;
}) {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        onSubmit(new FormData(event.currentTarget));
      }}
      className="mt-5 grid gap-4 md:grid-cols-2"
    >
      <Field label="Naziv članice">
        <input
          name="name"
          required
          defaultValue={item?.name || ""}
          className={input}
        />
      </Field>
      <Field label="Sektor">
        <input
          name="sector"
          defaultValue={item?.sector || ""}
          className={input}
        />
      </Field>
      <Field label="Grad">
        <input name="city" defaultValue={item?.city || ""} className={input} />
      </Field>
      <Field label="Vrsta članstva">
        <input
          name="membershipType"
          defaultValue={item?.membershipType || ""}
          className={input}
        />
      </Field>
      <Field label="Članski broj">
        <input
          name="membershipNumber"
          defaultValue={item?.membershipNumber || ""}
          className={input}
        />
      </Field>
      <Field label="Datum učlanjenja">
        <input
          name="joinedAt"
          type="date"
          defaultValue={dateInput(item?.joinedAt)}
          className={input}
        />
      </Field>
      <Field label="Sajt">
        <input
          name="website"
          type="url"
          defaultValue={item?.website || ""}
          className={input}
        />
      </Field>
      <Field label="URL logotipa">
        <input
          name="logoUrl"
          type="url"
          defaultValue={item?.logoUrl || ""}
          className={input}
        />
      </Field>
      <Field label="Status">
        <select
          name="status"
          defaultValue={item?.status || "ACTIVE"}
          className={input}
        >
          <option value="ACTIVE">Aktivna</option>
          <option value="ASSOCIATE">Pridružena</option>
          <option value="HONORARY">Počasna</option>
          <option value="SUSPENDED">Suspendovana</option>
          <option value="FORMER">Bivša</option>
        </select>
      </Field>
      <Field label="Kratak opis">
        <textarea
          name="description"
          rows={3}
          defaultValue={item?.description || ""}
          className={input}
        />
      </Field>
      <div className="md:col-span-2 flex flex-wrap gap-4 text-sm font-bold text-[#45545f]">
        <label>
          <input
            name="isVerified"
            type="checkbox"
            defaultChecked={item?.isVerified}
            className="mr-2"
          />
          Proverena
        </label>
        <label>
          <input
            name="isFeatured"
            type="checkbox"
            defaultChecked={item?.isFeatured}
            className="mr-2"
          />
          Istaknuta
        </label>
        <label>
          <input
            name="isPublished"
            type="checkbox"
            defaultChecked={item ? item.isPublished : true}
            className="mr-2"
          />
          Objavljena
        </label>
      </div>
      <div className="md:col-span-2 flex gap-2">
        <button
          disabled={busy}
          className="rounded-xl bg-[#1f6f65] px-5 py-2.5 text-sm font-extrabold text-white disabled:opacity-60"
        >
          {item ? "Sačuvaj članicu" : "Dodaj članicu"}
        </button>
        {onDelete ? (
          <button
            type="button"
            disabled={busy}
            onClick={onDelete}
            className="rounded-xl border border-red-200 px-4 py-2.5 text-sm font-bold text-red-700"
          >
            Obriši
          </button>
        ) : null}
      </div>
    </form>
  );
}

function OpportunityForm({
  item,
  busy,
  onSubmit,
  onDelete,
}: {
  item?: Opportunity;
  busy: boolean;
  onSubmit: (form: FormData) => void;
  onDelete?: () => void;
}) {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        onSubmit(new FormData(event.currentTarget));
      }}
      className="mt-5 grid gap-4 md:grid-cols-2"
    >
      <Field label="Naslov">
        <input
          name="title"
          required
          defaultValue={item?.title || ""}
          className={input}
        />
      </Field>
      <Field label="Vrsta">
        <select
          name="type"
          defaultValue={item?.type || "PARTNERSHIP"}
          className={input}
        >
          {Object.entries(opportunityLabels).map(([key, name]) => (
            <option key={key} value={key}>
              {name}
            </option>
          ))}
        </select>
      </Field>
      <Field label="Region / tržište">
        <input
          name="region"
          defaultValue={item?.region || ""}
          className={input}
        />
      </Field>
      <Field label="Rok">
        <input
          name="deadline"
          type="date"
          defaultValue={dateInput(item?.deadline)}
          className={input}
        />
      </Field>
      <Field label="Sektori, odvojeni zarezom">
        <input
          name="sectors"
          defaultValue={item?.sectors.join(", ") || ""}
          className={input}
        />
      </Field>
      <Field label="Kontakt email">
        <input
          name="contactEmail"
          type="email"
          defaultValue={item?.contactEmail || ""}
          className={input}
        />
      </Field>
      <Field label="Izvor / prijava">
        <input
          name="sourceUrl"
          type="url"
          defaultValue={item?.sourceUrl || ""}
          className={input}
        />
      </Field>
      <Field label="Status">
        <select
          name="status"
          defaultValue={item?.status || "DRAFT"}
          className={input}
        >
          <option value="DRAFT">Nacrt</option>
          <option value="PUBLISHED">Objavljeno</option>
          <option value="CLOSED">Zatvoreno</option>
          <option value="ARCHIVED">Arhivirano</option>
        </select>
      </Field>
      <Field label="Sažetak">
        <textarea
          name="summary"
          rows={3}
          defaultValue={item?.summary || ""}
          className={input}
        />
      </Field>
      <Field label="Detalji">
        <textarea
          name="description"
          rows={3}
          defaultValue={item?.description || ""}
          className={input}
        />
      </Field>
      <div className="md:col-span-2 flex gap-2">
        <button
          disabled={busy}
          className="rounded-xl bg-[#1f6f65] px-5 py-2.5 text-sm font-extrabold text-white disabled:opacity-60"
        >
          {item ? "Sačuvaj priliku" : "Dodaj priliku"}
        </button>
        {onDelete ? (
          <button
            type="button"
            disabled={busy}
            onClick={onDelete}
            className="rounded-xl border border-red-200 px-4 py-2.5 text-sm font-bold text-red-700"
          >
            Obriši
          </button>
        ) : null}
      </div>
    </form>
  );
}

function ActivityForm({
  item,
  busy,
  onSubmit,
  onDelete,
}: {
  item?: Activity;
  busy: boolean;
  onSubmit: (form: FormData) => void;
  onDelete?: () => void;
}) {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        onSubmit(new FormData(event.currentTarget));
      }}
      className="mt-5 grid gap-4 md:grid-cols-2"
    >
      <Field label="Naziv">
        <input
          name="title"
          required
          defaultValue={item?.title || ""}
          className={input}
        />
      </Field>
      <Field label="Vrsta">
        <select
          name="type"
          defaultValue={item?.type || "CONFERENCE"}
          className={input}
        >
          {Object.entries(activityLabels).map(([key, name]) => (
            <option key={key} value={key}>
              {name}
            </option>
          ))}
        </select>
      </Field>
      <Field label="Početak">
        <input
          name="startsAt"
          required
          type="datetime-local"
          defaultValue={dateTimeInput(item?.startsAt)}
          className={input}
        />
      </Field>
      <Field label="Završetak">
        <input
          name="endsAt"
          type="datetime-local"
          defaultValue={dateTimeInput(item?.endsAt)}
          className={input}
        />
      </Field>
      <Field label="Lokacija">
        <input
          name="location"
          defaultValue={item?.location || ""}
          className={input}
        />
      </Field>
      <Field label="Država">
        <input
          name="country"
          defaultValue={item?.country || ""}
          className={input}
        />
      </Field>
      <Field label="Stranica za prijavu">
        <input
          name="registrationUrl"
          type="url"
          defaultValue={item?.registrationUrl || ""}
          className={input}
        />
      </Field>
      <Field label="Kontakt email">
        <input
          name="contactEmail"
          type="email"
          defaultValue={item?.contactEmail || ""}
          className={input}
        />
      </Field>
      <Field label="Kapacitet">
        <input
          name="capacity"
          type="number"
          min="1"
          defaultValue={item?.capacity || ""}
          className={input}
        />
      </Field>
      <Field label="Status">
        <select
          name="status"
          defaultValue={item?.status || "DRAFT"}
          className={input}
        >
          <option value="DRAFT">Nacrt</option>
          <option value="PUBLISHED">Objavljeno</option>
          <option value="CANCELED">Otkazano</option>
          <option value="COMPLETED">Završeno</option>
          <option value="ARCHIVED">Arhivirano</option>
        </select>
      </Field>
      <Field label="Sažetak">
        <textarea
          name="summary"
          rows={3}
          defaultValue={item?.summary || ""}
          className={input}
        />
      </Field>
      <Field label="Detalji">
        <textarea
          name="description"
          rows={3}
          defaultValue={item?.description || ""}
          className={input}
        />
      </Field>
      <div className="md:col-span-2 flex gap-2">
        <button
          disabled={busy}
          className="rounded-xl bg-[#1f6f65] px-5 py-2.5 text-sm font-extrabold text-white disabled:opacity-60"
        >
          {item ? "Sačuvaj aktivnost" : "Dodaj aktivnost"}
        </button>
        {onDelete ? (
          <button
            type="button"
            disabled={busy}
            onClick={onDelete}
            className="rounded-xl border border-red-200 px-4 py-2.5 text-sm font-bold text-red-700"
          >
            Obriši
          </button>
        ) : null}
      </div>
    </form>
  );
}