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

'use client';

import Link from 'next/link';
import ActionButton from '@/components/ActionButton';

export default function AssignmentDetailPage() {
  const assignment = {
    id: 1,
    title: 'Analisis Gerakan Tari Piring',
    description: 'Buatlah makalah analisis mengenai teknik dasar gerakan Tari Piring. Fokuskan analisis pada: 1. Teknik memegang piring, 2. Koordinasi gerakan tangan dan kaki, 3. Pola lantai dasar. Panjang makalah minimal 500 kata.',
    class: 'Tari Tradisional Indonesia 101',
    educator: 'Sarah Pendidik',
    dueDate: '2025-12-05T23:59:00Z',
    maxScore: 100,
    status: 'Belum Diserahkan',
    mySubmission: null,
  };

  return (
    <div className="max-w-4xl mx-auto space-y-6">
      <div className="flex justify-between items-center">
        <Link href="/dashboard/assignments" className="text-gray-400 hover:text-white flex items-center">
          <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
          Kembali ke Daftar Tugas
        </Link>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Assignment Details */}
        <div className="lg:col-span-2 space-y-6">
          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
            <div className="flex justify-between items-start mb-4">
              <span className="px-3 py-1  text-blue-200 text-xs rounded-full border border-blue-500/30">
                {assignment.class}
              </span>
              <span className="text-sm text-gray-400">
                Oleh {assignment.educator}
              </span>
            </div>

            <h1 className="text-2xl font-bold text-white mb-4">{assignment.title}</h1>

            <div className="prose prose-invert max-w-none mb-6">
              <p className="text-gray-300 leading-relaxed">
                {assignment.description}
              </p>
            </div>

            <div className="border-t border-white/10 pt-4 grid grid-cols-2 gap-4">
              <div>
                <p className="text-sm text-gray-400 mb-1">Tenggat Waktu</p>
                <p className="text-white font-medium">
                  {new Date(assignment.dueDate).toLocaleString()}
                </p>
              </div>
              <div>
                <p className="text-sm text-gray-400 mb-1">Nilai Maksimal</p>
                <p className="text-white font-medium">{assignment.maxScore}</p>
              </div>
            </div>
          </div>
        </div>

        {/* Submission Sidebar */}
        <div className="lg:col-span-1">
          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 sticky top-6">
            <h3 className="text-lg font-semibold text-white mb-4">Pengumpulan Tugas</h3>

            <div className="mb-6">
              <p className="text-sm text-gray-400 mb-2">Status:</p>
              <span className="px-3 py-1 bg-yellow-900/50 text-yellow-200 text-sm rounded border border-yellow-500/30 inline-block w-full text-center">
                {assignment.status}
              </span>
            </div>

            <div className="space-y-4">
              <div className="border-2 border-dashed  rounded-lg p-6 text-center hover:bg-white/5 transition-colors cursor-pointer">
                <svg className="w-8 h-8 text-gray-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                </svg>
                <p className="text-sm text-gray-300 font-medium">Upload File</p>
                <p className="text-xs text-gray-500 mt-1">Word (DOCX) atau PDF</p>
              </div>

              <ActionButton className="w-full">
                Serahkan Tugas
              </ActionButton>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}