'use client';

import { useState, useMemo } from 'react';

interface MailingListEntry {
  id: string;
  name: string | null;
  email: string;
  source: string;
  subscribed: boolean;
}

interface Props {
  entries: MailingListEntry[];
  sourceLabels: Record<string, string>;
}

export default function CustomerSelector({ entries, sourceLabels }: Props) {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());

  const filtered = useMemo(() => {
    if (!searchTerm) return entries.filter((e) => e.subscribed);
    return entries.filter(
      (e) =>
        e.subscribed &&
        (e.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
          (e.name && e.name.toLowerCase().includes(searchTerm.toLowerCase())))
    );
  }, [searchTerm, entries]);

  const toggleAll = () => {
    if (selectedIds.size === filtered.length) {
      setSelectedIds(new Set());
    } else {
      setSelectedIds(new Set(filtered.map((e) => e.id)));
    }
  };

  const toggleCustomer = (id: string) => {
    const newSelected = new Set(selectedIds);
    if (newSelected.has(id)) {
      newSelected.delete(id);
    } else {
      newSelected.add(id);
    }
    setSelectedIds(newSelected);
  };

  return (
    <div className="border border-line bg-surface p-6 rounded">
      <h3 className="font-display text-lg mb-4">Select customers to email</h3>

      <div className="mb-4">
        <input
          type="text"
          placeholder="Search by name or email…"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="w-full border border-line bg-paper px-3 py-2 text-sm"
        />
        <p className="mt-2 text-xs text-muted">
          Showing {filtered.length} subscribed customer{filtered.length !== 1 ? 's' : ''}
          {searchTerm && ` matching "${searchTerm}"`}
        </p>
      </div>

      {filtered.length === 0 ? (
        <p className="text-sm text-muted py-4">No customers found.</p>
      ) : (
        <div>
          <div className="flex items-center gap-2 mb-3 pb-3 border-b border-line">
            <input
              type="checkbox"
              id="select-all"
              checked={selectedIds.size > 0 && selectedIds.size === filtered.length}
              onChange={toggleAll}
              className="h-4 w-4 accent-clay"
            />
            <label htmlFor="select-all" className="text-sm font-medium cursor-pointer">
              {selectedIds.size === 0 ? 'Select all' : `${selectedIds.size} selected`}
            </label>
          </div>

          <div className="max-h-64 overflow-y-auto space-y-2">
            {filtered.map((customer) => (
              <div key={customer.id} className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id={`customer-${customer.id}`}
                  checked={selectedIds.has(customer.id)}
                  onChange={() => toggleCustomer(customer.id)}
                  className="h-4 w-4 accent-clay"
                />
                <label
                  htmlFor={`customer-${customer.id}`}
                  className="flex-1 text-sm cursor-pointer py-1"
                >
                  <span className="font-medium">{customer.name || customer.email}</span>
                  {customer.name && (
                    <>
                      {' · '}
                      <span className="text-muted text-xs">{customer.email}</span>
                    </>
                  )}
                  <span className="text-muted text-xs ml-2">{sourceLabels[customer.source]}</span>
                </label>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Hidden inputs for selected customer IDs */}
      {Array.from(selectedIds).map((id) => (
        <input key={id} type="hidden" name="selectedCustomers" value={id} />
      ))}

      {selectedIds.size > 0 && (
        <div className="mt-4 p-3 bg-splash-blue/10 border border-splash-blue/30 rounded">
          <p className="text-sm text-splash-blue">
            Will send to <strong>{selectedIds.size}</strong> customer{selectedIds.size !== 1 ? 's' : ''}
          </p>
        </div>
      )}
    </div>
  );
}
