"use client";

import React, { useEffect, useState } from "react";
import SupplierForm from "../../components/SupplierForm";
import { Supplier } from "../../../../../types/purchase-order";
import { purchaseOrderService } from "../../../../../services/api";
import { useRouter } from "next/navigation";

export default function EditSupplierPage({
  params,
}: {
  params: { id: string };
}) {
  const router = useRouter();
  const [supplier, setSupplier] = useState<Supplier | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchSupplier = async () => {
      try {
        setLoading(true);
        const response = await purchaseOrderService.getSupplier(
          Number(params.id)
        );
        setSupplier(response.data);
        setError(null);
      } catch (err) {
        console.error("Failed to fetch supplier data:", err);
        setError("Failed to load supplier. Please try again.");
      } finally {
        setLoading(false);
      }
    };

    fetchSupplier();
  }, [params.id]);

  if (loading) {
    return (
      <div className="flex justify-center items-center h-40">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mr-3"></div>
        <span>Loading supplier data...</span>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-100 text-red-700 p-4 rounded-md">
        <p className="font-medium">Error</p>
        <p>{error}</p>
        <button
          onClick={() => router.push("/suppliers")}
          className="mt-4 bg-white text-red-700 py-2 px-4 rounded-md hover:bg-gray-100"
        >
          Back to Suppliers
        </button>
      </div>
    );
  }

  if (!supplier) {
    return (
      <div className="bg-yellow-100 text-yellow-700 p-4 rounded-md">
        <p className="font-medium">Supplier not found</p>
        <p>The requested supplier does not exist or has been deleted.</p>
        <button
          onClick={() => router.push("/suppliers")}
          className="mt-4 bg-white text-yellow-700 py-2 px-4 rounded-md hover:bg-gray-100"
        >
          Back to Suppliers
        </button>
      </div>
    );
  }

  return (
    <div className="edit-supplier-page">
      {/* Sticky Header */}
      <div className="sticky top-0 z-30 bg-gradient-to-l from-white to-[#DFF9FF] shadow-sm border-b border-gray-200 backdrop-blur-sm">
        <div className="px-4 md:px-6 py-4">
          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
            <div>
              <h1 className="text-xl md:text-2xl font-bold text-gray-800">
                Edit Supplier
              </h1>
              <p className="text-gray-600 mt-1">Update supplier information</p>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="m-4 md:m-6">
        <div className="bg-white rounded-lg shadow-[0px_4px_34px_0px_rgba(0,59,113,0.16)] p-4 md:p-6">
          <SupplierForm initialData={supplier} isEdit={true} />
        </div>
      </div>
    </div>
  );
}