import { BrowserLink } from "@metis/core/client";
import { EntityListStatus } from "@repo/rdx-ui/components/entity-list-status";
import { FormSectionTitle } from "@repo/rdx-ui/components/form-section-title";
import { Button } from "@repo/shadcn-ui/components/button";
import { useTranslation } from "react-i18next";

import { MailboxUseEditorDialog } from "../../../mailbox-uses";
import { useCompanyListState } from "../../../shared/hooks/use-company-list-state";
import { useMailboxRelationsController } from "../controllers";
import type { MailboxRelationsProps } from "../types";

export function MailboxRelations(props: MailboxRelationsProps) {
  const { company, mailboxId } = props;
  const { editor, setEditor, query, uses, edited } = useMailboxRelationsController(props);
  const { t } = useTranslation("companies");
  const { state, denied } = useCompanyListState([query]);
  const available = state.status !== "loading" && state.status !== "unavailable";

  return (
    <section className="space-y-3 border-t pt-4">
      <div className="flex items-center justify-between gap-3">
        <FormSectionTitle layout="inline">{t("people")}</FormSectionTitle>
        <Button disabled={!available} onClick={() => setEditor("new")} size="sm" variant="outline">
          {t("mailbox.linkPerson")}
        </Button>
      </div>
      <EntityListStatus
        onRetry={denied ? undefined : () => query.refetch()}
        retryLabel={t("retry")}
        state={state}
      />
      <ul className="space-y-2">
        {available &&
          uses.map((item) => (
            <li
              className="flex flex-wrap items-center justify-between gap-3 text-sm"
              data-entity-id={item.id}
              key={item.id}
            >
              <span>
                {company.people.find((person) => person.id === item.values.personId) ? (
                  <BrowserLink href={`/companies/${company.id}/people/${item.values.personId}`}>
                    {company.people.find((person) => person.id === item.values.personId)?.name}
                  </BrowserLink>
                ) : (
                  "—"
                )}{" "}
                · {item.values.startDate} → {item.values.endDate ?? t("mailbox.openPeriod")}
              </span>
              {!item.values.endDate && (
                <Button onClick={() => setEditor(item.id)} size="sm" variant="outline">
                  {t("mailbox.closeUse")}
                </Button>
              )}
            </li>
          ))}
      </ul>
      {available && uses.length === 0 && (
        <p className="text-sm text-muted-foreground">{t("mailbox.noUses")}</p>
      )}
      {editor && (
        <MailboxUseEditorDialog
          company={company}
          mailboxId={mailboxId}
          onOpenChange={(open) => {
            if (!open) {
              setEditor(undefined);
            }
          }}
          onSaved={() => setEditor(undefined)}
          use={edited}
        />
      )}
    </section>
  );
}