"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";
import { getAllCourseSlugs } from "@/lib/data/courseCatalog";
import { createTeacherCourse } from "@/lib/data/teacherCourses";
import type { CourseLevel } from "@/types/course";

const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];

export default function TeacherNewCourseForm() {
  const router = useRouter();
  const [title, setTitle] = useState("");
  const [level, setLevel] = useState<CourseLevel>("Beginner");
  const [summary, setSummary] = useState("");
  const [instructor, setInstructor] = useState("");
  const [weeks, setWeeks] = useState(4);
  const [error, setError] = useState<string | null>(null);

  const submit = (event: FormEvent) => {
    event.preventDefault();
    setError(null);

    const cleanTitle = title.trim();
    const cleanSummary = summary.trim();
    const cleanInstructor = instructor.trim();

    if (!cleanTitle || !cleanSummary || !cleanInstructor) {
      setError("Title, summary, and instructor are required.");
      return;
    }

    const created = createTeacherCourse(
      {
        title: cleanTitle,
        level,
        summary: cleanSummary,
        instructor: cleanInstructor,
        weeks: Math.max(1, weeks),
      },
      getAllCourseSlugs(),
    );

    router.push(`/teacher/courses/${created.slug}/edit`);
  };

  return (
    <form className="mx-auto max-w-2xl space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" onSubmit={submit}>
      <h1 className="text-2xl font-bold text-slate-900">Create Course</h1>

      <label className="block">
        <span className="mb-1 block text-sm text-slate-700">Title</span>
        <input
          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
          onChange={(event) => setTitle(event.target.value)}
          value={title}
        />
      </label>

      <label className="block">
        <span className="mb-1 block text-sm text-slate-700">Level</span>
        <select
          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
          onChange={(event) => setLevel(event.target.value as CourseLevel)}
          value={level}
        >
          {levels.map((item) => (
            <option key={item} value={item}>
              {item}
            </option>
          ))}
        </select>
      </label>

      <label className="block">
        <span className="mb-1 block text-sm text-slate-700">Summary</span>
        <textarea
          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
          onChange={(event) => setSummary(event.target.value)}
          rows={3}
          value={summary}
        />
      </label>

      <label className="block">
        <span className="mb-1 block text-sm text-slate-700">Instructor</span>
        <input
          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
          onChange={(event) => setInstructor(event.target.value)}
          value={instructor}
        />
      </label>

      <label className="block">
        <span className="mb-1 block text-sm text-slate-700">Weeks</span>
        <input
          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
          min={1}
          onChange={(event) => setWeeks(Number(event.target.value))}
          type="number"
          value={weeks}
        />
      </label>

      {error ? <p className="text-sm text-red-600">{error}</p> : null}

      <button className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
        Create course
      </button>
    </form>
  );
}