/**
 * File: page.tsx
 * Created by: AI Assistant
 * Date: 2025-11-29
 * Purpose: Assignment list page for kreatiVortex platform
 * Part of: kreatiVortex - Platform Pembelajaran Tari Online
 */

'use client';

import Link from 'next/link';
import ActionButton from '@/components/ActionButton';
import { useFetch } from '@/hooks/useFetch';

interface AssignmentData {
  id: string;
  title: string;
  class: {
    name: string;
  };
  dueDate: string;
  status?: string; // Add logic to determine status
  maxScore: number;
}

export default function AssignmentPage() {
  const { data: assignments, loading } = useFetch<AssignmentData[]>('/api/assignments');

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-white">Tugas Saya</h1>
          <p className="text-gray-400">Kelola dan kumpulkan tugas-tugas Anda</p>
        </div>
        {/* Only educators should see this button in real app */}
        <Link href="/dashboard/assignments/new">
          <ActionButton>
            Buat Tugas Baru
          </ActionButton>
        </Link>
      </div>

      {loading ? (
        <div className="text-center text-gray-400 py-12">Loading...</div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {assignments?.map((assignment) => (
            <div key={assignment.id} className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-all cursor-pointer group">
              <div className="flex justify-between items-start mb-4">
                <span className="text-xs text-gray-400 font-medium bg-white/10 px-2 py-1 rounded">
                  {assignment.class.name}
                </span>
                {/* Status placeholder - needs logic */}
                <span className={`px-2 py-1 text-xs rounded border bg-yellow-900/50 text-yellow-200 border-yellow-500/30`}>
                  Pending
                </span>
              </div>
              
              <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-gold-400 transition-colors">
                {assignment.title}
              </h3>
              
              <div className="mb-4">
                <p className="text-sm text-gray-400">Tenggat Waktu:</p>
                <p className="text-white font-medium">{new Date(assignment.dueDate).toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</p>
              </div>
              
              <div className="flex justify-between items-center pt-4 border-t border-white/10">
                <div className="text-sm">
                  <span className="text-gray-400">Nilai Maks: </span>
                  <span className="text-white font-bold">{assignment.maxScore}</span>
                </div>
                <Link href={`/dashboard/assignments/${assignment.id}`}>
                  <span className="text-gold-400 hover:text-gold-300 text-sm font-medium flex items-center">
                    Detail
                    <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </span>
                </Link>
              </div>
            </div>
          ))}
          {(!assignments || assignments.length === 0) && (
            <div className="col-span-full text-center py-12 text-gray-400">
              Belum ada tugas yang tersedia.
            </div>
          )}
        </div>
      )}
    </div>
  );
}