/**
 * Billing Form Step Component
 * Collects billing information during paid signup flow
 * Integrates with RegisterSerializer backend fields
 */

import { useState } from 'react';
import Label from '../form/Label';
import Input from '../form/input/InputField';
import SelectDropdown from '../form/SelectDropdown';

export interface BillingFormData {
  billing_email: string;
  billing_address_line1: string;
  billing_address_line2?: string;
  billing_city: string;
  billing_state: string;
  billing_postal_code: string;
  billing_country: string;
  tax_id?: string;
}

interface BillingFormStepProps {
  formData: BillingFormData;
  onChange: (field: keyof BillingFormData, value: string) => void;
  error?: string;
  userEmail?: string; // Pre-fill billing email from user email
}

// ISO 3166-1 alpha-2 country codes (subset of common countries)
const COUNTRIES = [
  { value: 'US', label: 'United States' },
  { value: 'GB', label: 'United Kingdom' },
  { value: 'CA', label: 'Canada' },
  { value: 'AU', label: 'Australia' },
  { value: 'IN', label: 'India' },
  { value: 'PK', label: 'Pakistan' },
  { value: 'DE', label: 'Germany' },
  { value: 'FR', label: 'France' },
  { value: 'ES', label: 'Spain' },
  { value: 'IT', label: 'Italy' },
  { value: 'NL', label: 'Netherlands' },
  { value: 'SE', label: 'Sweden' },
  { value: 'NO', label: 'Norway' },
  { value: 'DK', label: 'Denmark' },
  { value: 'FI', label: 'Finland' },
  { value: 'BE', label: 'Belgium' },
  { value: 'AT', label: 'Austria' },
  { value: 'CH', label: 'Switzerland' },
  { value: 'IE', label: 'Ireland' },
  { value: 'NZ', label: 'New Zealand' },
  { value: 'SG', label: 'Singapore' },
  { value: 'AE', label: 'United Arab Emirates' },
  { value: 'SA', label: 'Saudi Arabia' },
  { value: 'ZA', label: 'South Africa' },
  { value: 'BR', label: 'Brazil' },
  { value: 'MX', label: 'Mexico' },
  { value: 'AR', label: 'Argentina' },
  { value: 'CL', label: 'Chile' },
  { value: 'CO', label: 'Colombia' },
  { value: 'JP', label: 'Japan' },
  { value: 'KR', label: 'South Korea' },
  { value: 'CN', label: 'China' },
  { value: 'TH', label: 'Thailand' },
  { value: 'MY', label: 'Malaysia' },
  { value: 'ID', label: 'Indonesia' },
  { value: 'PH', label: 'Philippines' },
  { value: 'VN', label: 'Vietnam' },
  { value: 'BD', label: 'Bangladesh' },
  { value: 'LK', label: 'Sri Lanka' },
  { value: 'EG', label: 'Egypt' },
  { value: 'NG', label: 'Nigeria' },
  { value: 'KE', label: 'Kenya' },
  { value: 'GH', label: 'Ghana' },
];

export default function BillingFormStep({
  formData,
  onChange,
  error,
  userEmail,
}: BillingFormStepProps) {
  // Auto-fill billing email from user email if not already set
  if (userEmail && !formData.billing_email) {
    onChange('billing_email', userEmail);
  }

  return (
    <div className="space-y-5">
      {error && (
        <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
          {error}
        </div>
      )}

      <div className="mb-5">
        <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">
          Billing Information
        </h3>
        <p className="text-sm text-gray-500 dark:text-gray-400">
          Enter your billing details to complete your subscription setup. This information will be used for invoicing.
        </p>
      </div>

      {/* Billing Email */}
      <div>
        <Label>
          Billing Email<span className="text-error-500">*</span>
        </Label>
        <Input
          type="email"
          id="billing_email"
          name="billing_email"
          value={formData.billing_email}
          onChange={(e) => onChange('billing_email', e.target.value)}
          placeholder="billing@company.com"
        />
        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
          Invoices will be sent to this email
        </p>
      </div>

      {/* Address Line 1 */}
      <div>
        <Label>
          Street Address<span className="text-error-500">*</span>
        </Label>
        <Input
          type="text"
          id="billing_address_line1"
          name="billing_address_line1"
          value={formData.billing_address_line1}
          onChange={(e) => onChange('billing_address_line1', e.target.value)}
          placeholder="123 Main Street"
        />
      </div>

      {/* Address Line 2 */}
      <div>
        <Label>Address Line 2 (Optional)</Label>
        <Input
          type="text"
          id="billing_address_line2"
          name="billing_address_line2"
          value={formData.billing_address_line2 || ''}
          onChange={(e) => onChange('billing_address_line2', e.target.value)}
          placeholder="Apartment, suite, etc."
        />
      </div>

      {/* City, State, Postal Code */}
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-3">
        <div>
          <Label>
            City<span className="text-error-500">*</span>
          </Label>
          <Input
            type="text"
            id="billing_city"
            name="billing_city"
            value={formData.billing_city}
            onChange={(e) => onChange('billing_city', e.target.value)}
            placeholder="New York"
          />
        </div>

        <div>
          <Label>
            State/Province<span className="text-error-500">*</span>
          </Label>
          <Input
            type="text"
            id="billing_state"
            name="billing_state"
            value={formData.billing_state}
            onChange={(e) => onChange('billing_state', e.target.value)}
            placeholder="NY"
          />
        </div>

        <div>
          <Label>
            Postal Code<span className="text-error-500">*</span>
          </Label>
          <Input
            type="text"
            id="billing_postal_code"
            name="billing_postal_code"
            value={formData.billing_postal_code}
            onChange={(e) => onChange('billing_postal_code', e.target.value)}
            placeholder="10001"
          />
        </div>
      </div>

      {/* Country */}
      <div>
        <Label>
          Country<span className="text-error-500">*</span>
        </Label>
        <SelectDropdown
          value={formData.billing_country}
          onChange={(value) => onChange('billing_country', value)}
          options={COUNTRIES}
          placeholder="Select country"
        />
        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
          2-letter ISO country code (e.g., US, GB, PK)
        </p>
      </div>

      {/* Tax ID */}
      <div>
        <Label>Tax ID / VAT Number (Optional)</Label>
        <Input
          type="text"
          id="tax_id"
          name="tax_id"
          value={formData.tax_id || ''}
          onChange={(e) => onChange('tax_id', e.target.value)}
          placeholder="GB123456789"
        />
        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
          Enter your VAT number, GST number, or other tax identifier if applicable
        </p>
      </div>
    </div>
  );
}
