"use client";

import { useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import { PageHeader } from "@/components/shared/page-header";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { LoadingSpinner } from "@/components/ui/loading";
import { coursesApi, CreateCourseDto } from "@/lib/api-client";
import { ArrowLeft, Save, GraduationCap } from "lucide-react";
import Link from "next/link";

export default function NewCoursePage() {
  const router = useRouter();
  const [formData, setFormData] = useState<CreateCourseDto>({
    title: "",
    description: "",
    thumbnailUrl: "",
  });

  const createMutation = useMutation({
    mutationFn: () => coursesApi.create(formData),
    onSuccess: (response) => {
      router.push(`/courses/${response.data.id}`);
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    createMutation.mutate();
  };

  return (
    <div className="space-y-6">
      <PageHeader title="Create Course">
        <Link href="/courses">
          <Button variant="outline">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Courses
          </Button>
        </Link>
      </PageHeader>

      <form onSubmit={handleSubmit}>
        <div className="grid gap-6 lg:grid-cols-3">
          {/* Main Form */}
          <Card className="lg:col-span-2">
            <CardHeader>
              <CardTitle>Course Details</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <label className="text-sm font-medium">Title</label>
                <Input
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  placeholder="e.g., Introduction to Safety Protocols"
                  required
                />
              </div>

              <div>
                <label className="text-sm font-medium">Description</label>
                <Textarea
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  placeholder="Describe what students will learn in this course..."
                  className="min-h-[120px]"
                  required
                />
              </div>

              <div>
                <label className="text-sm font-medium">Thumbnail URL (Optional)</label>
                <Input
                  value={formData.thumbnailUrl || ""}
                  onChange={(e) => setFormData({ ...formData, thumbnailUrl: e.target.value })}
                  placeholder="https://example.com/image.jpg"
                />
                <p className="text-xs text-muted-foreground mt-1">
                  Enter a URL for the course thumbnail image
                </p>
              </div>
            </CardContent>
          </Card>

          {/* Preview */}
          <Card className="lg:col-span-1">
            <CardHeader>
              <CardTitle>Preview</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="rounded-lg border overflow-hidden">
                <div className="aspect-video bg-muted flex items-center justify-center">
                  {formData.thumbnailUrl ? (
                    <img
                      src={formData.thumbnailUrl}
                      alt="Preview"
                      className="w-full h-full object-cover"
                      onError={(e) => {
                        (e.target as HTMLImageElement).style.display = "none";
                      }}
                    />
                  ) : (
                    <GraduationCap className="h-12 w-12 text-muted-foreground" />
                  )}
                </div>
                <div className="p-4">
                  <h3 className="font-semibold line-clamp-1">
                    {formData.title || "Course Title"}
                  </h3>
                  <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
                    {formData.description || "Course description will appear here..."}
                  </p>
                </div>
              </div>

              <div className="mt-6 space-y-3">
                <Button type="submit" className="w-full" disabled={createMutation.isPending}>
                  {createMutation.isPending ? (
                    <>
                      <LoadingSpinner size="sm" className="mr-2" />
                      Creating...
                    </>
                  ) : (
                    <>
                      <Save className="mr-2 h-4 w-4" />
                      Create Course
                    </>
                  )}
                </Button>
                <p className="text-xs text-center text-muted-foreground">
                  After creating, you can add modules and lessons
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </form>
    </div>
  );
}