import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { X, Building2, Save } from 'lucide-react';

interface InvoiceInfoModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (invoiceInfo: any) => void;
}

interface InvoiceFormData {
  company_name: string;
  company_address: string;
  company_tax_id: string;
  customer_tax_id: string;
}

const InvoiceInfoModal: React.FC<InvoiceInfoModalProps> = ({
  isOpen,
  onClose,
  onSave,
}) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<InvoiceFormData>({
    defaultValues: {
      company_name: '',
      company_address: '',
      company_tax_id: '',
      customer_tax_id: '',
    },
  });

  const onSubmit = (data: InvoiceFormData) => {
    onSave(data);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[10001] flex items-center justify-center p-2 sm:p-4">
      <div
        className="fixed inset-0 bg-black/90 backdrop-blur-sm"
        onClick={onClose}
      />
      <div className="relative w-full max-w-lg max-h-[95vh] bg-gradient-to-br from-[#0a0a0a] via-[#1a1a1a] to-[#0a0a0a] rounded-xl sm:rounded-2xl border border-[#d4af37]/30 shadow-2xl shadow-[#d4af37]/20 overflow-hidden flex flex-col">
        {/* Header */}
        <div className="px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-b border-[#d4af37]/20 bg-gradient-to-r from-[#1a1a1a] to-[#0a0a0a] flex-shrink-0">
          <div className="flex items-center justify-between gap-2">
            <div className="flex items-center gap-2 min-w-0 flex-1">
              <Building2 className="w-4 h-4 sm:w-5 sm:h-5 text-[#d4af37] flex-shrink-0" />
              <h2 className="text-base sm:text-lg md:text-xl font-serif font-bold text-white tracking-tight truncate">
                Invoice Information
              </h2>
            </div>
            <button
              onClick={onClose}
              className="p-1.5 sm:p-2 hover:bg-[#d4af37]/10 rounded-lg transition-colors text-gray-400 hover:text-white flex-shrink-0"
            >
              <X className="w-4 h-4 sm:w-5 sm:h-5" />
            </button>
          </div>
        </div>

        {/* Content */}
        <form onSubmit={handleSubmit(onSubmit)} className="flex-1 overflow-y-auto p-3 sm:p-4 md:p-6 flex flex-col">
          <div className="space-y-3 sm:space-y-4 flex-1">
            <div>
              <label className="block text-xs font-medium text-gray-300 mb-2">
                Company Name
              </label>
              <input
                {...register('company_name')}
                type="text"
                className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
                placeholder="Company Name"
              />
            </div>

            <div>
              <label className="block text-xs font-medium text-gray-300 mb-2">
                Company Address
              </label>
              <textarea
                {...register('company_address')}
                rows={3}
                className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] resize-none"
                placeholder="Company Address"
              />
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-medium text-gray-300 mb-2">
                  Company Tax ID
                </label>
                <input
                  {...register('company_tax_id')}
                  type="text"
                  className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
                  placeholder="Tax ID"
                />
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-300 mb-2">
                  Customer Tax ID
                </label>
                <input
                  {...register('customer_tax_id')}
                  type="text"
                  className="w-full px-3 py-2 bg-[#0a0a0a] border border-[#d4af37]/20 rounded-lg text-white text-sm focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37]"
                  placeholder="Tax ID"
                />
              </div>
            </div>
          </div>

          {/* Footer */}
          <div className="mt-4 sm:mt-6 flex items-center justify-end gap-2 sm:gap-3 pt-3 sm:pt-4 border-t border-[#d4af37]/20 flex-shrink-0">
            <button
              type="button"
              onClick={onClose}
              className="px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium text-gray-300 hover:text-white transition-colors min-h-[44px]"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-4 sm:px-6 py-2 bg-[#d4af37] text-black font-semibold rounded-lg hover:bg-[#c9a227] transition-all flex items-center gap-1.5 sm:gap-2 text-sm sm:text-base min-h-[44px]"
            >
              <Save className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
              <span>Save</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default InvoiceInfoModal;

