lms/resources/js/pages/student/tabs-content/course-certificate.tsx

import DynamicCertificate from '@/components/dynamic-certificate';
import DynamicMarksheet from '@/components/dynamic-marksheet';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Card, CardContent } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { StudentCourseProps } from '@/types/page';
import { usePage } from '@inertiajs/react';
import { format, parseISO } from 'date-fns';
import { Award, ClipboardList, Lock } from 'lucide-react';

const CourseCertificate = () => {
   const { props } = usePage<StudentCourseProps>();
   const { course, watchHistory, completion, certificateTemplate, marksheetTemplate, studentMarks, auth, system } = props;

   const showCourseCertificate = system?.fields?.show_course_certificate ?? true;
   const showCourseMarksheet = system?.fields?.show_course_marksheet ?? true;

   if (!showCourseCertificate && !showCourseMarksheet) {
      return (
         <Alert>
            <Lock className="h-4 w-4" />
            <AlertTitle>Zertifikatbereich deaktiviert</AlertTitle>
            <AlertDescription>Für diesen Kurs sind Zertifikat und Notenblatt aktuell deaktiviert.</AlertDescription>
         </Alert>
      );
   }

   // Check if course is completed
   const isCompleted = watchHistory?.completion_date || completion?.completion === 100;

   if (!isCompleted) {
      const title = showCourseCertificate && showCourseMarksheet ? 'Zertifikat & Notenblatt gesperrt' : showCourseCertificate ? 'Zertifikat gesperrt' : 'Notenblatt gesperrt';
      const unlockText = showCourseCertificate && showCourseMarksheet ? 'Schließe alle Kursmodule ab, um dein Zertifikat und Notenblatt freizuschalten.' : showCourseCertificate ? 'Schließe alle Kursmodule ab, um dein Zertifikat freizuschalten.' : 'Schließe alle Kursmodule ab, um dein Notenblatt freizuschalten.';

      return (
         <Alert>
            <Lock className="h-4 w-4" />
            <AlertTitle>{title}</AlertTitle>
            <AlertDescription>
               {unlockText} Dein aktueller Fortschritt: {completion?.completion || 0}%
            </AlertDescription>
         </Alert>
      );
   }

   const completionDate = watchHistory?.completion_date
      ? format(parseISO(watchHistory.completion_date), 'MMMM d, yyyy')
      : format(new Date(), 'MMMM d, yyyy');

   // Check if both are unavailable
   const certificateAvailable = showCourseCertificate && !!certificateTemplate;
   const marksheetAvailable = showCourseMarksheet && !!marksheetTemplate;

   if (!certificateAvailable && !marksheetAvailable) {
      const title = showCourseCertificate && showCourseMarksheet ? 'Kein Zertifikat oder Notenblatt verfügbar' : showCourseCertificate ? 'Kein Zertifikat verfügbar' : 'Kein Notenblatt verfügbar';
      const description = showCourseCertificate && showCourseMarksheet ? 'Der Dozent hat für diesen Kurs noch keine Zertifikate oder Notenblätter eingerichtet.' : showCourseCertificate ? 'Der Dozent hat für diesen Kurs noch keine Zertifikate eingerichtet.' : 'Der Dozent hat für diesen Kurs noch keine Notenblätter eingerichtet.';

      return (
         <div className="p-6">
            <Card>
               <CardContent className="flex flex-col items-center justify-center p-12 text-center">
                  <Award className="text-muted-foreground mb-4 h-16 w-16" />
                  <h3 className="mb-2 text-xl font-semibold">{title}</h3>
                  <p className="text-muted-foreground">{description}</p>
               </CardContent>
            </Card>
         </div>
      );
   }

   return (
      <div>
         <Tabs defaultValue={showCourseCertificate ? 'certificate' : 'marksheet'} className="w-full">
            <TabsList className={`mb-6 grid h-11 w-full ${showCourseCertificate && showCourseMarksheet ? 'grid-cols-2' : 'grid-cols-1'}`}>
               {showCourseCertificate && (
                  <TabsTrigger value="certificate" className="flex h-9 cursor-pointer items-center gap-2">
                     <Award className="h-4 w-4" />
                     Zertifikat
                  </TabsTrigger>
               )}
               {showCourseMarksheet && (
                  <TabsTrigger value="marksheet" className="flex h-9 cursor-pointer items-center gap-2">
                     <ClipboardList className="h-4 w-4" />
                     Notenblatt
                  </TabsTrigger>
               )}
            </TabsList>

            {showCourseCertificate && (
               <TabsContent value="certificate">
                  {!certificateTemplate ? (
                     <Card>
                        <CardContent className="flex flex-col items-center justify-center p-12 text-center">
                           <Award className="text-muted-foreground mb-4 h-16 w-16" />
                           <h3 className="mb-2 text-xl font-semibold">Kein Zertifikat verfügbar</h3>
                           <p className="text-muted-foreground">Der Dozent hat für diesen Kurs noch keine Zertifikate eingerichtet.</p>
                        </CardContent>
                     </Card>
                  ) : (
                     <DynamicCertificate
                        template={certificateTemplate}
                        courseName={course.title}
                        studentName={auth.user.name}
                        completionDate={completionDate}
                     />
                  )}
               </TabsContent>
            )}

            {showCourseMarksheet && (
               <TabsContent value="marksheet">
                  {!marksheetTemplate || !studentMarks ? (
                     <Card>
                        <CardContent className="flex flex-col items-center justify-center p-12 text-center">
                           <ClipboardList className="text-muted-foreground mb-4 h-16 w-16" />
                           <h3 className="mb-2 text-xl font-semibold">Kein Notenblatt verfügbar</h3>
                           <p className="text-muted-foreground">
                              {!marksheetTemplate
                                 ? 'Der Dozent hat für diesen Kurs noch keine Notenblätter eingerichtet.'
                                 : 'Keine Notendaten verfügbar. Schließe Aufgaben und Tests ab, um dein Notenblatt zu sehen.'}
                           </p>
                        </CardContent>
                     </Card>
                  ) : (
                     <DynamicMarksheet
                        template={marksheetTemplate}
                        courseName={course.title}
                        studentName={auth.user.name}
                        completionDate={completionDate}
                        studentMarks={studentMarks}
                     />
                  )}
               </TabsContent>
            )}
         </Tabs>
      </div>
   );
};

export default CourseCertificate;