import { inventoryApi, inventoryKeys } from "@metis/assets/client";
import { Button } from "@repo/shadcn-ui/components/button";
import { Card, CardContent } from "@repo/shadcn-ui/components/card";
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { Input } from "@repo/shadcn-ui/components/input";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import type { CompanyDTO } from "../../common";
import { accessApi, accessKeys } from "../access/access-api";
import { accessLabel } from "../access/access-labels";
import { FolderMappingsPage } from "../folders/folder-mappings-page";
import { MailConfigurationsPage } from "../mail/mail-configurations-page";
import { PrinterConfigurationsPage } from "../printers/printer-configurations-page";

import { ProfileFeedback } from "./profile-feedback";
import { profileApi, profileKeys } from "./work-profile-api";
import { WorkProfileForm } from "./work-profile-form";

export function WorkProfilesPage({
  company,
  csrfToken,
}: {
  company: CompanyDTO;
  csrfToken: string;
}) {
  const { t, i18n } = useTranslation("companies");
  const [configuration, setConfiguration] = useState<{
    kind: "folders" | "mail" | "printers";
    profileId: string;
  }>();
  const [editor, setEditor] = useState<string>();
  const [view, setView] = useState<string>();
  const [search, setSearch] = useState("");
  const [archived, setArchived] = useState(false);
  const query = useQuery({
    queryKey: profileKeys.company(company.id),
    queryFn: () => profileApi.get(company.id),
  });
  const inventory = useQuery({
    queryKey: inventoryKeys.company(company.id),
    queryFn: () => inventoryApi.get(company.id),
  });
  const access = useQuery({
    queryKey: accessKeys.scope(company.id),
    queryFn: () => accessApi.request(company.id),
  });
  const profiles = query.data?.profiles ?? [];
  const edited = profiles.find((item) => item.id === editor);
  const viewed = profiles.find((item) => item.id === view);
  const person = (id: string) => company.people.find((item) => item.id === id)?.name ?? id;
  const asset = (id: string) =>
    inventory.data?.assets.find((item) => item.id === id)?.values.name ?? id;
  const account = (id: string | null) => {
    const item = access.data?.items.find((item) => item.id === id);
    return item
      ? accessLabel(item, access.data?.items ?? [], company.people)
      : (id ?? t("profiles.noAccount"));
  };
  const filtered = profiles.filter(
    (item) =>
      (archived || item.values.active) &&
      [item.values.name, person(item.values.personId), asset(item.values.assetId)].some((value) =>
        value.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase())
      )
  );
  const ready = [query.data, inventory.data, access.data].every(Boolean);
  if (configuration) {
    return (
      <ProfileConfigurations
        company={company}
        csrfToken={csrfToken}
        onBack={() => setConfiguration(undefined)}
        selection={configuration}
      />
    );
  }
  return (
    <div className="space-y-5">
      <header className="flex flex-wrap items-center justify-between gap-4">
        <h2 className="text-xl font-semibold">{t("profiles.title")}</h2>
        <Button disabled={!ready} onClick={() => setEditor("new")}>
          {t("profiles.new")}
        </Button>
      </header>
      <Input
        aria-label={t("profiles.search")}
        onChange={(event) => setSearch(event.target.value)}
        placeholder={t("profiles.search")}
        value={search}
      />
      <label className="flex items-center gap-2 text-sm">
        <input
          checked={archived}
          onChange={(event) => setArchived(event.target.checked)}
          type="checkbox"
        />
        {t("profiles.showArchived")}
      </label>
      {(query.isPending || inventory.isPending || access.isPending) && (
        <p role="status">{t("loading")}</p>
      )}
      <ProfileFeedback error={query.error ?? inventory.error ?? access.error} />
      {(query.isError || inventory.isError || access.isError) && (
        <Button
          onClick={() => {
            Promise.all([query.refetch(), inventory.refetch(), access.refetch()]).catch(
              () => undefined
            );
          }}
          variant="outline"
        >
          {t("retry")}
        </Button>
      )}
      {ready && (
        <Card>
          <CardContent className="divide-y pt-3">
            {!filtered.length && (
              <p className="py-4 text-muted-foreground">
                {t(profiles.length ? "noResults" : "profiles.empty")}
              </p>
            )}
            {filtered.map((item) => (
              <div className="flex flex-wrap items-center justify-between gap-4 py-4" key={item.id}>
                <div className="min-w-0 break-words">
                  <h3 className="font-medium">
                    {item.values.name} ·{" "}
                    {t(item.values.active ? "profiles.active" : "profiles.inactive")}
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    {person(item.values.personId)} · {asset(item.values.assetId)}
                  </p>
                  <p className="mt-1 text-sm">{account(item.values.accountId)}</p>
                  {item.needsReview && (
                    <p className="mt-2 text-sm text-amber-700">{t("profiles.review")}</p>
                  )}
                </div>
                <div className="flex flex-wrap gap-2">
                  <Button
                    onClick={() => setConfiguration({ kind: "printers", profileId: item.id })}
                    size="sm"
                    variant="outline"
                  >
                    {t("printers.title")}
                  </Button>
                  <Button
                    onClick={() => setConfiguration({ kind: "folders", profileId: item.id })}
                    size="sm"
                    variant="outline"
                  >
                    {t("folders.title")}
                  </Button>
                  <Button
                    onClick={() => setConfiguration({ kind: "mail", profileId: item.id })}
                    size="sm"
                    variant="outline"
                  >
                    {t("mail.title")}
                  </Button>
                  <Button onClick={() => setView(item.id)} size="sm" variant="outline">
                    {t("profiles.history")}
                  </Button>
                  <Button onClick={() => setEditor(item.id)} size="sm" variant="outline">
                    {t("edit")}
                  </Button>
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      )}
      {editor && (
        <FormDialog
          cancelLabel={t("cancel")}
          formActions
          onOpenChange={(open) => {
            if (!open) {
              setEditor(undefined);
            }
          }}
          open
          title={t(edited ? "profiles.edit" : "profiles.new")}
          wide
        >
          <WorkProfileForm
            company={company}
            csrfToken={csrfToken}
            onSaved={() => setEditor(undefined)}
            profile={edited}
          />
        </FormDialog>
      )}
      {viewed && (
        <FormDialog
          cancelLabel={t("close")}
          onOpenChange={(open) => {
            if (!open) {
              setView(undefined);
            }
          }}
          open
          title={t("profiles.history")}
          wide
        >
          <div className="space-y-4">
            <p className="font-medium">
              {person(viewed.values.personId)} · {asset(viewed.values.assetId)}
            </p>
            <p>
              {t("profiles.account")}: {account(viewed.values.accountId)}
            </p>
            {viewed.needsReview && <p className="text-amber-700">{t("profiles.review")}</p>}
            <p className="text-sm text-muted-foreground">{t("profiles.unknownConfiguration")}</p>
            <div>
              <h3 className="font-medium">{t("profiles.stations")}</h3>
              <p className="text-sm">
                {inventory.data?.workstations
                  .filter(
                    (station) =>
                      station.values.active &&
                      [...station.values.assetIds, ...station.values.sharedAssetIds].includes(
                        viewed.values.assetId
                      )
                  )
                  .map((station) => station.values.name)
                  .join(" · ") || t("profiles.noStation")}
              </p>
            </div>
            <ol className="space-y-3">
              {[...viewed.history].reverse().map((revision) => (
                <li className="rounded-md border p-3 text-sm" key={revision.id}>
                  <p className="font-medium">
                    {new Intl.DateTimeFormat(i18n.language, {
                      dateStyle: "medium",
                      timeStyle: "short",
                    }).format(new Date(revision.recordedAt))}{" "}
                    · {revision.actorName}
                  </p>
                  <p>
                    {revision.values.name} ·{" "}
                    {t(revision.values.active ? "profiles.active" : "profiles.inactive")}
                  </p>
                  <p>{account(revision.values.accountId)}</p>
                  {revision.values.notes && (
                    <p className="mt-2 whitespace-pre-wrap">{revision.values.notes}</p>
                  )}
                </li>
              ))}
            </ol>
          </div>
        </FormDialog>
      )}
    </div>
  );
}

function ProfileConfigurations({
  company,
  csrfToken,
  selection,
  onBack,
}: {
  company: CompanyDTO;
  csrfToken: string;
  selection: { kind: "folders" | "mail" | "printers"; profileId: string };
  onBack: () => void;
}) {
  const { t } = useTranslation("companies");
  const props = { company, csrfToken, initialProfileId: selection.profileId };
  return (
    <div className="space-y-4">
      <Button onClick={onBack} variant="outline">
        {t("profiles.title")}
      </Button>
      {selection.kind === "folders" && <FolderMappingsPage {...props} />}
      {selection.kind === "mail" && <MailConfigurationsPage {...props} />}
      {selection.kind === "printers" && <PrinterConfigurationsPage {...props} />}
    </div>
  );
}