"use client";

import { useState } from "react";
import { API_URL } from '@/lib/api';

interface AddCustomerModalProps {
  onClose: () => void;
  onCustomerAdded: () => void;
}

export default function AddCustomerModal({
  onClose,
  onCustomerAdded,
}: AddCustomerModalProps) {
  const [form, setForm] = useState({
    clinicName: "",
    doctorName: "",
    phone: "",
    email: "",
    address: "",
    city: "",
    emirate: "",
    clinicType: "",
    notes: "",
  });

  function updateField(field: string, value: string) {
    setForm((prev) => ({ ...prev, [field]: value }));
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    const res = await fetch(`${API_URL}/api/customers`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(form),
    });

    if (res.ok) {
      onCustomerAdded();
      onClose();
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 px-4">
      <div className="w-full max-w-3xl rounded-2xl bg-white p-8 shadow-2xl">
        <div className="mb-6">
          <h2 className="text-2xl font-bold text-slate-900">Add Customer</h2>
          <p className="text-sm text-slate-500">
            Create a clinic, hospital, or customer record.
          </p>
        </div>

        <form onSubmit={handleSubmit} className="grid grid-cols-2 gap-4">
          {[
            ["clinicName", "Clinic / Hospital Name"],
            ["doctorName", "Doctor / Contact Name"],
            ["phone", "Phone"],
            ["email", "Email"],
            ["city", "City"],
            ["emirate", "Emirate"],
            ["clinicType", "Customer Type"],
          ].map(([field, label]) => (
            <div key={field}>
              <label className="mb-1 block text-sm font-medium text-slate-700">
                {label}
              </label>
              <input
                value={form[field as keyof typeof form]}
                onChange={(e) => updateField(field, e.target.value)}
                className="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
              />
            </div>
          ))}

          <div className="col-span-2">
            <label className="mb-1 block text-sm font-medium text-slate-700">
              Address
            </label>
            <textarea
              value={form.address}
              onChange={(e) => updateField("address", e.target.value)}
              className="h-20 w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
            />
          </div>

          <div className="col-span-2">
            <label className="mb-1 block text-sm font-medium text-slate-700">
              Notes
            </label>
            <textarea
              value={form.notes}
              onChange={(e) => updateField("notes", e.target.value)}
              className="h-24 w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
            />
          </div>

          <div className="col-span-2 mt-4 flex justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              className="rounded-xl border border-slate-200 px-5 py-3 font-semibold text-slate-700"
            >
              Cancel
            </button>

            <button
              type="submit"
              className="rounded-xl bg-[#EE302B] px-5 py-3 font-semibold text-white"
            >
              Save Customer
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}