"use client";

import { useState } from "react";
import { Upload } from "lucide-react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";

import { useRouter } from "next/navigation";
import { createPromotion } from "@/service/promotion";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";

export default function AddPromoForm() {
  const router = useRouter();

  const [title, setTitle] = useState("");
  const [file, setFile] = useState<File | null>(null);

  const MySwal = withReactContent(Swal);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selected = e.target.files?.[0];
    if (selected) {
      setFile(selected);
    }
  };

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!file) {
      alert("File wajib diupload!");
      return;
    }

    try {
      const formData = new FormData();

      formData.append("title", title);
      formData.append("description", title);
      formData.append("file", file);

      await createPromotion(formData);

      successSubmit("/admin/promotion");
    } catch (err) {
      console.error("ERROR CREATE PROMO:", err);
    }
  };

  function successSubmit(redirect: string) {
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then((result) => {
      if (result.isConfirmed) {
        router.push(redirect);
      }
    });
  }

  return (
    <Card className="w-full max-w-full mx-auto shadow-md border-none p-6">
      <CardHeader>
        <CardTitle className="text-2xl font-bold text-teal-900">
          Form Tambah Promo
        </CardTitle>
      </CardHeader>

      <CardContent>
        <form className="space-y-6" onSubmit={onSubmit}>
          <div>
            <Label className="text-sm font-semibold">
              Judul Promo <span className="text-red-500">*</span>
            </Label>
            <Input
              placeholder="Masukkan Judul Promo"
              className="mt-1"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>

          <div>
            <Label className="text-sm font-semibold">Upload File *</Label>

            <label className="border-2 border-dashed rounded-lg flex flex-col items-center justify-center py-16 cursor-pointer hover:bg-gray-50 transition mt-2">
              <Upload className="w-10 h-10 text-teal-800 mb-3" />
              <p className="text-base text-gray-600 text-center">
                Klik untuk upload atau drag & drop
              </p>
              <p className="text-xs text-gray-500 mt-1">PNG, JPG (max 2 MB)</p>

              <input
                type="file"
                accept="image/png,image/jpeg"
                className="hidden"
                onChange={handleFileChange}
              />
            </label>

            {file && (
              <p className="text-xs text-teal-800 mt-2 font-medium">
                {file.name}
              </p>
            )}
          </div>

          <Button
            type="submit"
            className="bg-teal-800 hover:bg-teal-900 text-white px-8 py-6 text-lg mt-4"
          >
            Tambahkan Promo
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}