import { useState, useEffect } from 'react'
import Layout from '@/components/layout/Layout'
import { Card, EmptyState, Btn, Field, Input, showToast } from '@/components/ui'
import { useApp } from '@/lib/context'

export default function ShippingStandardPage() {
  const { user } = useApp()
  const [items, setItems] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [newText, setNewText] = useState('')
  const [adding, setAdding] = useState(false)

  const canEdit = user && (user.role === 'ADMIN' || user.role === 'QC')

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

  async function load() {
    setLoading(true)
    const res = await fetch('/api/shipping-standard')
    if (res.ok) { const { data } = await res.json(); setItems(data || []) }
    setLoading(false)
  }

  async function addItem() {
    if (!newText.trim()) return
    setAdding(true)
    const res = await fetch('/api/shipping-standard', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text: newText, source: 'Baseline' }),
    })
    setAdding(false)
    if (res.ok) {
      setNewText('')
      showToast('Added to shipping standard')
      load()
    } else {
      showToast('Failed to add', 'error')
    }
  }

  return (
    <Layout title="Shipping standard">
      <div style={{ marginBottom: '16px' }}>
        <h2 style={{ fontSize: '16px', fontWeight: '500', margin: 0 }}>Living shipping standard</h2>
        <p style={{ fontSize: '11px', color: '#aaa', margin: '2px 0 0' }}>What must be true before a product ships. Updates automatically when a client-reported quality escape is resolved.</p>
      </div>

      <Card>
        {loading ? (
          <div style={{ textAlign: 'center', padding: '32px', color: '#aaa', fontSize: '12px' }}>Loading…</div>
        ) : items.length === 0 ? (
          <EmptyState title="No standard items yet" message="Add baseline checks below, or resolve a client issue with 'update shipping standard' to add one automatically."/>
        ) : items.map((item: any, i: number) => (
          <div key={item.id} style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', border: '0.5px solid #eee', borderRadius: '8px', padding: '11px 13px', marginBottom: '8px' }}>
            <div style={{ width: '22px', height: '22px', borderRadius: '50%', background: '#f5f5f5', color: '#aaa', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '11px', fontWeight: '500', flexShrink: 0 }}>{i + 1}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: '13px', lineHeight: '1.5' }}>{item.text}</div>
              <div style={{ fontSize: '10px', color: '#aaa', marginTop: '3px' }}>
                Source: {item.source === 'Baseline' ? 'Baseline' : <span style={{ color: '#534AB7', fontWeight: '500' }}>{item.source}</span>}
                {item.source !== 'Baseline' && <> · {new Date(item.createdAt).toLocaleDateString()}</>}
              </div>
            </div>
          </div>
        ))}

        {canEdit && (
          <div style={{ display: 'flex', gap: '8px', marginTop: '12px', borderTop: '0.5px solid #eee', paddingTop: '14px' }}>
            <div style={{ flex: 1 }}>
              <Input value={newText} onChange={e => setNewText(e.target.value)} placeholder="Add a baseline check…"/>
            </div>
            <Btn onClick={addItem} disabled={adding}>{adding ? 'Adding…' : 'Add'}</Btn>
          </div>
        )}
      </Card>
    </Layout>
  )
}