import React, { Component } from 'react';
import { __ } from '@wordpress/i18n';
import { MuiTelInput } from 'mui-tel-input';

class InfoStep extends Component {
  state = {
    animateIn: false,
  };

  componentDidMount() {
    const { updateInput, state } = this.props;
    if (wpbApp?.customerData?.id) {
      updateInput({
        customerId: wpbApp.customerData.id || '',
        firstName: wpbApp.customerData.fname || '',
        lastName: wpbApp.customerData.lname || '',
        email: wpbApp.customerData.email || '',
        phone: wpbApp.customerData.phone || state.phone || '',
      });
    }

    requestAnimationFrame(() => this.setState({ animateIn: true }));
  }

  handleChange = (e) => {
    const { name, value } = e.target;
    this.props.updateInput(name, value);
  };

  handlePhoneChange = (value) => {
    this.props.updateInput('phone', value);
  };

  blockStyle = (delay = 0) => ({
    transition: 'opacity 600ms ease, transform 600ms ease',
    transitionDelay: `${delay}ms`,
    transform: this.state.animateIn ? 'translateY(0)' : 'translateY(24px)',
    opacity: this.state.animateIn ? 1 : 0,
  });

  render() {
    const { state, onNext, onBack } = this.props;
    const emailValid = Boolean(state.email) && /.+@.+\..+/.test(state.email.trim());
    const phoneValid = Boolean(state.phone) && state.phone.replace(/\D/g, '').length >= 7;
    const isFormValid = Boolean(state.firstName) && Boolean(state.lastName) && emailValid && phoneValid;

    return (
      <>
        <div className="flex flex-col min-h-auto max-w-3xl mx-auto space-y-4 animate-in fade-in slide-in-from-right-4 duration-500 p-5">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2" style={this.blockStyle(0)}>
              <label className="text-sm font-medium text-slate-700 ml-1">{__('First Name', 'bookify')} <span className="text-red-500">*</span></label>
              <input
                type="text"
                name="firstName"
                value={state.firstName}
                onChange={this.handleChange}
                placeholder={__('e.g. John', 'bookify')}
                className="font-normal text-sm w-full p-3 bg-slate-50 border border-transparent rounded-md focus:bg-white focus:border-blue-600 outline-none transition-all placeholder:text-slate-300"
              />
            </div>
            <div className="space-y-2" style={this.blockStyle(60)}>
              <label className="text-sm font-medium text-slate-700 ml-1">{__('Last Name', 'bookify')} <span className="text-red-500">*</span></label>
              <input
                type="text"
                name="lastName"
                value={state.lastName}
                onChange={this.handleChange}
                placeholder={__('e.g. Doe', 'bookify')}
                className="font-normal text-sm w-full p-3 bg-slate-50 border border-transparent rounded-md focus:bg-white focus:border-blue-600 outline-none transition-all placeholder:text-slate-300"
              />
            </div>
            <div className="space-y-2" style={this.blockStyle(120)}>
              <label className="text-sm font-medium text-slate-700 ml-1">{__('Email Address', 'bookify')} <span className="text-red-500">*</span></label>
              <input
                type="email"
                name="email"
                value={state.email}
                onChange={this.handleChange}
                placeholder={__('john.doe@example.com', 'bookify')}
                className="font-normal text-sm w-full p-3 bg-slate-50 border border-transparent rounded-md focus:bg-white focus:border-blue-600 outline-none transition-all placeholder:text-slate-300"
              />
            </div>
            <div className="space-y-2" style={this.blockStyle(180)}>
              <label className="text-sm font-medium text-slate-700 ml-1">{__('Phone Number', 'bookify')} <span className="text-red-500">*</span></label>
              <MuiTelInput
                value={state.phone}
                onChange={this.handlePhoneChange}
                defaultCountry="US"
                fullWidth
                placeholder={__('123 456 789', 'bookify')}
                sx={{
                  '& .MuiOutlinedInput-root': {
                    borderRadius: '0.375rem',
                    transition: 'all 0.2s ease',
                    fontSize: '0.875rem',
                    lineHeight: '1.25rem',
                    backgroundColor: '#f8fafc',
                    borderWidth: '1px',
                    borderColor: 'transparent',
                  },
                  '& .MuiOutlinedInput-root.Mui-focused': {
                    borderColor: 'rgb(37 99 235)',
                    outline: 'none',
                  },
                  '& .MuiOutlinedInput-input': {
                    padding: '0.75rem',
                    fontWeight: 400,
                  },
                  '& .MuiIconButton-root': {
                    padding: 0,
                  },
                  '& .MuiInputAdornment-root': {
                    marginRight: '2px',
                  },
                  '& .MuiOutlinedInput-notchedOutline': {
                    border: 'none',
                  },
                }}
              />
            </div>
            <div className="md:col-span-2 space-y-2" style={this.blockStyle(240)}>
              <label className="text-sm font-medium text-slate-700 ml-1">{__('Note (Optional)', 'bookify')}</label>
              <textarea
                name="note"
                rows={4}
                value={state.note}
                onChange={this.handleChange}
                placeholder={__('Any specific instructions for your booking...', 'bookify')}
                className="font-normal text-sm w-full p-3 bg-slate-50 border border-transparent rounded-md focus:bg-white focus:border-blue-600 outline-none transition-all placeholder:text-slate-300 resize-none"
              />
            </div>
          </div>

          <div className="text-xs text-slate-400 leading-relaxed text-center mt-2" style={this.blockStyle(300)}>
            {__('By proceeding, you agree to Bookify\'s', 'bookify')}{' '}
            <a href="https://wpbookify.com/terms-and-conditions/" target="_blank" className="text-blue-600 font-bold cursor-pointer underline outline-none">{__('Terms of Service', 'bookify')}</a> {__('and', 'bookify')}{' '}
            <a href="https://wpbookify.com/privacy-policy/" target="_blank" className="text-blue-600 font-bold cursor-pointer underline outline-none">{__('Privacy Policy', 'bookify')}</a>.
          </div>
        </div>

        <div className="px-[20px] py-[10px] flex justify-end mt-auto sticky bottom-0 bg-white border-t border-slate-150">
          <button
            onClick={onBack}
            className="px-[16px] py-[6px] text-slate-400 text-sm font-bold rounded-sm hover:bg-slate-50 transition-colors"
          >
            {__('Back', 'bookify')}
          </button>
          <button
            disabled={!isFormValid}
            onClick={onNext}
            className="px-[16px] py-[6px] bg-blue-600 text-white text-sm font-bold rounded-sm shadow-xl shadow-blue-200 hover:bg-blue-700 disabled:opacity-50 disabled:shadow-none transition-all"
          >
            {__('Next', 'bookify')}
          </button>
        </div>
      </>
    );
  }
}

export default InfoStep;