// React hooks ile durum yönetimi
import React, { useState, useEffect } from 'react';

const KodlamaÖdevi = ({ odevId, ogrenciId }) => {
  const [odev, setOdev] = useState(null);
  const [gonderim, setGonderim] = useState('');
  const [geriBildirim, setGeriBildirim] = useState(null);
  const [yukleniyor, setYukleniyor] = useState(true);
  
  useEffect(() => {
    // Ödev detaylarını getir
    const veriGetir = async () => {
      try {
        const yanit = await fetch(
          `/api/odevler/${odevId}`
        );
        const veri = await yanit.json();
        setOdev(veri);
      } catch (hata) {
        console.error("Hata:", hata);
      } finally {
        setYukleniyor(false);
      }
    };
    
    veriGetir();
  }, [odevId]);
  
  const formGonder = async (e) => {
    e.preventDefault();
    
    try {
      const sonuc = await fetch('/api/gonderimler', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          odevId,
          ogrenciId,
          kod: gonderim
        })
      });
      
      const geriBildirimVerisi = await sonuc.json();
      setGeriBildirim(geriBildirimVerisi);
    } catch (hata) {
      setGeriBildirim({ hata: hata.message });
    }
  };
  
  return (
    <div className="odev-kutusu">
      {yukleniyor ? (
        <div>Ödev yükleniyor...</div>
      ) : (
        <>
          <h2>{odev.baslik}</h2>
          <div>{odev.aciklama}</div>
          <form onSubmit={formGonder}>
            <textarea
              value={gonderim}
              onChange={(e) => setGonderim(e.target.value)}
              rows={10}
              className="kod-editoru"
              placeholder="Kodunuzu buraya yazın..."
            />
            <button type="submit">Çözümü Gönder</button>
          </form>
        </>
      )}
    </div>
  );
};