"use client";

import { useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Textarea } from "@/components/ui/Field";
import { ApiError, apiPost } from "@/lib/api";

export default function AssignmentsPage() {
  const [title, setTitle] = useState("");
  const [instructions, setInstructions] = useState("");
  const [contextId, setContextId] = useState("");
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

  const create = async () => {
    if (!title.trim() || !contextId) return;
    setSaving(true);
    setError(null);
    setMessage(null);
    try {
      await apiPost("/assignments", {
        context_type: "class_room",
        context_id: Number(contextId),
        title: title.trim(),
        instructions,
      });
      setTitle("");
      setInstructions("");
      setMessage("تکلیف با موفقیت ثبت شد.");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSaving(false);
    }
  };

  return (
    <AppShell title="تکالیف" subtitle="ایجاد تکلیف کلاسی">
      {error ? <Alert tone="error">{error}</Alert> : null}
      {message ? <Alert tone="success">{message}</Alert> : null}
      <div className="space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
        <Field label="شناسه کلاس (class_room_id)">
          <Input value={contextId} onChange={(e) => setContextId(e.target.value)} />
        </Field>
        <Field label="عنوان"><Input value={title} onChange={(e) => setTitle(e.target.value)} /></Field>
        <Field label="دستورالعمل"><Textarea value={instructions} onChange={(e) => setInstructions(e.target.value)} rows={4} /></Field>
        <Button onClick={create} disabled={saving}>ثبت تکلیف</Button>
      </div>
    </AppShell>
  );
}