import { useState, useEffect } from 'react'
import Layout from '@/components/layout/Layout'
import { Card, EmptyState, Btn, Tag, showToast } from '@/components/ui'
import { FormFieldList } from '@/components/forms/FieldRenderer'
import { useApp } from '@/lib/context'

export default function FillPage() {
  const { user } = useApp()
  const [forms, setForms] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [selected, setSelected] = useState<any>(null)
  const [answers, setAnswers] = useState<Record<string, any>>({})
  const [submitting, setSubmitting] = useState(false)
  const [submitted, setSubmitted] = useState(false)

  useEffect(() => { loadForms() }, [])

  async function loadForms() {
    setLoading(true)
    const res = await fetch('/api/forms?status=ACTIVE')
    if (res.ok) {
      const { data } = await res.json()
      setForms(data || [])
    }
    setLoading(false)
  }

  function selectForm(form: any) {
    setSelected(form)
    setAnswers({})
    setSubmitted(false)
  }

  async function submitForm() {
    const required = selected.fields.filter((f: any) => f.required)
    for (const f of required) {
      if (!answers[f.id]) {
        showToast(`"${f.label}" is required`, 'error'); return
      }
    }
    setSubmitting(true)
    const res = await fetch('/api/submissions', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ formId: selected.id, data: answers }),
    })
    setSubmitting(false)
    if (res.ok) {
      const { submissionCount } = await res.json()
      setSubmitted(true)
      showToast(`Submitted — you are contributor #${submissionCount}`)
    } else {
      showToast('Submission failed', 'error')
    }
  }

  function setAnswer(fieldId: string, value: any) {
    setAnswers(a => ({ ...a, [fieldId]: value }))
  }

  return (
    <Layout title="My forms">
      {!selected ? (
        <>
          <div style={{ marginBottom: '16px' }}>
            <h2 style={{ fontSize: '16px', fontWeight: '500', margin: 0 }}>First build forms</h2>
            <p style={{ fontSize: '11px', color: '#aaa', margin: '2px 0 0' }}>Select a form to fill out — your data helps set quality standards</p>
          </div>

          {loading ? (
            <div style={{ textAlign: 'center', padding: '40px', color: '#aaa', fontSize: '12px' }}>Loading…</div>
          ) : forms.length === 0 ? (
            <EmptyState
              title="No active forms"
              message="Your admin hasn't published any data collection forms yet. Check back soon."
            />
          ) : (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '12px' }}>
              {forms.map((form: any) => (
                <div key={form.id} onClick={() => selectForm(form)} style={{
                  background: 'white', border: '0.5px solid #eee', borderRadius: '12px',
                  padding: '16px', cursor: 'pointer', transition: 'border-color 0.1s'
                }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: '8px' }}>
                    <div style={{ width: '32px', height: '32px', borderRadius: '8px', background: '#EEEDFE', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#534AB7" strokeWidth="2">
                        <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                      </svg>
                    </div>
                    <Tag color="green">Active</Tag>
                  </div>
                  <div style={{ fontSize: '13px', fontWeight: '500', marginBottom: '4px' }}>{form.name}</div>
                  {form.product && <div style={{ fontSize: '11px', color: '#aaa', marginBottom: '8px' }}>{form.product}</div>}
                  <div style={{ fontSize: '11px', color: '#888' }}>{form.fields?.length || 0} fields · {form._count?.submissions || 0} submissions so far</div>
                  <div style={{ marginTop: '12px' }}>
                    <Btn size="sm" style={{ width: '100%', justifyContent: 'center' }}>Fill out →</Btn>
                  </div>
                </div>
              ))}
            </div>
          )}
        </>
      ) : submitted ? (
        <Card style={{ maxWidth: '480px', margin: '40px auto', textAlign: 'center', padding: '32px' }}>
          <div style={{ width: '48px', height: '48px', borderRadius: '50%', background: '#EAF3DE', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1D9E75" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
          </div>
          <div style={{ fontSize: '16px', fontWeight: '500', marginBottom: '6px' }}>Submitted</div>
          <div style={{ fontSize: '12px', color: '#888', marginBottom: '20px' }}>Your data has been recorded and will contribute to setting quality standards for {selected.product || selected.name}.</div>
          <div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
            <Btn variant="ghost" onClick={() => { setSubmitted(false); setAnswers({}) }}>Fill again</Btn>
            <Btn onClick={() => setSelected(null)}>Back to forms</Btn>
          </div>
        </Card>
      ) : (
        <div style={{ maxWidth: '560px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
            <button onClick={() => setSelected(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#aaa', padding: '4px', display: 'flex' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5m7-7l-7 7 7 7"/></svg>
            </button>
            <div>
              <h2 style={{ fontSize: '15px', fontWeight: '500', margin: 0 }}>{selected.name}</h2>
              {selected.product && <div style={{ fontSize: '11px', color: '#aaa' }}>{selected.product}</div>}
            </div>
          </div>

          <Card>
            <div style={{ background: '#EEEDFE', borderRadius: '8px', padding: '9px 12px', fontSize: '11px', color: '#3C3489', marginBottom: '16px' }}>
              Fill in each field from your direct observation. Your submission is anonymous to QC — it's just your data point.
            </div>

            <FormFieldList
              fields={(selected.fields || []).slice().sort((a: any, b: any) => a.order - b.order)}
              values={answers}
              onChange={setAnswer}
            />

            <div style={{ display: 'flex', gap: '8px', marginTop: '20px', paddingTop: '16px', borderTop: '0.5px solid #eee' }}>
              <Btn variant="ghost" onClick={() => { setAnswers({}); }}>Clear</Btn>
              <Btn onClick={submitForm} disabled={submitting} style={{ flex: 1, justifyContent: 'center' }}>
                {submitting ? 'Submitting…' : 'Submit build data'}
              </Btn>
            </div>
          </Card>
        </div>
      )}
    </Layout>
  )
}