"use client";

import {
  type WholesaleCustomer,
} from "@/actions/wholesale";
import { AdminButton } from "@/components/admin/design-system";

import { type CustomerForm } from "./customerFormState";

type CustomerFormSectionProps = {
  editing: WholesaleCustomer | null;
  form: CustomerForm;
  saving: boolean;
  onFieldChange: <K extends keyof CustomerForm>(field: K, value: CustomerForm[K]) => void;
  onSave: () => void;
  onCancel: () => void;
};

export default function CustomerFormSection({ editing, form, saving, onFieldChange, onSave, onCancel }: CustomerFormSectionProps) {
  return (
    <div className="rounded-2xl bg-white border border-[var(--admin-border)] p-6 shadow-sm">
      <h3 className="font-semibold text-[var(--admin-text-primary)] mb-4">{editing ? "Edit Customer" : "New Customer"}</h3>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label htmlFor="ws-company-name" className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Company Name</label>
          <input aria-label="Ws Company Name" id="ws-company-name" value={form.companyName} onChange={e => onFieldChange("companyName", e.target.value)}
            className="w-full rounded-xl border border-[var(--admin-border)] px-3 py-2 text-sm outline-none focus:border-[var(--admin-accent)]" />
        </div>
        <div>
          <label htmlFor="ws-contact-name" className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Contact Name</label>
          <input aria-label="Ws Contact Name" id="ws-contact-name" value={form.contactName} onChange={e => onFieldChange("contactName", e.target.value)}
            className="w-full rounded-xl border border-[var(--admin-border)] px-3 py-2 text-sm outline-none focus:border-[var(--admin-accent)]" />
        </div>
        <div>
          <label htmlFor="ws-email" className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Email</label>
          <input aria-label="Ws Email" id="ws-email" type="email" value={form.email} onChange={e => onFieldChange("email", e.target.value)}
            className="w-full rounded-xl border border-[var(--admin-border)] px-3 py-2 text-sm outline-none focus:border-[var(--admin-accent)]" autoComplete="email" />
        </div>
        <div>
          <label htmlFor="ws-phone" className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Phone</label>
          <input aria-label="Ws Phone" id="ws-phone" type="tel" value={form.phone} onChange={e => onFieldChange("phone", e.target.value)}
            className="w-full rounded-xl border border-[var(--admin-border)] px-3 py-2 text-sm outline-none focus:border-[var(--admin-accent)]" autoComplete="tel" />
        </div>
        <div>
          <label htmlFor="ws-account-status" className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Status</label>
          <select aria-label="Ws Account Status" id="ws-account-status" value={form.accountStatus} onChange={e => onFieldChange("accountStatus", e.target.value)}
            className="w-full rounded-xl border border-[var(--admin-border)] px-3 py-2 text-sm outline-none focus:border-[var(--admin-accent)]">
            <option value="active">Active</option>
            <option value="on_hold">On Hold</option>
            <option value="disabled">Disabled</option>
            <option value="pending_approval">Pending Approval</option>
          </select>
        </div>
        <div>
          <label htmlFor="ws-credit-limit" className="block text-sm font-medium text-[var(--admin-text-secondary)] mb-1">Credit Limit ($)</label>
          <input aria-label="0 = Unlimited" id="ws-credit-limit" type="number" value={form.creditLimit} onChange={e => onFieldChange("creditLimit", Number(e.target.value))}
            className="w-full rounded-xl border border-[var(--admin-border)] px-3 py-2 text-sm outline-none focus:border-[var(--admin-accent)]" placeholder="0 = unlimited" />
        </div>
      </div>

      <div className="mt-4 p-4 rounded-xl bg-[var(--admin-bg-subtle)] space-y-3">
        <p className="text-sm font-semibold text-[var(--admin-text-secondary)]">Deposit Rules</p>
        <div className="flex items-center gap-3">
          <input aria-label="Dep Enabled" type="checkbox" checked={form.depositsEnabled}
            onChange={e => onFieldChange("depositsEnabled", e.target.checked)}
            className="rounded" id="dep-enabled" />
          <label htmlFor="dep-enabled" className="text-sm text-[var(--admin-text-secondary)]">Enable deposit requirement</label>
        </div>
        {form.depositsEnabled && (
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label htmlFor="ws-deposit-threshold" className="block text-xs text-[var(--admin-text-muted)] mb-1">Threshold ($ order total to trigger)</label>
              <input aria-label="0" id="ws-deposit-threshold" type="number" value={form.depositThreshold} onChange={e => onFieldChange("depositThreshold", e.target.value)}
                className="w-full rounded-lg border border-[var(--admin-border)] px-3 py-2 text-sm outline-none focus:border-[var(--admin-accent)]" placeholder="0" />
            </div>
            <div>
              <label htmlFor="ws-deposit-pct" className="block text-xs text-[var(--admin-text-muted)] mb-1">Deposit %</label>
              <input aria-label="20" id="ws-deposit-pct" type="number" value={form.depositPercentage} onChange={e => onFieldChange("depositPercentage", e.target.value)}
                className="w-full rounded-lg border border-[var(--admin-border)] px-3 py-2 text-sm outline-none focus:border-[var(--admin-accent)]" placeholder="20" min="1" max="100" />
            </div>
          </div>
        )}
      </div>

      <div className="mt-4 flex gap-3">
        <AdminButton onClick={onSave} disabled={saving} isLoading={saving} variant="primary">
          {saving ? "Saving..." : "Save Customer"}
        </AdminButton>
        <AdminButton onClick={onCancel} variant="secondary">
          Cancel
        </AdminButton>
      </div>
    </div>
  );
}
