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

'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
export default function RegisterRolePage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [selectedRole, setSelectedRole] = useState('');
  
  const [formData, setFormData] = useState({
    institution: '',
    className: '', // This will store class code for students
    teachingLevel: '',
    purpose: '',
    nim: '',
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await fetch('/api/auth/register-role', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          role: selectedRole,
          ...formData,
        }),
        credentials: 'include',
      });

      const result = await response.json();

      if (result.success) {
        router.push('/dashboard');
        router.refresh();
      } else {
        console.error('Failed to register role:', result.message);
        // You could show an error message to the user here
      }
    } catch (error) {
      console.error('Error registering role:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleRoleSelect = (role: string) => {
    setSelectedRole(role);
    setFormData({
      institution: '',
      className: '',
      teachingLevel: '',
      purpose: '',
      nim: '',
    });
  };

  return (
    <div className="max-w-2xl mx-auto">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-white mb-2">Pilih Role Anda</h1>
        <p className="text-gray-400">Upgrade akun Anda untuk mengakses fitur lengkap</p>
      </div>

      {!selectedRole ? (
        <div className="space-y-4">
          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-all cursor-pointer" onClick={() => handleRoleSelect('CALON_PENDIDIK')}>
            <div className="flex items-start space-x-4">
              <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                </svg>
              </div>
              <div>
                <h3 className="text-lg font-semibold text-white mb-2">Calon Pendidik</h3>
                <p className="text-gray-400 text-sm mb-3">Bergabung sebagai peserta didik untuk mengakses materi pembelajaran, mengerjakan tugas, dan berpartisipasi dalam forum diskusi kelas.</p>
                <ul className="text-gray-300 text-sm space-y-1">
                  <li>• Akses video pembelajaran</li>
                  <li>• Bergabung dengan kelas</li>
                  <li>• Mengerjakan tugas</li>
                  <li>• Forum diskusi kelas</li>
                </ul>
              </div>
            </div>
          </div>

          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-all cursor-pointer" onClick={() => handleRoleSelect('PENDIDIK')}>
            <div className="flex items-start space-x-4">
              <div className="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a2 2 0 012-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm7-2a2 2 0 11-4 0v4a2 2 0 014 0V9z" />
                </svg>
              </div>
              <div>
                <h3 className="text-lg font-semibold text-white mb-2">Pendidik</h3>
                <p className="text-gray-400 text-sm mb-3">Daftar sebagai instruktur untuk membuat kelas, mengelola konten pembelajaran, dan membimbing calon pendidik.</p>
                <ul className="text-gray-300 text-sm space-y-1">
                  <li>• Buat dan kelola kelas</li>
                  <li>• Upload video pembelajaran</li>
                  <li>• Berikan tugas dan revisi</li>
                  <li>• Moderasi forum kelas</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="bg-white/5 rounded-lg p-4 mb-6">
            <p className="text-sm text-gray-300">
              Anda memilih role: <span className="font-semibold text-white">
                {selectedRole === 'CALON_PENDIDIK' ? 'Calon Pendidik' : 'Pendidik'}
              </span>
            </p>
            <button
              type="button"
              onClick={() => setSelectedRole('')}
              className="text-sm text-gold-400 hover:text-gold-300 mt-2"
            >
              ← Pilih role lain
            </button>
          </div>

          <div className="space-y-2">
            <Label htmlFor="institution" className="text-gray-300">
              Instansi
            </Label>
            <Input
              id="institution"
              value={formData.institution}
              onChange={(e) => setFormData({ ...formData, institution: e.target.value })}
              required
              placeholder="Nama instansi pendidikan Anda"
              className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
            />
          </div>

          {selectedRole === 'CALON_PENDIDIK' ? (
            <>
              <div className="space-y-2">
                <Label htmlFor="classCode" className="text-gray-300">
                  Kode Kelas
                </Label>
                <Input
                  id="classCode"
                  value={formData.className}
                  onChange={(e) => setFormData({ ...formData, className: e.target.value })}
                  required
                  placeholder="Masukkan kode kelas yang diberikan oleh pendidik"
                  className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
                />
                <p className="text-xs text-gray-400">
                  Hubungi pendidik Anda untuk mendapatkan kode kelas
                </p>
              </div>

              <div className="space-y-2">
                <Label htmlFor="nim" className="text-gray-300">
                  NIM (Nomor Induk Mahasiswa)
                </Label>
                <Input
                  id="nim"
                  value={formData.nim}
                  onChange={(e) => setFormData({ ...formData, nim: e.target.value })}
                  required
                  placeholder="Masukkan NIM Anda"
                  className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
                />
              </div>
            </>
          ) : (
            <>
              <div className="space-y-2">
                <Label htmlFor="className" className="text-gray-300">
                  Nama Kelas
                </Label>
                <Input
                  id="className"
                  value={formData.className}
                  onChange={(e) => setFormData({ ...formData, className: e.target.value })}
                  required
                  placeholder="Nama kelas yang akan Anda buat"
                  className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="teachingLevel" className="text-gray-300">
                  Jenjang Mengajar
                </Label>
                <Textarea
                  id="teachingLevel"
                  rows={3}
                  value={formData.teachingLevel}
                  onChange={(e) => setFormData({ ...formData, teachingLevel: e.target.value })}
                  required
                  placeholder="Jelaskan jenjang mengajar Anda (contoh: Tari Tradisional, Tari Modern, dll)"
                  className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="purpose" className="text-gray-300">
                  Tujuan Bergabung
                </Label>
                <Textarea
                  id="purpose"
                  rows={3}
                  value={formData.purpose}
                  onChange={(e) => setFormData({ ...formData, purpose: e.target.value })}
                  required
                  placeholder="Jelaskan tujuan Anda bergabung sebagai pendidik"
                  className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
                />
              </div>
            </>
          )}

          <div className="pt-4 flex justify-end space-x-3">
            <Button
              type="button"
              variant="ghost"
              onClick={() => setSelectedRole('')}
              disabled={loading}
              className="text-gray-300 hover:text-white"
            >
              Batal
            </Button>
            <Button
              type="submit"
              disabled={loading}
              className="bg-gold-500 hover:bg-gold-600 text-navy-900"
            >
              {loading ? 'Mendaftar...' : 'Daftar Sekarang'}
            </Button>
          </div>
        </form>
      )}
    </div>
  );
}