"use client";
import React, { useState } from "react";
import axios from "axios";

export default function UI({ data }) {
  if (!data) return null;

  const contacts = Array.isArray(data.items) ? data.items : [];

  const [form, setForm] = useState({
    name: '', phone: '', email: '', department: '', message: ''
  });
  const [submitting, setSubmitting] = useState(false);
  const [modal, setModal] = useState({ open: false, message: '', type: 'success' });

  function handleInputChange(e) {
    const { name, value } = e.target;
    setForm(prev => ({ ...prev, [name]: value }));
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setSubmitting(true);
    try {
      const content = [
        `Name: ${form.name}`,
        `Phone: ${form.phone}`,
        `Email: ${form.email}`,
        `Department: ${form.department}`,
        `Message:<br>${form.message.replace(/\n/g, '<br>')}`
      ].join("<br>");
      const res = await axios.post('/api/send-email', {
        subject: `Website Contact Form: ${form.name}`,
        content
      });
      if (res.data.success) {
        const message = typeof res.data.message === 'string' ? res.data.message : 'Email sent successfully!';
        setModal({ open: true, message, type: 'success' });
        setForm({ name: '', phone: '', email: '', department: '', message: '' });
      } else {
        const errorMessage = typeof res.data.error === 'string' ? res.data.error : 'Failed to send email';
        setModal({ open: true, message: errorMessage, type: 'error' });
      }
    } catch (err) {
      let errorMessage = 'Failed to send email';
      if (err?.response?.data?.error) {
        errorMessage = typeof err.response.data.error === 'string' ? err.response.data.error : 'Failed to send email';
      } else if (err?.message) {
        errorMessage = typeof err.message === 'string' ? err.message : 'Failed to send email';
      }
      setModal({ open: true, message: errorMessage, type: 'error' });
    } finally {
      setSubmitting(false);
    }
  }

  function closeModal() {
    setModal({ open: false, message: '', type: 'success' });
  }

  return (
    <section className="wrapper !bg-[#ffffff] relative border-0 upper-end before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#fefefe] before:content-[''] before:block before:absolute before:z-0 before:border-y-transparent before:border-0 before:border-solid before:right-0">
      <div className="container pb-12">
        <div className="flex flex-wrap mx-[-15px] !mb-[4.5rem] md:!mb-24">
          <div className="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[-9rem]">
            <div className="card">
              <div className="flex flex-wrap mx-0">
                <div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !self-stretch">
                  <div className="map map-full rounded-t-[0.4rem] rounded-lg-start h-full min-h-[15rem]">
                    <iframe
                      src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3308.116930443662!2d-117.6923042!3d33.9895302!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dcccd7e575dffd%3A0x30aebc3ca15ed41d!2s14508%20Central%20Ave%2C%20Chino%2C%20CA%2091710%2C%20USA!5e0!3m2!1sen!2sjp!4v1712719609523!5m2!1sen!2sjp"
                      style={{ width: "100%", height: "100%", border: 0 }}
                      allowFullScreen=""
                    />
                  </div>
                </div>
                <div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !my-[50px] max-w-full">
                  <div className="flex flex-col gap-5">
                    {contacts.map((item, idx) => (
                      <div className="flex flex-row items-start gap-3" key={idx}>
                        {(item.item_html_code || item.item_icon) && (
                          <div className="w-8 h-8 flex items-center justify-center text-xl">
                            {item.item_html_code ? (
                              <span style={{ display: 'inline-block', width: '2rem', height: '2rem' }}
                                    dangerouslySetInnerHTML={{ __html: item.item_html_code }} />
                            ) : (
                              <img src={item.item_icon} alt="icon" style={{ width: '2rem', height: '2rem', objectFit: 'contain' }} />
                            )}
                          </div>
                        )}
                        <div className="min-w-[90px]">
                          {item.item_title}
                        </div>
                        <div className="break-all">
                          {/(mail)/i.test(item.item_title) ? (
                            <a href={`mailto:${item.item_subtitle || item.item_value || ''}`} className="!text-inherit hover:!text-[#1fc76f]">
                              {item.item_subtitle || item.item_value || ''}
                            </a>
                          ) : /(phone)/i.test(item.item_title) ? (
                            <a href={`tel:${item.item_subtitle || item.item_value || ''}`} className="hover:underline">
                              {item.item_subtitle || item.item_value || ''}
                            </a>
                          ) : (
                            <span>{item.item_subtitle || item.item_value || ''}</span>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-wrap mx-[-15px]">
          <div className="xl:w-8/12 xl:!ml-[16.66666667%] lg:w-10/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full">
            <h2 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3 !text-center">
            {data.title}
            </h2>
            <p className="lead !leading-[1.65] text-[0.9rem] font-medium !text-center !mb-10">
            {data.description}
            </p>
            <form className="contact-form needs-validation" onSubmit={handleSubmit}>
              <div className="messages" />
              {modal.open && (
                <div style={{
                  position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh',
                  background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center',
                  justifyContent: 'center', zIndex: 9999
                }}>
                  <div style={{
                    background: '#fff', borderRadius: '16px', padding: '2.5rem 3.5rem',
                    minWidth: '390px', maxWidth: '96vw', boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
                    textAlign: 'center', color: modal.type === 'success' ? '#1fc76f' : '#e53e3e',
                    fontWeight: 500
                  }}>
                    <div style={{ fontSize: '1.1rem', marginBottom: '1.5rem' }}>{modal.message}</div>
                    <button type="button" onClick={closeModal} style={{
                      background: modal.type === 'success' ? '#1fc76f' : '#e53e3e',
                      color: '#fff', border: 'none', borderRadius: '24px', padding: '0.5rem 2rem',
                      fontSize: '1rem', cursor: 'pointer', boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
                    }}>OK</button>
                  </div>
                </div>
              )}
              <div className="flex flex-wrap mx-[-10px]">
                <div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                  <div className="form-floating relative !mb-4">
                    <input id="form_name" type="text" name="name" className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" required value={form.name} onChange={handleInputChange} />
                    <label htmlFor="form_name" className="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Name *</label>
                    <div className="valid-feedback">Looks good!</div>
                    <div className="invalid-feedback">Please enter your first name.</div>
                  </div>
                </div>
                <div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                  <div className="form-floating relative !mb-4">
                    <input id="form_phone" type="text" name="phone" className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" value={form.phone} onChange={handleInputChange} />
                    <label htmlFor="form_phone" className="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Phone</label>
                    <div className="valid-feedback">Looks good!</div>
                    <div className="invalid-feedback">Please enter your phone number.</div>
                  </div>
                </div>
                <div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                  <div className="form-floating relative !mb-4">
                    <input id="form_email" type="email" name="email" className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" required value={form.email} onChange={handleInputChange} />
                    <label htmlFor="form_email" className="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Email *</label>
                    <div className="valid-feedback">Looks good!</div>
                    <div className="invalid-feedback">Please provide a valid email address.</div>
                  </div>
                </div>
                <div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
                  <div className="form-select-wrapper !mb-4">
                    <select className="form-select" id="form-select" name="department" value={form.department} onChange={handleInputChange}>
                      <option value="">Select a department</option>
                      <option value="Sales">Sales</option>
                      <option value="Marketing">Marketing</option>
                      <option value="Customer Support">Customer Support</option>
                    </select>
                    <div className="valid-feedback">Looks good!</div>
                    <div className="invalid-feedback">Please select a department.</div>
                  </div>
                </div>
                <div className="w-full flex-[0_0_auto] !px-[15px] max-w-full">
                  <div className="form-floating relative !mb-4">
                    <textarea id="form_message" name="message" className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" style={{ height: 150 }} required value={form.message} onChange={handleInputChange} />
                    <label htmlFor="form_message" className="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Message *</label>
                    <div className="valid-feedback">Looks good!</div>
                    <div className="invalid-feedback">Please enter your messsage.</div>
                  </div>
                </div>
                <div className="w-full flex-[0_0_auto] !px-[15px] max-w-full !text-center">
                  <input type="submit" className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] !rounded-[50rem] btn-send !mb-3 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" value={submitting ? 'Sending...' : (data.button_text || 'Submit')} disabled={submitting} />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}
