"use client";

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

import { CLIENT_PORTAL_PERMISSIONS } from "@/lib/client-portal";

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

type ClientAccountRow = {
  id: string;
  email: string;
  name: string;
  status: "INVITED" | "ACTIVE" | "SUSPENDED";
  permissions: string[];
  isPrimary: boolean;
  company: {
    id: string;
    name: string;
  };
  notifications: Array<{ id: string }>;
  lastLoginAt: Date | string | null;
};

type ClientAccountListManagerProps = {
  items: ClientAccountRow[];
  companies: CompanyOption[];
};

type DraftState = {
  id?: string;
  companyId: string;
  email: string;
  name: string;
  status: "INVITED" | "ACTIVE" | "SUSPENDED";
  permissions: string[];
  isPrimary: boolean;
  password?: string;
};

const emptyDraft: DraftState = {
  companyId: "",
  email: "",
  name: "",
  status: "ACTIVE",
  permissions: ["overview:view", "invoices:view", "notifications:view"],
  isPrimary: false,
  password: "",
};

function formatDate(value?: Date | string | null) {
  if (!value) {
    return "Nikada";
  }

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

function toDraft(account: ClientAccountRow): DraftState {
  return {
    id: account.id,
    companyId: account.company.id,
    email: account.email,
    name: account.name,
    status: account.status,
    permissions: account.permissions,
    isPrimary: account.isPrimary,
    password: "",
  };
}

export function ClientAccountListManager({
  items: initialItems,
  companies,
}: ClientAccountListManagerProps) {
  const router = useRouter();
  const [items, setItems] = useState(initialItems);
  const [drafts, setDrafts] = useState<Record<string, DraftState>>(
    Object.fromEntries(initialItems.map((item) => [item.id, toDraft(item)])),
  );
  const [createDraft, setCreateDraft] = useState<DraftState>({
    ...emptyDraft,
    companyId: companies[0]?.id ?? "",
  });
  const [message, setMessage] = useState<string | null>(null);
  const [resetPasswords, setResetPasswords] = useState<Record<string, string>>({});
  const [isPending, startTransition] = useTransition();
  const summary = {
    total: items.length,
    active: items.filter((item) => item.status === "ACTIVE").length,
    invited: items.filter((item) => item.status === "INVITED").length,
    suspended: items.filter((item) => item.status === "SUSPENDED").length,
    primary: items.filter((item) => item.isPrimary).length,
  };

  function togglePermission(target: "create" | string, permission: string, checked: boolean) {
    if (target === "create") {
      setCreateDraft((current) => ({
        ...current,
        permissions: checked
          ? [...new Set([...current.permissions, permission])]
          : current.permissions.filter((item) => item !== permission),
      }));
      return;
    }

    setDrafts((current) => ({
      ...current,
      [target]: {
        ...current[target],
        permissions: checked
          ? [...new Set([...(current[target]?.permissions ?? []), permission])]
          : (current[target]?.permissions ?? []).filter((item) => item !== permission),
      },
    }));
  }

  async function submit(payload: DraftState, successMessage: string) {
    const response = await fetch("/api/admin/client-accounts", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(payload),
    });

    const result = (await response.json()) as {
      item?: ClientAccountRow;
      message?: string;
    };

    if (!response.ok || !result.item) {
      throw new Error(result.message || "Čuvanje portal naloga nije uspelo.");
    }

    setItems((current) => {
      const exists = current.some((item) => item.id === result.item!.id);
      return exists
        ? current.map((item) => (item.id === result.item!.id ? result.item! : item))
        : [result.item!, ...current];
    });
    setDrafts((current) => ({
      ...current,
      [result.item!.id]: toDraft(result.item!),
    }));
    setMessage(successMessage);
    router.refresh();
  }

  function handleSaveCreate() {
    startTransition(async () => {
      try {
        await submit(createDraft, `Portal nalog ${createDraft.email} je sačuvan.`);
        setCreateDraft({
          ...emptyDraft,
          companyId: companies[0]?.id ?? "",
        });
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Kreiranje naloga nije uspelo.");
      }
    });
  }

  function handleSaveEdit(id: string) {
    startTransition(async () => {
      try {
        await submit({ ...drafts[id], id }, `Izmene za portal nalog ${drafts[id]?.email} su sačuvane.`);
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Izmena naloga nije uspela.");
      }
    });
  }

  function handleDelete(id: string) {
    const account = items.find((item) => item.id === id);
    const label = account ? `${account.name} (${account.email})` : "ovaj nalog";
    const confirmed = window.confirm(
      `Trajno obrisati portal nalog ${label}?\n\n` +
        "Nalog, njegovi uređaji i notifikacije se brišu i klijent se više neće moći prijaviti. " +
        "Ova radnja se ne može poništiti.",
    );
    if (!confirmed) {
      return;
    }

    startTransition(async () => {
      try {
        const response = await fetch(`/api/admin/client-accounts/${id}`, {
          method: "DELETE",
        });
        const result = (await response.json()) as { message?: string };
        if (!response.ok) {
          throw new Error(result.message || "Brisanje naloga nije uspelo.");
        }
        setItems((current) => current.filter((item) => item.id !== id));
        setDrafts((current) => {
          const next = { ...current };
          delete next[id];
          return next;
        });
        setMessage(`Portal nalog ${label} je obrisan.`);
        router.refresh();
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Brisanje naloga nije uspelo.");
      }
    });
  }

  function handlePasswordReset(id: string) {
    const password = resetPasswords[id]?.trim();
    if (!password) {
      setMessage("Unesite novu lozinku pre resetovanja.");
      return;
    }

    startTransition(async () => {
      try {
        const response = await fetch(`/api/admin/client-accounts/${id}/password`, {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ password }),
        });
        const result = (await response.json()) as { message?: string };
        if (!response.ok) {
          throw new Error(result.message || "Reset lozinke nije uspeo.");
        }
        setResetPasswords((current) => ({ ...current, [id]: "" }));
        setMessage("Portal lozinka je resetovana.");
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Reset lozinke nije uspeo.");
      }
    });
  }

  return (
    <div className="space-y-6">
      <section className="admin-command-shell">
        <div className="admin-command-header">
          <div>
            <p className="eyebrow">Portal nalozi</p>
            <h3 className="mt-3 font-display text-3xl font-semibold text-foreground">
              Klijentski pristup, dozvole i bezbednost naloga
            </h3>
            <p className="mt-3 max-w-3xl text-sm leading-7 text-muted-foreground">
              Kreiraj portal pristup za klijente, kontroliši sekcije koje vide i resetuj lozinke bez izlaska iz 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">Aktivni</div>
              <div className="admin-kpi-value">{summary.active}</div>
            </div>
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Pozvani</div>
              <div className="admin-kpi-value">{summary.invited}</div>
            </div>
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Suspendovani</div>
              <div className="admin-kpi-value">{summary.suspended}</div>
            </div>
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Primarni</div>
              <div className="admin-kpi-value">{summary.primary}</div>
            </div>
          </div>
        </div>
        <p className="eyebrow mt-6">Novi portal nalog</p>
        <div className="mt-5 grid gap-4 lg:grid-cols-2">
          <select
            className="inline-select"
            value={createDraft.companyId}
            onChange={(event) =>
              setCreateDraft((current) => ({ ...current, companyId: event.target.value }))
            }
          >
            {companies.map((company) => (
              <option key={company.id} value={company.id}>
                {company.name}
              </option>
            ))}
          </select>
          <input
            className="inline-input"
            placeholder="Ime kontakta"
            value={createDraft.name}
            onChange={(event) =>
              setCreateDraft((current) => ({ ...current, name: event.target.value }))
            }
          />
          <input
            className="inline-input"
            placeholder="Email"
            value={createDraft.email}
            onChange={(event) =>
              setCreateDraft((current) => ({ ...current, email: event.target.value }))
            }
          />
          <input
            type="password"
            className="inline-input"
            placeholder="Početna lozinka"
            value={createDraft.password}
            onChange={(event) =>
              setCreateDraft((current) => ({ ...current, password: event.target.value }))
            }
          />
        </div>
        <div className="mt-5 grid gap-4 lg:grid-cols-3">
          {CLIENT_PORTAL_PERMISSIONS.map((permission) => (
            <label key={permission.key} className="flex items-start gap-3 rounded-[1.3rem] border border-border bg-white/70 px-4 py-4 text-sm">
              <input
                type="checkbox"
                checked={createDraft.permissions.includes(permission.key)}
                onChange={(event) =>
                  togglePermission("create", permission.key, event.target.checked)
                }
                className="mt-1 size-4"
              />
              <span>
                <span className="font-medium text-foreground">{permission.label}</span>
                <span className="mt-1 block text-xs text-muted-foreground">{permission.key}</span>
              </span>
            </label>
          ))}
        </div>
        <button type="button" className="primary-button mt-5" onClick={handleSaveCreate} disabled={isPending}>
          Kreiraj portal nalog
        </button>
      </section>

      {message ? (
        <div className="rounded-[1.2rem] bg-accent/55 px-4 py-3 text-sm font-medium text-primary">
          {message}
        </div>
      ) : null}

      <section className="admin-section-stack">
        {items.map((item) => {
          const draft = drafts[item.id] ?? toDraft(item);

          return (
            <article key={item.id} className="admin-list-card">
              <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
                <div className="min-w-0 flex-1">
                  <p className="admin-list-card-title">{item.name}</p>
                  <p className="admin-list-card-subtitle">
                    {item.email} · {item.company.name}
                  </p>
                  <div className="mt-3 flex flex-wrap gap-2">
                    <span className="admin-chip">{item.status}</span>
                    <span className="admin-chip">
                      Otvorenih notifikacija: {item.notifications.length}
                    </span>
                    <span className="admin-chip">
                      Poslednja prijava: {formatDate(item.lastLoginAt)}
                    </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}</div>
                    </div>
                    <div className="admin-kpi-card">
                      <div className="admin-kpi-label">Dozvole</div>
                      <div className="admin-kpi-value">{item.permissions.length}</div>
                    </div>
                    <div className="admin-kpi-card">
                      <div className="admin-kpi-label">Notifikacije</div>
                      <div className="admin-kpi-value">{item.notifications.length}</div>
                    </div>
                    <div className="admin-kpi-card">
                      <div className="admin-kpi-label">Kontakt</div>
                      <div className="admin-kpi-value">{item.isPrimary ? "Primarni" : "Sekundarni"}</div>
                    </div>
                  </div>
                </div>
                <div className="admin-list-card-actions">
                  <button
                    type="button"
                    className="primary-button"
                    onClick={() => handleSaveEdit(item.id)}
                    disabled={isPending}
                  >
                    Sačuvaj izmene
                  </button>
                  <button
                    type="button"
                    className="ghost-button text-red-600 hover:bg-red-50"
                    onClick={() => handleDelete(item.id)}
                    disabled={isPending}
                  >
                    Obriši nalog
                  </button>
                </div>
              </div>

              <div className="mt-5 grid gap-4 lg:grid-cols-2">
                <select
                  className="inline-select"
                  value={draft.companyId}
                  onChange={(event) =>
                    setDrafts((current) => ({
                      ...current,
                      [item.id]: { ...draft, companyId: event.target.value },
                    }))
                  }
                >
                  {companies.map((company) => (
                    <option key={company.id} value={company.id}>
                      {company.name}
                    </option>
                  ))}
                </select>
                <select
                  className="inline-select"
                  value={draft.status}
                  onChange={(event) =>
                    setDrafts((current) => ({
                      ...current,
                      [item.id]: { ...draft, status: event.target.value as DraftState["status"] },
                    }))
                  }
                >
                  <option value="INVITED">INVITED</option>
                  <option value="ACTIVE">ACTIVE</option>
                  <option value="SUSPENDED">SUSPENDED</option>
                </select>
              </div>

              <div className="mt-5 grid gap-4 lg:grid-cols-3">
                {CLIENT_PORTAL_PERMISSIONS.map((permission) => (
                  <label key={permission.key} className="flex items-start gap-3 rounded-[1.3rem] border border-border bg-white/70 px-4 py-4 text-sm">
                    <input
                      type="checkbox"
                      checked={draft.permissions.includes(permission.key)}
                      onChange={(event) =>
                        togglePermission(item.id, permission.key, event.target.checked)
                      }
                      className="mt-1 size-4"
                    />
                    <span>
                      <span className="font-medium text-foreground">{permission.label}</span>
                      <span className="mt-1 block text-xs text-muted-foreground">
                        {permission.key}
                      </span>
                    </span>
                  </label>
                ))}
              </div>

              <div className="mt-5 grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto]">
                <input
                  type="password"
                  className="inline-input"
                  placeholder="Nova portal lozinka"
                  value={resetPasswords[item.id] ?? ""}
                  onChange={(event) =>
                    setResetPasswords((current) => ({ ...current, [item.id]: event.target.value }))
                  }
                />
                <button
                  type="button"
                  className="ghost-button"
                  onClick={() => handlePasswordReset(item.id)}
                  disabled={isPending}
                >
                  Resetuj lozinku
                </button>
              </div>
            </article>
          );
        })}
      </section>
    </div>
  );
}