'use client';

import { useCallback, useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useForm, Controller } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { ChevronLeft, ChevronRight, FileText, AlertCircle, CheckCircle2, Save, Send, Loader2, User, CalendarDays } from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';
import { useToast } from '@/components/school/toast-context';
import { Label } from '@/components/ui/label';

type Category = { id: string; icon: string; name: string; description?: string | null };
type Classroom = { id: string; name: string; branch?: { id: string; name: string } | null };
type Student = { id: string; firstName: string; lastName: string; classroomId?: string | null };

type ExistingCard = {
  id: string; studentId: string; classroomId?: string | null; date: string; status: string;
  entries: { categoryId: string; value: string; category: { id: string; name: string; icon: string } }[];
  student: { id: string; firstName: string; lastName: string };
};

const stepOneSchema = z.object({
  studentId: z.string().min(1, 'Öğrenci seçin'),
  date: z.string().min(1, 'Tarih seçin'),
});

type Props = {
  apiBase: '/v1/admin' | '/v1/teacher';
  backHref: string;
  editId?: string;
  defaultStudentId?: string;
  defaultStudentName?: string;
  defaultClassroomId?: string;
  defaultDate?: string;
};

export function ReportCardForm({
  apiBase,
  backHref,
  editId,
  defaultStudentId,
  defaultStudentName,
  defaultClassroomId,
  defaultDate,
}: Props) {
  const router = useRouter();
  const { toast } = useToast();
  const isEdit = Boolean(editId);
  const hasPreselected = Boolean(defaultStudentId && defaultDate);

  const [step, setStep] = useState(isEdit || hasPreselected ? 2 : 1);
  const [categories, setCategories] = useState<Category[]>([]);
  const [classrooms, setClassrooms] = useState<Classroom[]>([]);
  const [students, setStudents] = useState<Student[]>([]);
  const [loading, setLoading] = useState(true);
  const [existingCard, setExistingCard] = useState<ExistingCard | null>(null);
  const [conflictId, setConflictId] = useState<string | null>(null);

  // Step 1 form
  const { control, watch, handleSubmit: handleStep1Submit, formState: { errors: s1errors } } =
    useForm({
      resolver: zodResolver(stepOneSchema),
      defaultValues: {
        studentId: defaultStudentId ?? '',
        date: defaultDate ?? new Date().toISOString().split('T')[0],
      },
    });

  const selStudentId = watch('studentId');
  const selDate = watch('date');

  // Step 2: kategori değerleri
  const [entries, setEntries] = useState<Record<string, string>>({});
  const [saving, setSaving] = useState(false);

  // Seçili sınıf (öğrenci filtreleme için)
  const [selClassroom, setSelClassroom] = useState(defaultClassroomId ?? '');

  const load = useCallback(async () => {
    setLoading(true);
    const catPath = `${apiBase}/report-cards/categories`;

    if (isEdit && editId) {
      const [catRes, cardRes] = await Promise.all([
        apiFetchJson<Category[]>(catPath),
        apiFetchJson<ExistingCard>(`${apiBase}/report-cards/${editId}`),
      ]);
      if (!catRes.error) setCategories(catRes.data ?? []);
      if (!cardRes.error && cardRes.data) {
        setExistingCard(cardRes.data);
        const entryMap: Record<string, string> = {};
        for (const e of cardRes.data.entries) {
          entryMap[e.categoryId] = e.value;
        }
        setEntries(entryMap);
      }
    } else {
      if (apiBase === '/v1/admin') {
        const [catRes, clsRes, stuRes] = await Promise.all([
          apiFetchJson<Category[]>(catPath),
          apiFetchJson<Classroom[]>('/v1/admin/classrooms?limit=500'),
          apiFetchJson<Student[]>('/v1/admin/students?limit=500'),
        ]);
        if (!catRes.error) setCategories(catRes.data ?? []);
        if (!clsRes.error) setClassrooms(clsRes.data ?? []);
        if (!stuRes.error) setStudents(stuRes.data ?? []);
      } else {
        const [catRes, clsRes] = await Promise.all([
          apiFetchJson<Category[]>(catPath),
          apiFetchJson<Classroom[]>('/v1/teacher/classrooms'),
        ]);
        if (!catRes.error) setCategories(catRes.data ?? []);
        if (!clsRes.error) {
          setClassrooms(clsRes.data ?? []);
          if (!selClassroom && clsRes.data && clsRes.data.length > 0) {
            setSelClassroom(clsRes.data[0].id);
          }
        }
        // Öğrenciler öğretmen için sınıfa göre çekilecek
        const firstClassroomId = selClassroom || clsRes.data?.[0]?.id;
        if (firstClassroomId) {
          const stuRes = await apiFetchJson<Student[]>(`/v1/admin/students?classroomId=${firstClassroomId}&limit=100`);
          if (!stuRes.error) setStudents(stuRes.data ?? []);
        }
      }
    }
    setLoading(false);
  }, [apiBase, isEdit, editId, selClassroom]); // eslint-disable-line

  useEffect(() => { load(); }, []); // eslint-disable-line

  // Öğrenci seçilince öğrencileri sınıfa göre filtrele (admin)
  useEffect(() => {
    if (apiBase === '/v1/teacher' && selClassroom) {
      apiFetchJson<Student[]>(`/v1/admin/students?classroomId=${selClassroom}&limit=100`)
        .then((res) => { if (!res.error) setStudents(res.data ?? []); });
    }
  }, [selClassroom, apiBase]);

  const classroomStudents = selClassroom
    ? students.filter((s) => s.classroomId === selClassroom)
    : students;

  const onStep1 = handleStep1Submit(() => {
    setStep(2);
  });

  const filledCount = Object.values(entries).filter((v) => v.trim()).length;

  const handleSave = async (status: 'DRAFT' | 'PUBLISHED') => {
    if (filledCount === 0) {
      toast({ title: 'Uyarı', description: 'En az bir alan doldurulmalıdır', variant: 'destructive' });
      return;
    }
    setSaving(true);

    const entryList = categories
      .filter((c) => entries[c.id]?.trim())
      .map((c) => ({ categoryId: c.id, value: entries[c.id].trim() }));

    let res;
    if (isEdit && editId) {
      res = await apiFetchJson(`${apiBase}/report-cards/${editId}`, {
        method: 'PATCH',
        body: JSON.stringify({ entries: entryList, status }),
      });
    } else {
      res = await apiFetchJson(`${apiBase}/report-cards`, {
        method: 'POST',
        body: JSON.stringify({
          studentId: selStudentId,
          date: selDate,
          classroomId: selClassroom || undefined,
          entries: entryList,
          status,
        }),
      });
    }

    setSaving(false);

    if (res.error) {
      // Çakışma kontrolü
      try {
        const parsed = JSON.parse(res.error);
        if (parsed.existingId) {
          setConflictId(parsed.existingId);
          return;
        }
      } catch { /* not JSON */ }
      toast({ title: 'Hata', description: res.error, variant: 'destructive' });
      return;
    }

    toast({ title: status === 'PUBLISHED' ? 'Karne veliye gönderildi' : 'Taslak kaydedildi' });
    router.push(backHref);
  };

  if (loading) {
    return (
      <div className="font-urbanist space-y-5 pb-8">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-widest text-primary dark:text-teal-400">Günlük Karne</p>
          <div className="mt-1 h-7 w-56 animate-pulse rounded-lg bg-zinc-100 dark:bg-zinc-800" />
        </div>
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="h-28 animate-pulse rounded-xl bg-zinc-100 dark:bg-zinc-800" />
          ))}
        </div>
      </div>
    );
  }

  const studentLabel = isEdit && existingCard
    ? `${existingCard.student.firstName} ${existingCard.student.lastName}`
    : defaultStudentName && hasPreselected
      ? defaultStudentName
      : students.find((s) => s.id === selStudentId)
        ? `${students.find((s) => s.id === selStudentId)!.firstName} ${students.find((s) => s.id === selStudentId)!.lastName}`
        : '';

  const displayDate = isEdit && existingCard
    ? existingCard.date
    : selDate;

  return (
    <div className="font-urbanist space-y-5 pb-8">

      {/* ── Header ──────────────────────────────────────────── */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-widest text-primary dark:text-teal-400">
            Günlük Karne
          </p>
          <h1 className="mt-0.5 text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
            {isEdit ? 'Karne Düzenle' : step === 1 ? 'Yeni Karne' : 'Karne Oluştur'}
          </h1>
        </div>

        <div className="flex items-center gap-2">
          {/* Step 2'de geri butonu (sadece preselected değilse) */}
          {step === 2 && !isEdit && !hasPreselected && (
            <button
              type="button"
              onClick={() => setStep(1)}
              className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-zinc-200 bg-white px-3 text-xs font-medium text-zinc-600 shadow-sm transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
            >
              <ChevronLeft className="h-3.5 w-3.5" />
              Geri
            </button>
          )}
          {/* Geri linki */}
          <a
            href={backHref}
            className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-zinc-200 bg-white px-3 text-xs font-medium text-zinc-600 shadow-sm transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
          >
            <ChevronLeft className="h-3.5 w-3.5" />
            Karneler
          </a>
        </div>
      </div>

      {/* ── Çakışma uyarısı ─────────────────────────────────── */}
      {conflictId && (
        <div className="flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/60 dark:bg-amber-950/20">
          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
          <div className="flex-1">
            <p className="text-sm font-semibold text-amber-800 dark:text-amber-300">Bu tarihte karne zaten var</p>
            <p className="mt-0.5 text-xs text-amber-600 dark:text-amber-400">Seçili tarihte bu öğrenci için karne kaydı mevcut.</p>
            <button
              type="button"
              onClick={() => router.push(`${backHref.replace('/report-cards', '')}/report-cards/new?editId=${conflictId}`)}
              className="mt-2 text-xs font-semibold text-amber-700 underline hover:no-underline dark:text-amber-400"
            >
              Mevcut karneyi düzenle →
            </button>
          </div>
        </div>
      )}

      {/* ── ADIM 1 — Öğrenci & Tarih (sadece preselected değilse gösterilir) ── */}
      {step === 1 && !isEdit && (
        <div className="overflow-hidden rounded-xl border border-zinc-200/90 bg-white shadow-theme-sm dark:border-zinc-800/90 dark:bg-zinc-900/40">
          <div className="border-b border-zinc-100 px-5 py-3.5 dark:border-zinc-800">
            <p className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">Öğrenci ve Tarih</p>
          </div>
          <div className="space-y-4 p-5">
            {/* Sınıf filtresi */}
            <div className="space-y-1.5">
              <Label className="text-xs font-semibold text-zinc-500 dark:text-zinc-400">Sınıf (filtre)</Label>
              <select
                value={selClassroom}
                onChange={(e) => setSelClassroom(e.target.value)}
                className="h-9 w-full rounded-lg border border-zinc-200 bg-zinc-50 px-3 text-sm text-zinc-900 focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
              >
                <option value="">Tüm sınıflar</option>
                {classrooms.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.branch?.name ? `${c.branch.name} / ` : ''}{c.name}
                  </option>
                ))}
              </select>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              {/* Öğrenci */}
              <div className="space-y-1.5">
                <Label className="text-xs font-semibold text-zinc-500 dark:text-zinc-400">
                  Öğrenci <span className="text-red-500">*</span>
                </Label>
                <Controller
                  control={control}
                  name="studentId"
                  render={({ field }) => (
                    <select
                      {...field}
                      className="h-9 w-full rounded-lg border border-zinc-200 bg-zinc-50 px-3 text-sm text-zinc-900 focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
                    >
                      <option value="">Öğrenci seçin</option>
                      {classroomStudents.map((s) => (
                        <option key={s.id} value={s.id}>{s.firstName} {s.lastName}</option>
                      ))}
                    </select>
                  )}
                />
                {s1errors.studentId && (
                  <p className="text-xs text-red-500">{s1errors.studentId.message}</p>
                )}
              </div>

              {/* Tarih */}
              <div className="space-y-1.5">
                <Label className="text-xs font-semibold text-zinc-500 dark:text-zinc-400">
                  Tarih <span className="text-red-500">*</span>
                </Label>
                <Controller
                  control={control}
                  name="date"
                  render={({ field }) => (
                    <input
                      {...field}
                      type="date"
                      className="h-9 w-full rounded-lg border border-zinc-200 bg-zinc-50 px-3 text-sm text-zinc-900 focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
                    />
                  )}
                />
                {s1errors.date && (
                  <p className="text-xs text-red-500">{s1errors.date.message}</p>
                )}
              </div>
            </div>
          </div>

          <div className="flex justify-end border-t border-zinc-100 bg-zinc-50/60 px-5 py-3.5 dark:border-zinc-800 dark:bg-zinc-800/30">
            <button
              type="button"
              onClick={onStep1}
              className="inline-flex h-8 items-center gap-1.5 rounded-full bg-primary px-4 text-[12px] font-semibold text-white shadow-sm transition hover:bg-[#1c5f66] dark:bg-teal-600 dark:hover:bg-teal-500"
            >
              Devam Et
              <ChevronRight className="h-3.5 w-3.5" />
            </button>
          </div>
        </div>
      )}

      {/* ── ADIM 2 — Kategoriler ────────────────────────────── */}
      {(step === 2 || isEdit) && (
        <div className="space-y-4">

          {/* Öğrenci & tarih bilgi bandı */}
          <div className="flex flex-wrap items-center gap-3 rounded-xl border border-zinc-200/90 bg-white px-5 py-3.5 shadow-theme-sm dark:border-zinc-800/90 dark:bg-zinc-900/40">
            <div className="flex items-center gap-2 text-sm">
              <User className="h-3.5 w-3.5 text-zinc-400" />
              <span className="font-semibold text-zinc-800 dark:text-zinc-100">{studentLabel}</span>
            </div>
            <div className="h-3.5 w-px bg-zinc-200 dark:bg-zinc-700" />
            <div className="flex items-center gap-2 text-sm">
              <CalendarDays className="h-3.5 w-3.5 text-zinc-400" />
              <span className="text-zinc-500 dark:text-zinc-400">
                {displayDate
                  ? new Date(displayDate + 'T00:00:00').toLocaleDateString('tr-TR', {
                      weekday: 'long', day: 'numeric', month: 'long', year: 'numeric',
                    })
                  : '—'}
              </span>
            </div>
            <div className="ml-auto text-[11px] font-semibold text-zinc-400 dark:text-zinc-500">
              {filledCount}/{categories.length} alan
            </div>
          </div>

          {categories.length === 0 ? (
            <div className="rounded-xl border-2 border-dashed border-zinc-200 py-16 text-center dark:border-zinc-700">
              <FileText className="mx-auto mb-3 h-8 w-8 text-zinc-200 dark:text-zinc-700" strokeWidth={1.5} />
              <p className="font-semibold text-zinc-500 dark:text-zinc-400">Kategori tanımlı değil</p>
              <p className="mt-1 text-sm text-zinc-400 dark:text-zinc-500">Yönetici önce karne kategorilerini oluşturmalıdır.</p>
            </div>
          ) : (
            <>
              {/* Kategori kartları */}
              <div className="space-y-3">
                {categories.map((cat) => {
                  const val = entries[cat.id] ?? '';
                  const charCount = val.length;
                  const isFilled = val.trim().length > 0;

                  return (
                    <div
                      key={cat.id}
                      className={`overflow-hidden rounded-xl border transition-colors ${
                        isFilled
                          ? 'border-teal-200/80 bg-white dark:border-teal-800/40 dark:bg-zinc-900/40'
                          : 'border-zinc-200/90 bg-white dark:border-zinc-800/90 dark:bg-zinc-900/40'
                      } shadow-theme-sm`}
                    >
                      {/* Kart başlığı */}
                      <div className={`flex items-center gap-3 border-b px-4 py-3 ${
                        isFilled
                          ? 'border-teal-100 bg-teal-50/50 dark:border-teal-800/30 dark:bg-teal-950/20'
                          : 'border-zinc-100 bg-zinc-50/60 dark:border-zinc-800 dark:bg-zinc-800/30'
                      }`}>
                        <span className="text-lg leading-none">{cat.icon}</span>
                        <div className="min-w-0 flex-1">
                          <p className="text-sm font-semibold text-zinc-800 dark:text-zinc-100">{cat.name}</p>
                          {cat.description && (
                            <p className="text-xs text-zinc-400 dark:text-zinc-500">{cat.description}</p>
                          )}
                        </div>
                        {isFilled && (
                          <CheckCircle2 className="h-4 w-4 shrink-0 text-teal-500 dark:text-teal-400" />
                        )}
                      </div>

                      {/* Textarea */}
                      <div className="relative p-3">
                        <textarea
                          value={val}
                          onChange={(e) => setEntries((prev) => ({ ...prev, [cat.id]: e.target.value }))}
                          maxLength={500}
                          rows={3}
                          placeholder={cat.description ? `İpucu: ${cat.description}` : 'Notunuzu buraya yazın…'}
                          className="w-full resize-none rounded-lg border-0 bg-transparent px-1 py-1 text-sm text-zinc-800 placeholder-zinc-400 outline-none transition focus:outline-none dark:text-zinc-200 dark:placeholder-zinc-500"
                        />
                        <span className={`absolute bottom-4 right-4 text-[10px] font-medium tabular-nums ${
                          charCount > 450 ? 'text-amber-500' : 'text-zinc-300 dark:text-zinc-700'
                        }`}>
                          {charCount}/500
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* Aksiyonlar */}
              <div className="flex items-center justify-between rounded-xl border border-zinc-200/90 bg-white px-5 py-4 shadow-theme-sm dark:border-zinc-800/90 dark:bg-zinc-900/40">
                <p className="text-xs text-zinc-500 dark:text-zinc-400">
                  {filledCount === 0 ? (
                    <span className="text-red-500">En az 1 alan doldurulmalıdır</span>
                  ) : (
                    <span className="text-emerald-600 dark:text-emerald-400">
                      {filledCount}/{categories.length} alan hazır
                    </span>
                  )}
                </p>
                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    disabled={saving || filledCount === 0}
                    onClick={() => handleSave('DRAFT')}
                    className="inline-flex h-8 items-center gap-1.5 rounded-full border border-zinc-200 bg-white px-4 text-[12px] font-semibold text-zinc-600 shadow-sm transition hover:bg-zinc-50 disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"
                  >
                    {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : <Save className="h-3 w-3" />}
                    Taslak
                  </button>
                  <button
                    type="button"
                    disabled={saving || filledCount === 0}
                    onClick={() => handleSave('PUBLISHED')}
                    className="inline-flex h-8 items-center gap-1.5 rounded-full bg-primary px-4 text-[12px] font-semibold text-white shadow-sm transition hover:bg-[#1c5f66] disabled:opacity-50 dark:bg-teal-600 dark:hover:bg-teal-500"
                  >
                    {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : <Send className="h-3 w-3" />}
                    Veliye Gönder
                  </button>
                </div>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}