import { api } from "~/utils/api";
import { LoadingPage } from "~/components/loading";
import type { UsersId } from "~/schemas/public/Users";
import { ServizioContainer } from "~/components/servizio/main";
import { AccordionComp } from "~/components/accordionComp";
import { useTranslation } from "~/providers/I18nProvider";
import AnalyticsChart from "~/components/analyticsChart";

export const AdminDashboard = () => {
  const { data: stats, isLoading } = api.stats.adminDashStats.useQuery();

  if (isLoading) return <LoadingPage />;
  return (
    <div className="mx-1 flex-1 overflow-auto">
      <div className="mx-auto pt-4">
        <div className="mx-3 items-start justify-between pb-3 md:flex">
          <div className="flex max-w-lg items-center gap-3">
            <h3 className="text-2xl font-bold">Admin Dashboard</h3>
          </div>
        </div>
        {!stats ? (
          <div className="text-red-500">Errore caricamento statistiche</div>
        ) : (
          <div className="flex h-full w-full flex-col gap-4 px-2 pt-4">
            <div className="flex w-full justify-center">
              <AnalyticsChart
                title="Utenti registrati"
                timeserie={stats.userTimeserie}
              />
            </div>
            <div className="flex w-full justify-center">
              <AnalyticsChart
                title="Ordini creati"
                timeserie={stats.orderTimeserie}
              />
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export const UserDashboard = ({ userId }: { userId: UsersId }) => {
  const { data: servizi, isLoading: loadingServizi } =
    api.servizio.getAllServizioAnnunci.useQuery({ userId });
  const { t } = useTranslation();
  return (
    <div className="mx-1 flex-1 overflow-auto">
      <div className="mx-auto pt-4">
        <div className="mx-3 items-start justify-between md:flex">
          <div className="flex max-w-lg items-center gap-3">
            <h3 className="text-2xl font-bold">Le tue ricerche</h3>
          </div>
        </div>

        <div className="flex flex-col space-y-5 px-2">
          {loadingServizi ? (
            <LoadingPage />
          ) : (
            servizi?.map((servizio, idx) => (
              <ServizioContainer
                key={idx}
                servizio={servizio}
                userId={userId}
                isAdmin={false}
              />
            ))
          )}
        </div>
        <AccordionComp
          texts={t.area_riservata.dash_accordion_minifaq}
          className="w-full max-w-full px-2 pt-4"
        />
      </div>
    </div>
  );
};