"use client";

import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { ListExportActions } from "@/components/export/ListExportActions";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select, Textarea } from "@/components/ui/Field";
import { CardListSkeleton } from "@/components/ui/Skeleton";
import { ApiError, apiGet, apiPost } from "@/lib/api";

export default function ClassLogsPage() {
  const [classes, setClasses] = useState<Array<{ id: number; name: string }>>([]);
  const [logs, setLogs] = useState<Array<{ id: number; log_date: string; topic?: string; teacher?: { name: string } }>>([]);
  const [classId, setClassId] = useState("");
  const [topic, setTopic] = useState("");
  const [activities, setActivities] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    apiGet<Array<{ id: number; name: string }>>("/class-rooms")
      .then((c) => {
        setClasses(c);
        if (c[0]) setClassId(String(c[0].id));
      })
      .catch(() => setError("خطا در بارگذاری کلاس‌ها"));
  }, []);

  const load = useCallback(async () => {
    if (!classId) return;
    setLoading(true);
    try {
      setLogs(await apiGet(`/class-logs?class_room_id=${classId}`));
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [classId]);

  useEffect(() => {
    load();
  }, [load]);

  const create = async () => {
    try {
      await apiPost("/class-logs", {
        class_room_id: Number(classId),
        log_date: new Date().toISOString().slice(0, 10),
        topic,
        activities,
      });
      setTopic("");
      setActivities("");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  return (
    <AppShell title="دفتر کلاسی" subtitle="فعالیت روزانه">
      {error ? <Alert tone="error">{error}</Alert> : null}
      <div className="mb-4 flex flex-wrap items-end justify-between gap-2 rounded-2xl border border-[var(--border)] bg-white p-4">
        <div className="min-w-[200px]">
          <Field label="کلاس">
            <Select value={classId} onChange={(e) => setClassId(e.target.value)}>
              {classes.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </Select>
          </Field>
        </div>
        <ListExportActions
          exportPath="/class-logs/export"
          filters={{ class_room_id: classId || undefined }}
          filenameBase="class-logs-export"
          onError={setError}
        />
      </div>
      <div className="mb-4 space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
        <Field label="سرفصل"><Input value={topic} onChange={(e) => setTopic(e.target.value)} /></Field>
        <Field label="فعالیت‌ها"><Textarea value={activities} onChange={(e) => setActivities(e.target.value)} rows={3} /></Field>
        <Button onClick={create}>ثبت دفتر</Button>
      </div>
      {loading ? (
        <CardListSkeleton rows={4} />
      ) : (
        <div className="space-y-2">
          {logs.map((log) => (
            <div key={log.id} className="rounded-2xl border border-[var(--border)] bg-white p-4">
              <div className="font-semibold">{log.topic || "بدون عنوان"}</div>
              <div className="text-xs text-[var(--muted)]">{log.log_date} · {log.teacher?.name}</div>
            </div>
          ))}
        </div>
      )}
    </AppShell>
  );
}