'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 { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
import SamplePaymentCard from '@/app/dashboard/Sample/SamplePaymentCard';
import SampleSecurityCard from '@/app/dashboard/Sample/SampleSecurityCard';
import { COL_QUIZ_LP_QUESTIONS } from '@/constants';
import { Grid } from '@mui/material';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
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 { defaultLpQuestion } from '@/components/dashboard/lp_questions/_constants.ts';
import { Notifications } from '@/components/dashboard/lp_questions/notifications';
import type { LpQuestion } from '@/components/dashboard/lp_questions/type';
import FormLoading from '@/components/loading';

import BasicDetailCard from './BasicDetailCard';
import TitleCard from './TitleCard';

export default function Page(): React.JSX.Element {
  const { t } = useTranslation();
  const router = useRouter();
  //
  const { cat_id: catId } = useParams<{ cat_id: string }>();
  //
  const [showLoading, setShowLoading] = React.useState<boolean>(true);
  const [showError, setShowError] = React.useState({ show: false, detail: '' });

  //
  const [showLessonQuestion, setShowLessonQuestion] = React.useState<LpQuestion>(defaultLpQuestion);

  function handleEditClick() {
    router.push(paths.dashboard.lp_questions.edit(showLessonQuestion.id));
  }

  React.useEffect(() => {
    if (catId) {
      pb.collection(COL_QUIZ_LP_QUESTIONS)
        .getOne(catId)
        .then((model: RecordModel) => {
          setShowLessonQuestion({ ...defaultLpQuestion, ...model });
        })
        .catch((err) => {
          logger.error(err);
          toast(t('list.error'));

          setShowError({ show: true, detail: JSON.stringify(err) });
        })
        .finally(() => {
          setShowLoading(false);
        });
    }
  }, [catId]);

  if (showLoading) return <FormLoading />;
  if (showError.show)
    return (
      <ErrorDisplay
        message={t('error.unable-to-process-request')}
        code="500"
        details={showError.detail}
      />
    );

  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.lp_questions.list}
              sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
              variant="subtitle2"
            >
              <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
              {t('edit.title')}
            </Link>
          </div>
          <Stack
            direction={{ xs: 'column', sm: 'row' }}
            spacing={3}
            sx={{ alignItems: 'flex-start' }}
          >
            <TitleCard lpModel={showLessonQuestion} />
          </Stack>
        </Stack>
        <Grid
          container
          spacing={4}
        >
          <Grid
            lg={4}
            xs={12}
          >
            <Stack spacing={4}>
              <BasicDetailCard
                lpModel={showLessonQuestion}
                handleEditClick={handleEditClick}
              />
              <SampleSecurityCard />
            </Stack>
          </Grid>
          <Grid
            lg={8}
            xs={12}
          >
            <Stack spacing={4}>
              <SamplePaymentCard />
              <SampleAddressCard />
              <Notifications notifications={SampleNotifications} />
            </Stack>
          </Grid>
        </Grid>
      </Stack>
    </Box>
  );
}
