import { CompaniesWorkspace } from "@metis/companies/client";
import { IdentityWorkspace } from "@metis/identity/client";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@repo/shadcn-ui/components/select";
import { useId, useState } from "react";
import { useTranslation } from "react-i18next";

export function App() {
  const { t, i18n } = useTranslation("core");
  const languageOptions = ["es", "en"].map((value) => ({
    value,
    label: t(`languageNames.${value}`),
  }));
  const [languageError, setLanguageError] = useState(false);
  const languageLabelId = useId();

  return (
    <div className="min-h-screen bg-background">
      <header className="border-b border-border bg-card">
        <div className="flex items-center justify-between gap-3 px-4 py-3">
          <span className="text-xl font-semibold tracking-tight text-foreground">
            Metis Desk<span className="ml-1 text-primary">.</span>
          </span>
          <div className="flex items-center gap-3 text-sm text-muted-foreground">
            <span id={languageLabelId}>{t("language")}</span>
            <Select
              items={languageOptions}
              onValueChange={(language) => {
                if (language !== "es" && language !== "en") {
                  return;
                }
                setLanguageError(false);
                i18n
                  .changeLanguage(language)
                  .then(() => {
                    document.documentElement.lang = i18n.resolvedLanguage ?? "es";
                  })
                  .catch(() => setLanguageError(true));
              }}
              value={i18n.resolvedLanguage ?? "es"}
            >
              <SelectTrigger aria-labelledby={languageLabelId} className="min-w-28">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {languageOptions.map((language) => (
                  <SelectItem key={language.value} value={language.value}>
                    {language.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
        {languageError && (
          <p className="px-6 pb-4 text-destructive" role="alert">
            {t("languageError")}
          </p>
        )}
      </header>
      <IdentityWorkspace
        renderWorkspace={(session, accountNavigation) => (
          <CompaniesWorkspace accountNavigation={accountNavigation} csrfToken={session.csrfToken} />
        )}
      >
        {null}
      </IdentityWorkspace>
    </div>
  );
}