'use client';

import { useState } from 'react';
import { updateCustomerAddress } from '@/app/account/actions';

interface AddressFormSectionProps {
  customer: any;
}

export default function AddressFormSection({ customer }: AddressFormSectionProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="mt-10">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 text-sm text-clay hover:text-clay-dark font-medium"
      >
        {isOpen ? '✕' : '✎'} {isOpen ? 'Close' : 'Edit delivery address'}
      </button>

      {isOpen && (
        <form action={updateCustomerAddress} className="mt-4 space-y-4 border border-line bg-surface p-6">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="phone" className="tag-label mb-2 block">
                Phone number
              </label>
              <input
                id="phone"
                name="phone"
                type="tel"
                defaultValue={customer.phone ?? ''}
                className="w-full border border-line px-3 py-2 text-sm"
                placeholder="e.g. +44 7700 900000"
              />
            </div>
            <div>
              <label htmlFor="country" className="tag-label mb-2 block">
                Country
              </label>
              <select
                id="country"
                name="country"
                defaultValue={customer.country ?? 'GB'}
                className="w-full border border-line bg-paper px-3 py-2 text-sm"
              >
                <option value="GB">United Kingdom</option>
                <option value="IE">Ireland</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
                <option value="AU">Australia</option>
                <option value="NZ">New Zealand</option>
                <option value="DE">Germany</option>
                <option value="FR">France</option>
                <option value="NL">Netherlands</option>
                <option value="ES">Spain</option>
                <option value="IT">Italy</option>
                <option value="JP">Japan</option>
              </select>
            </div>
          </div>

          <div>
            <label htmlFor="addressLine1" className="tag-label mb-2 block">
              Address line 1
            </label>
            <input
              id="addressLine1"
              name="addressLine1"
              type="text"
              defaultValue={customer.addressLine1 ?? ''}
              className="w-full border border-line px-3 py-2 text-sm"
              placeholder="Street address"
            />
          </div>

          <div>
            <label htmlFor="addressLine2" className="tag-label mb-2 block">
              Address line 2 (optional)
            </label>
            <input
              id="addressLine2"
              name="addressLine2"
              type="text"
              defaultValue={customer.addressLine2 ?? ''}
              className="w-full border border-line px-3 py-2 text-sm"
              placeholder="Apartment, suite, etc."
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="city" className="tag-label mb-2 block">
                City
              </label>
              <input
                id="city"
                name="city"
                type="text"
                defaultValue={customer.city ?? ''}
                className="w-full border border-line px-3 py-2 text-sm"
                placeholder="London"
              />
            </div>
            <div>
              <label htmlFor="postalCode" className="tag-label mb-2 block">
                Postal code
              </label>
              <input
                id="postalCode"
                name="postalCode"
                type="text"
                defaultValue={customer.postalCode ?? ''}
                className="w-full border border-line px-3 py-2 text-sm"
                placeholder="SW1A 1AA"
              />
            </div>
          </div>

          <button
            type="submit"
            className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark"
          >
            Save address
          </button>
        </form>
      )}
    </div>
  );
}
