"use client";

import { useState } from "react";
import Modal from "./Modal";
import { createCustomerAction } from "@/lib/actions/customer-actions";

export default function AddCustomerButton({
  sites,
}: {
  sites: { id: string; name: string }[];
}) {
  const [selected, setSelected] = useState<string[]>([]);

  return (
    <Modal
      title="Add a customer"
      trigger={
        <button className="bg-accent text-white font-bold text-[13px] px-3.5 py-2 rounded-lg whitespace-nowrap">
          + Add customer
        </button>
      }
    >
      {(close) => (
        <form
          action={createCustomerAction}
          onSubmit={() => setTimeout(close, 0)}
          className="flex flex-col gap-3.5"
        >
          <div>
            <label className="block text-xs text-text-secondary mb-1.5">Name</label>
            <input
              name="name"
              required
              className="w-full bg-bg-input border border-border-input rounded-lg px-3 py-2.5 text-sm outline-none"
            />
          </div>
          <div>
            <label className="block text-xs text-text-secondary mb-1.5">Email</label>
            <input
              name="email"
              type="email"
              required
              className="w-full bg-bg-input border border-border-input rounded-lg px-3 py-2.5 text-sm font-mono outline-none"
            />
          </div>
          <div>
            <label className="block text-xs text-text-secondary mb-2">Sites they can see</label>
            <div className="flex gap-2 flex-wrap">
              {sites.map((s) => {
                const active = selected.includes(s.id);
                return (
                  <label
                    key={s.id}
                    className={`cursor-pointer px-2.5 py-1.5 rounded-full text-[11.5px] font-semibold border ${
                      active
                        ? "bg-accent/15 border-accent text-white"
                        : "bg-white/5 border-border-input text-[#c9ccd3]"
                    }`}
                  >
                    <input
                      type="checkbox"
                      name="siteIds"
                      value={s.id}
                      className="hidden"
                      checked={active}
                      onChange={() =>
                        setSelected((prev) =>
                          prev.includes(s.id) ? prev.filter((x) => x !== s.id) : [...prev, s.id]
                        )
                      }
                    />
                    {s.name}
                  </label>
                );
              })}
            </div>
          </div>
          <div className="flex gap-2.5 justify-end mt-2">
            <button
              type="button"
              onClick={close}
              className="bg-transparent border border-border-input text-text-secondary font-semibold text-sm px-3.5 py-2 rounded-lg"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="bg-accent text-white font-bold text-sm px-4 py-2 rounded-lg"
            >
              Add customer
            </button>
          </div>
        </form>
      )}
    </Modal>
  );
}