'use client';

import * as React from 'react';
import RouterLink from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
import BasicDetailCard from '@/app/dashboard/Sample/BasicDetailCard';
import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
import SamplePaymentCard from '@/app/dashboard/Sample/SamplePaymentCard';
import SampleSecurityCard from '@/app/dashboard/Sample/SampleSecurityCard';
import SampleTitleCard from '@/app/dashboard/Sample/SampleTitleCard';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Grid from '@mui/material/Unstable_Grid2';
import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
import type { RecordModel } from 'pocketbase';
import { useTranslation } from 'react-i18next';

import { paths } from '@/paths';
import { logger } from '@/lib/default-logger';
import { pb } from '@/lib/pb';
import { toast } from '@/components/core/toaster';
import ErrorDisplay from '@/components/dashboard/error';
import { defaultLessonType, LessonTypeDefaultValue } from '@/components/dashboard/lesson_type/_constants';
import { type LessonType } from '@/components/dashboard/lesson_type/lesson-type';
import { Notifications } from '@/components/dashboard/lesson_type/notifications';
import FormLoading from '@/components/loading';

export default function Page(): React.JSX.Element {
  const { t } = useTranslation(['lesson_type']);
  const router = useRouter();
  //
  const { type_id: typeId } = useParams<{ type_id: string }>();

  //
  const [showLoading, setShowLoading] = React.useState<boolean>(true);
  const [showError, setShowError] = React.useState<boolean>(false);
  const [errorDetails, setErrorDetails] = React.useState('');

  //
  const [showLessonType, setShowLessonType] = React.useState<LessonType>(LessonTypeDefaultValue);

  function handleEditClick(): void {
    router.push(paths.dashboard.lesson_types.edit(showLessonType.id));
  }

  React.useEffect(() => {
    if (typeId) {
      pb.collection('LessonsTypes')
        .getOne(typeId)
        .then((model: RecordModel) => {
          setShowLessonType({ ...defaultLessonType, ...model });
        })
        .catch((err) => {
          logger.error(err);
          toast(t('dashboard.lessonTypes.list.error'));
          setErrorDetails(err);
          setShowError(true);
        })
        .finally(() => {
          setShowLoading(false);
        });
    }
  }, [typeId]);

  if (showLoading) return <FormLoading />;

  if (showError)
    return (
      <ErrorDisplay
        message={t('error.unable-to-process-request', { ns: 'common' })}
        code="500"
        details={JSON.stringify(errorDetails, null, 2)}
      />
    );

  return (
    <Box
      sx={{
        maxWidth: 'var(--Content-maxWidth)',
        m: 'var(--Content-margin)',
        p: 'var(--Content-padding)',
        width: 'var(--Content-width)',
      }}
    >
      <Stack spacing={4}>
        <Stack spacing={3}>
          <div>
            <Link
              color="text.primary"
              component={RouterLink}
              href={paths.dashboard.lesson_types.list}
              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
              variant="subtitle2"
            >
              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
              {t('list.title')}
            </Link>
          </div>
          <Stack
            direction={{ xs: 'column', sm: 'row' }}
            spacing={3}
            sx={{ alignItems: 'flex-start' }}
          >
            <SampleTitleCard />
          </Stack>
        </Stack>
        <Grid
          container
          spacing={4}
        >
          <Grid
            lg={4}
            xs={12}
          >
            <Stack spacing={4}>
              <BasicDetailCard
                lpCatId={showLessonType.id}
                handleEditClick={handleEditClick}
              />
              <SampleSecurityCard />
            </Stack>
          </Grid>
          <Grid
            lg={8}
            xs={12}
          >
            <Stack spacing={4}>
              <SamplePaymentCard />
              <SampleAddressCard />
              <Notifications notifications={SampleNotifications} />
            </Stack>
          </Grid>
        </Grid>
      </Stack>
    </Box>
  );
}
