'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/PaymentCard';
import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';

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 { config } from '@/config';
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 { Notifications } from '@/components/dashboard/student/notifications';
import FormLoading from '@/components/loading';
import BasicDetailCard from './BasicDetailCard';
import TitleCard from './TitleCard';
import { defaultStudent } from '@/components/dashboard/student/_constants';
import type { Student } from '@/components/dashboard/student/type.d';
import { COL_STUDENTS } from '@/constants';

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

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

  React.useEffect(() => {
    if (customerId) {
      pb.collection(COL_STUDENTS)
        .getOne(customerId)
        .then((model: RecordModel) => {
          setShowLessonCategory({ ...defaultStudent, ...model });
        })
        .catch((err) => {
          logger.error(err);
          toast(t('list.error'));

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

  // return <>{JSON.stringify({ showError, showLessonCategory }, null, 2)}</>;

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