"use client";

import { useRef, useState, useTransition } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { importCourses, type ImportResult } from "../import-actions";

export function UploadClient() {
  const [isPending, startTransition] = useTransition();
  const [result, setResult] = useState<ImportResult | null>(null);
  const formRef = useRef<HTMLFormElement>(null);
  const fileRef = useRef<HTMLInputElement>(null);

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const file = fileRef.current?.files?.[0];
    if (!file) {
      toast.error("Please choose a file to upload.");
      return;
    }

    const formData = new FormData();
    formData.append("file", file);

    startTransition(async () => {
      try {
        const res = await importCourses(formData);
        setResult(res);
        if (res.inserted > 0 && res.failed === 0) {
          toast.success(`${res.inserted} course(s) imported successfully.`);
        } else if (res.inserted > 0) {
          toast.warning(
            `${res.inserted} imported, ${res.failed} failed. See details below.`,
          );
        } else {
          toast.error(
            res.errors[0]?.error ?? "No courses were imported.",
          );
        }
        formRef.current?.reset();
      } catch (err) {
        toast.error(
          err instanceof Error ? err.message : "Import failed.",
        );
      }
    });
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Upload File</CardTitle>
          <CardDescription>
            Accepted formats: .csv, .xlsx, .xls
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form ref={formRef} onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="file">Course file</Label>
              <Input
                id="file"
                name="file"
                type="file"
                ref={fileRef}
                accept=".csv,.xlsx,.xls"
                disabled={isPending}
              />
            </div>
            <Button type="submit" disabled={isPending}>
              {isPending ? (
                <span className="inline-flex items-center gap-2">
                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
                  Importing…
                </span>
              ) : (
                "Import Courses"
              )}
            </Button>
          </form>
        </CardContent>
      </Card>

      {result && (
        <Card>
          <CardHeader>
            <CardTitle>Import Summary</CardTitle>
            <CardDescription>
              <span className="font-medium text-brand-blue">
                {result.inserted} inserted
              </span>
              {" · "}
              <span className="font-medium text-brand-orange">
                {result.failed} failed
              </span>
            </CardDescription>
          </CardHeader>
          {result.errors.length > 0 && (
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-24">Row</TableHead>
                    <TableHead>Error</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {result.errors.map((e, i) => (
                    <TableRow key={`${e.row}-${i}`}>
                      <TableCell>{e.row}</TableCell>
                      <TableCell className="text-destructive">
                        {e.error}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          )}
        </Card>
      )}
    </div>
  );
}