"use client";

import Link from "next/link";
import { useParams, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Textarea } from "@/components/ui/Field";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { StudentAnalyticsPanel } from "@/components/teacher/StudentAnalyticsPanel";
import { StudentAttendanceHistory } from "@/components/teacher/StudentAttendanceHistory";
import { StudentAvatar } from "@/components/students/StudentAvatar";
import { parentTabHref, type GuardianLink } from "@/components/students/ParentsTab";
import { TeacherPanel } from "@/components/teacher/ui/TeacherPanel";
import { TeacherShell } from "@/components/teacher/TeacherShell";
import { ApiError, apiGet, apiPatch } from "@/lib/api";
import { isTeacherRole } from "@/lib/teacher";

interface ProfilePayload {
  student: {
    id: number;
    student_code?: string | null;
    first_name?: string | null;
    last_name?: string | null;
    avatar_path?: string | null;
    national_code?: string | null;
    birth_date?: string | null;
    student_mobile?: string | null;
    guardian_name?: string | null;
    guardian_mobile?: string | null;
  };
  teacher_note?: string | null;
  enrollments: Array<{
    enrollment_id: number;
    status: string;
    class_room?: { id: number; name?: string; code?: string; grade_level_name?: string } | null;
  }>;
}

function ProfileContent({
  data,
  error,
  loading,
  classRoomId,
  guardians,
  onNoteSaved,
  teacherView,
}: {
  data: ProfilePayload | null;
  error: string | null;
  loading: boolean;
  classRoomId?: number | null;
  guardians: GuardianLink[];
  onNoteSaved: () => void;
  teacherView?: boolean;
}) {
  const [note, setNote] = useState("");
  const [savingNote, setSavingNote] = useState(false);

  useEffect(() => {
    setNote(data?.teacher_note ?? "");
  }, [data?.teacher_note]);

  const saveNote = async () => {
    if (!data) return;
    setSavingNote(true);
    try {
      await apiPatch(`/teacher/students/${data.student.id}/note`, { note });
      onNoteSaved();
    } finally {
      setSavingNote(false);
    }
  };

  const name = data
    ? [data.student.first_name, data.student.last_name].filter(Boolean).join(" ") || "—"
    : "";

  return (
    <>
      {error ? <Alert tone="error">{error}</Alert> : null}
      {loading ? (
        <PageContentSkeleton rows={4} />
      ) : data ? (
        <div className="space-y-4">
          <TeacherPanel>
            <div className="flex items-center gap-4">
              <StudentAvatar
                name={name}
                src={data.student.avatar_path}
              />
              <div>
                <h2 className="text-lg font-bold">{name}</h2>
                <p className="text-sm text-[var(--muted)]">کد: {data.student.student_code ?? "—"}</p>
                {data.student.national_code ? (
                  <p className="text-sm text-slate-500">کد ملی: {data.student.national_code}</p>
                ) : null}
              </div>
            </div>
          </TeacherPanel>

          <TeacherPanel>
            <h3 className="mb-2 text-sm font-bold">تماس</h3>
            <div className="grid gap-2 text-sm sm:grid-cols-2">
              <div>دانش‌آموز: {data.student.student_mobile ?? "—"}</div>
              {guardians.length > 0 ? (
                guardians.map((g) => (
                  <div key={g.user_id}>
                    {teacherView ? (
                      <span>
                        {g.relationship_label ?? "ولی"} ({g.name})
                      </span>
                    ) : (
                      <Link
                        href={parentTabHref(g.user_id)}
                        className="text-primary hover:underline"
                      >
                        {g.relationship_label ?? "ولی"} ({g.name})
                      </Link>
                    )}
                    : {g.mobile ?? "—"}
                  </div>
                ))
              ) : (
                <div>
                  والد ({data.student.guardian_name ?? "—"}): {data.student.guardian_mobile ?? "—"}
                </div>
              )}
            </div>
            {classRoomId ? (
              <div className="mt-3">
                <Link href={`/social`} className="text-sm text-teal-700 hover:underline">
                  ارتباط با والدین از طریق شبکه اجتماعی کلاس
                </Link>
                <p className="mt-1 text-xs text-slate-400">پیامک خودکار والدین در فاز بعدی فعال می‌شود.</p>
              </div>
            ) : null}
          </TeacherPanel>

          <TeacherPanel>
            <h3 className="mb-2 text-sm font-bold">سوابق کلاس‌ها</h3>
            <ul className="space-y-1 text-sm">
              {data.enrollments.map((e) => (
                <li key={e.enrollment_id}>
                  {e.class_room?.code ?? e.class_room?.name} — {e.status === "active" ? "جاری" : e.status}
                  {e.class_room?.grade_level_name ? ` · ${e.class_room.grade_level_name}` : ""}
                </li>
              ))}
            </ul>
          </TeacherPanel>

          <Field label="یادداشت خصوصی معلم">
            <Textarea rows={3} value={note} onChange={(e) => setNote(e.target.value)} />
          </Field>
          <Button onClick={() => void saveNote()} loading={savingNote}>
            ذخیره یادداشت
          </Button>

          <StudentAttendanceHistory studentProfileId={data.student.id} classRoomId={classRoomId ?? undefined} />

          <StudentAnalyticsPanel studentProfileId={data.student.id} classRoomId={classRoomId ?? undefined} />

          {data.enrollments.find((e) => e.status === "active")?.class_room ? (
            <div className="flex flex-wrap gap-2">
              <Link
                href={`/teacher/classes/${classRoomId ?? data.enrollments.find((e) => e.status === "active")!.class_room!.id}?tab=attendance`}
              >
                <Button variant="secondary">حضور و غیاب</Button>
              </Link>
              <Link
                href={`/teacher/classes/${classRoomId ?? data.enrollments.find((e) => e.status === "active")!.class_room!.id}?tab=grades`}
              >
                <Button variant="secondary">نمرات</Button>
              </Link>
            </div>
          ) : null}
        </div>
      ) : null}
    </>
  );
}

export default function StudentProfilePage() {
  const { id } = useParams<{ id: string }>();
  const searchParams = useSearchParams();
  const classRoomId = searchParams.get("class_room_id");
  const teacherView = isTeacherRole();
  const [data, setData] = useState<ProfilePayload | null>(null);
  const [guardians, setGuardians] = useState<GuardianLink[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const payload = await apiGet<ProfilePayload>(`/teacher/students/${id}/profile`);
      setData(payload);
      try {
        const sis = await apiGet<{ guardians?: GuardianLink[] }>(`/students/${id}`);
        setGuardians(sis.guardians ?? []);
      } catch {
        setGuardians([]);
      }
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [id]);

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

  const roomId = classRoomId ? Number(classRoomId) : null;
  const studentName = data
    ? [data.student.first_name, data.student.last_name].filter(Boolean).join(" ")
    : undefined;

  if (teacherView) {
    return (
      <TeacherShell
        title="پروفایل دانش‌آموز"
        showBack
        breadcrumbLabels={{ student: studentName, detail: data?.student.student_code }}
      >
        <ProfileContent
          data={data}
          error={error}
          loading={loading}
          classRoomId={roomId}
          guardians={guardians}
          onNoteSaved={load}
          teacherView
        />
      </TeacherShell>
    );
  }

  return (
    <AppShell
      title="پروفایل دانش‌آموز"
      showBack
      breadcrumbLabels={{ student: studentName, detail: data?.student.student_code }}
    >
      <ProfileContent
        data={data}
        error={error}
        loading={loading}
        classRoomId={roomId}
        guardians={guardians}
        onNoteSaved={load}
      />
    </AppShell>
  );
}