"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";

import {
  getNotificationAudienceLabel,
  getNotificationStatusLabel,
} from "@/lib/module-formatters";

type CompanyOption = {
  id: string;
  name: string;
};

type ClientAccountOption = {
  id: string;
  name: string;
  email: string;
};

type NotificationRow = {
  id: string;
  audience: "ADMIN" | "CLIENT" | "COMPANY";
  channel: "IN_APP" | "PUSH" | "EMAIL" | "SYSTEM" | "SMS" | "VIBER" | "WHATSAPP";
  status: "PENDING" | "SENT" | "READ" | "FAILED" | "ARCHIVED";
  title: string;
  message: string;
  company?: { name: string } | null;
  clientAccount?: { email: string; name: string } | null;
  user?: { email: string } | null;
  createdAt: Date | string;
};

type NotificationListManagerProps = {
  items: NotificationRow[];
  companies: CompanyOption[];
  clientAccounts: ClientAccountOption[];
};

const CHANNEL_LABELS: Record<NotificationRow["channel"], string> = {
  IN_APP: "U aplikaciji",
  PUSH: "Push",
  EMAIL: "Email",
  SYSTEM: "Sistemska",
  SMS: "SMS",
  VIBER: "Viber",
  WHATSAPP: "WhatsApp",
};

function formatDate(value: Date | string) {
  return new Intl.DateTimeFormat("sr-Latn-RS", {
    day: "2-digit",
    month: "long",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  }).format(new Date(value));
}

export function NotificationListManager({
  items: initialItems,
  companies,
  clientAccounts,
}: NotificationListManagerProps) {
  const router = useRouter();
  const [items, setItems] = useState(initialItems);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [message, setMessage] = useState<string | null>(null);
  const [bulkStatus, setBulkStatus] = useState("");
  const [isPending, startTransition] = useTransition();
  const [draft, setDraft] = useState({
    audience: "COMPANY",
    channel: "IN_APP",
    status: "SENT",
    title: "",
    message: "",
    companyId: companies[0]?.id ?? "",
    clientAccountId: "",
    url: "",
  });
  const summary = {
    total: items.length,
    unread: items.filter((item) => item.status === "PENDING" || item.status === "SENT").length,
    read: items.filter((item) => item.status === "READ").length,
    failed: items.filter((item) => item.status === "FAILED").length,
    clientFacing: items.filter((item) => item.audience === "CLIENT" || item.audience === "COMPANY").length,
  };

  async function refreshFromServer() {
    const response = await fetch("/api/admin/notifications");
    const result = (await response.json()) as { items?: NotificationRow[]; message?: string };
    if (!response.ok || !result.items) {
      throw new Error(result.message || "Učitavanje notifikacija nije uspelo.");
    }
    setItems(result.items);
  }

  function handleCreate() {
    startTransition(async () => {
      try {
        const response = await fetch("/api/admin/notifications", {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({
            ...draft,
            companyId: draft.companyId || undefined,
            clientAccountId: draft.clientAccountId || undefined,
          }),
        });
        const result = (await response.json()) as { message?: string };
        if (!response.ok) {
          throw new Error(result.message || "Slanje notifikacije nije uspelo.");
        }
        await refreshFromServer();
        setMessage("Notifikacija je sačuvana i poslata.");
        setDraft((current) => ({ ...current, title: "", message: "", url: "" }));
        router.refresh();
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Slanje notifikacije nije uspelo.");
      }
    });
  }

  function handleBulkUpdate() {
    startTransition(async () => {
      try {
        const response = await fetch("/api/admin/notifications/bulk", {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({
            ids: selectedIds,
            changes: {
              status: bulkStatus,
            },
          }),
        });
        const result = (await response.json()) as { items?: NotificationRow[]; message?: string };
        if (!response.ok || !result.items) {
          throw new Error(result.message || "Masovna izmena notifikacija nije uspela.");
        }
        setItems(result.items);
        setSelectedIds([]);
        setBulkStatus("");
        setMessage("Masovna izmena notifikacija je sačuvana.");
        router.refresh();
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Masovna izmena nije uspela.");
      }
    });
  }

  return (
    <div className="space-y-6">
      <section className="admin-command-shell">
        <div className="admin-command-header">
          <div>
            <p className="eyebrow">Notifikacije</p>
            <h3 className="mt-3 font-display text-3xl font-semibold text-foreground">
              Slanje, status i audit komunikacije
            </h3>
            <p className="mt-3 max-w-3xl text-sm leading-7 text-muted-foreground">
              Kreiraj notifikacije za kompanije, portal naloge i interne korisnike, pa prati status kanala iz jednog komandnog centra.
            </p>
          </div>
          <div className="admin-kpi-grid sm:max-w-[620px]">
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Ukupno</div>
              <div className="admin-kpi-value">{summary.total}</div>
            </div>
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Nepročitano</div>
              <div className="admin-kpi-value">{summary.unread}</div>
            </div>
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Pročitano</div>
              <div className="admin-kpi-value">{summary.read}</div>
            </div>
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Neuspešno</div>
              <div className="admin-kpi-value">{summary.failed}</div>
            </div>
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Klijentske</div>
              <div className="admin-kpi-value">{summary.clientFacing}</div>
            </div>
          </div>
        </div>
        <p className="eyebrow mt-6">Nova notifikacija</p>
        <div className="mt-5 grid gap-4 lg:grid-cols-3">
          <select className="inline-select" value={draft.audience} onChange={(event) => setDraft((current) => ({ ...current, audience: event.target.value }))}>
            <option value="COMPANY">Kompanija</option>
            <option value="CLIENT">Klijent</option>
            <option value="ADMIN">Admin</option>
          </select>
          <select className="inline-select" value={draft.channel} onChange={(event) => setDraft((current) => ({ ...current, channel: event.target.value }))}>
            <option value="IN_APP">U aplikaciji</option>
            <option value="PUSH">Push</option>
            <option value="EMAIL">Email</option>
            <option value="SYSTEM">Sistemska</option>
            <option value="SMS">SMS</option>
            <option value="VIBER">Viber</option>
            <option value="WHATSAPP">WhatsApp</option>
          </select>
          <select className="inline-select" value={draft.status} onChange={(event) => setDraft((current) => ({ ...current, status: event.target.value }))}>
            <option value="SENT">Poslato</option>
            <option value="PENDING">Na čekanju</option>
            <option value="READ">Pročitano</option>
            <option value="FAILED">Neuspešno</option>
            <option value="ARCHIVED">Arhivirano</option>
          </select>
          <select className="inline-select" value={draft.companyId} onChange={(event) => setDraft((current) => ({ ...current, companyId: event.target.value }))}>
            <option value="">Kompanija</option>
            {companies.map((company) => (
              <option key={company.id} value={company.id}>
                {company.name}
              </option>
            ))}
          </select>
          <select className="inline-select" value={draft.clientAccountId} onChange={(event) => setDraft((current) => ({ ...current, clientAccountId: event.target.value }))}>
            <option value="">Portal nalog</option>
            {clientAccounts.map((account) => (
              <option key={account.id} value={account.id}>
                {account.name} · {account.email}
              </option>
            ))}
          </select>
          <input className="inline-input" placeholder="URL" value={draft.url} onChange={(event) => setDraft((current) => ({ ...current, url: event.target.value }))} />
          <input className="inline-input lg:col-span-3" placeholder="Naslov" value={draft.title} onChange={(event) => setDraft((current) => ({ ...current, title: event.target.value }))} />
        </div>
        <textarea
          className="mt-4 min-h-[130px] w-full rounded-[1.5rem] border border-border bg-white px-4 py-3"
          placeholder="Poruka notifikacije"
          value={draft.message}
          onChange={(event) => setDraft((current) => ({ ...current, message: event.target.value }))}
        />
        <button type="button" className="primary-button mt-4" onClick={handleCreate} disabled={isPending}>
          Sačuvaj notifikaciju
        </button>
      </section>

      <section className="admin-command-shell">
        <div className="admin-command-header border-b border-border/80 pb-5">
          <select className="inline-select min-w-[240px]" value={bulkStatus} onChange={(event) => setBulkStatus(event.target.value)}>
            <option value="">Bulk status</option>
            <option value="PENDING">Na čekanju</option>
            <option value="SENT">Poslato</option>
            <option value="READ">Pročitano</option>
            <option value="FAILED">Neuspešno</option>
            <option value="ARCHIVED">Arhivirano</option>
          </select>
          <button
            type="button"
            className="primary-button"
            onClick={handleBulkUpdate}
            disabled={isPending || !selectedIds.length || !bulkStatus}
          >
            Primeni na označene
          </button>
        </div>
        {message ? (
          <div className="mt-5 rounded-[1.2rem] border border-secondary/16 bg-accent/55 px-4 py-3 text-sm font-medium text-primary">
            {message}
          </div>
        ) : null}
        <div className="mt-5 divide-y divide-border overflow-hidden rounded-[1.5rem] border border-border bg-white/62">
          {items.map((item) => (
            <article key={item.id} className="admin-list-card xl:flex-row xl:items-start xl:justify-between">
              <div className="flex items-start gap-4">
                <input
                  type="checkbox"
                  aria-label={`Označi notifikaciju ${item.title}`}
                  checked={selectedIds.includes(item.id)}
                  onChange={() =>
                    setSelectedIds((current) =>
                      current.includes(item.id)
                        ? current.filter((value) => value !== item.id)
                        : [...current, item.id],
                    )
                  }
                  className="mt-2 size-4"
                />
                <div className="min-w-0 flex-1">
                  <p className="admin-list-card-title">{item.title}</p>
                  <p className="mt-2 text-sm text-muted-foreground">{item.message}</p>
                  <div className="mt-3 flex flex-wrap gap-2">
                    <span className="admin-chip">{getNotificationAudienceLabel(item.audience)}</span>
                    <span className="admin-chip">{CHANNEL_LABELS[item.channel]}</span>
                    <span className="admin-chip">{getNotificationStatusLabel(item.status)}</span>
                  </div>
                  <div className="admin-kpi-grid mt-4">
                    <div className="admin-kpi-card">
                      <div className="admin-kpi-label">Kompanija</div>
                      <div className="admin-kpi-value">{item.company?.name || "Sistem"}</div>
                    </div>
                    <div className="admin-kpi-card">
                      <div className="admin-kpi-label">Portal nalog</div>
                      <div className="admin-kpi-value">
                        {item.clientAccount?.name || item.clientAccount?.email || "Nije vezano"}
                      </div>
                    </div>
                    <div className="admin-kpi-card">
                      <div className="admin-kpi-label">Kanal</div>
                      <div className="admin-kpi-value">{CHANNEL_LABELS[item.channel]}</div>
                    </div>
                    <div className="admin-kpi-card">
                      <div className="admin-kpi-label">Kreirano</div>
                      <div className="admin-kpi-value">{formatDate(item.createdAt)}</div>
                    </div>
                  </div>
                  <p className="mt-3 text-xs uppercase tracking-[0.14em] text-muted-foreground">
                    {item.company?.name || item.clientAccount?.email || item.user?.email || "Sistem"} · {formatDate(item.createdAt)}
                  </p>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}