'use client'
import { useState } from 'react'
import { useForm } from 'react-hook-form'

type FormData = {
  name: string; phone: string; email: string; estate: string
  wallA: string; wallB: string; height: string
  tiers: string; layout: string; paymentMethod: string; notes: string
}

export default function OrderForm() {
  const [done, setDone] = useState(false)
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>()
  if (done) return (
    <div style={{ textAlign: 'center', padding: '4rem 2rem' }}>
      <div style={{ fontSize: 48, marginBottom: 16 }}>🎉</div>
      <h2 style={{ fontSize: 22, marginBottom: 8 }}>Order Received!</h2>
      <p style={{ fontSize: 14, color: 'var(--body)', lineHeight: 1.7 }}>We'll contact you within 1 business day to confirm your order and send the deposit payment link. Production begins once we receive your 50% deposit.</p>
    </div>
  )
  const ipt: React.CSSProperties = { width: '100%', padding: '9px 12px', border: '1px solid var(--border)', borderRadius: 8, fontSize: 13.5, color: 'var(--heading)', background: 'var(--card-bg)', outline: 'none', boxSizing: 'border-box' }
  const lbl: React.CSSProperties = { fontSize: 12.5, fontWeight: 500, color: 'var(--heading)', display: 'block', marginBottom: 5 }
  const errS: React.CSSProperties = { fontSize: 11.5, color: '#e05252', marginTop: 4 }
  const row: React.CSSProperties = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }
  return (
    <form onSubmit={handleSubmit(() => setDone(true))} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={row}>
        <div><label style={lbl}>Full Name *</label><input {...register('name',{required:true})} style={ipt} placeholder="Your name" />{errors.name&&<div style={errS}>Required</div>}</div>
        <div><label style={lbl}>Phone *</label><input {...register('phone',{required:true})} style={ipt} placeholder="+65 9xxx xxxx" />{errors.phone&&<div style={errS}>Required</div>}</div>
      </div>
      <div style={row}>
        <div><label style={lbl}>Email *</label><input {...register('email',{required:true})} type="email" style={ipt} placeholder="you@email.com" />{errors.email&&<div style={errS}>Required</div>}</div>
        <div><label style={lbl}>BTO Estate *</label>
          <select {...register('estate',{required:true})} style={ipt}>
            <option value="">Select estate</option>
            {['Tengah','Punggol','Woodlands','Canberra','Tampines','Sengkang','Jurong West','Queenstown','Kallang','Ang Mo Kio','Bishan','Toa Payoh','Bedok','Clementi','Hougang','Sembawang','Other'].map(e=><option key={e}>{e}</option>)}
          </select>
          {errors.estate&&<div style={errS}>Required</div>}
        </div>
      </div>
      <div style={{ padding: '12px 14px', border: '0.5px solid var(--border)', borderRadius: 8, background: 'var(--section-alt)' }}>
        <div style={{ fontSize: 11.5, fontWeight: 500, color: 'var(--body)', marginBottom: 10, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Confirmed Dimensions (cm)</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
          <div><label style={lbl}>Wall A *</label><input {...register('wallA',{required:true})} style={ipt} placeholder="e.g. 180" />{errors.wallA&&<div style={errS}>Required</div>}</div>
          <div><label style={lbl}>Wall B *</label><input {...register('wallB',{required:true})} style={ipt} placeholder="e.g. 130" />{errors.wallB&&<div style={errS}>Required</div>}</div>
          <div><label style={lbl}>Height *</label><input {...register('height',{required:true})} style={ipt} placeholder="e.g. 230" />{errors.height&&<div style={errS}>Required</div>}</div>
        </div>
      </div>
      <div style={row}>
        <div><label style={lbl}>Tier Configuration *</label>
          <select {...register('tiers',{required:true})} style={ipt}>
            <option value="">Select tiers</option>
            {['3 tier','4 tier','5 tier','6 tier','Mixed (different tiers per arm)'].map(t=><option key={t}>{t}</option>)}
          </select>
          {errors.tiers&&<div style={errS}>Required</div>}
        </div>
        <div><label style={lbl}>Layout Type *</label>
          <select {...register('layout',{required:true})} style={ipt}>
            <option value="">Select layout</option>
            {['Standard L-shape','Extended L-shape','L with raised bottom shelf','U-shape (3 walls)'].map(l=><option key={l}>{l}</option>)}
          </select>
          {errors.layout&&<div style={errS}>Required</div>}
        </div>
      </div>
      <div><label style={lbl}>Preferred Payment Method *</label>
        <select {...register('paymentMethod',{required:true})} style={ipt}>
          <option value="">Select method</option>
          <option>PayNow</option>
          <option>Bank Transfer</option>
          <option>Credit / Debit Card</option>
        </select>
        {errors.paymentMethod&&<div style={errS}>Required</div>}
      </div>
      <div><label style={lbl}>Additional Notes</label><textarea {...register('notes')} rows={3} style={{...ipt, resize:'vertical'}} placeholder="Any special requirements, access restrictions, preferred installation dates, etc." /></div>
      <div style={{ padding: '12px 14px', border: '0.5px solid var(--gold)', borderRadius: 8, background: 'rgba(201,168,76,0.06)', fontSize: 12.5, color: 'var(--body)', lineHeight: 1.65 }}>
        <strong style={{ color: 'var(--gold)' }}>Payment terms:</strong> 50% deposit required to begin production. Balance due on delivery. We will send a payment link by WhatsApp within 1 business day.
      </div>
      <button type="submit" className="btn-gold" style={{ width: '100%', padding: '11px', cursor: 'pointer', border: 'none' }}>
        Submit Order →
      </button>
    </form>
  )
}