import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import toast from 'react-hot-toast'
import client from '../api/client'

// ── Helpers ───────────────────────────────────────────────────────────────────

function fmt(n) {
  if (n == null) return '—'
  return n.toLocaleString('el-GR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €'
}

function fmtDate(iso) {
  if (!iso) return '—'
  return new Date(iso).toLocaleDateString('el-GR', { day: '2-digit', month: '2-digit', year: 'numeric' })
}

function fmtDateTime(iso) {
  if (!iso) return '—'
  return new Date(iso).toLocaleString('el-GR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })
}

const ORDER_STATUS_LABELS = {
  closed: 'Κλειστή', paid: 'Πληρωμένη', open: 'Ανοιχτή',
  partially_paid: 'Μερική πλ.', cancelled: 'Ακυρωμένη',
}
const ORDER_STATUS_COLORS = {
  closed: '#6b7280', paid: '#16a34a', open: '#3b82f6',
  partially_paid: '#d97706', cancelled: '#ef4444',
}

const inputStyle = {
  width: '100%', padding: '8px 11px', border: '1px solid #e5e7eb',
  borderRadius: 8, fontSize: 13.5, outline: 'none', fontFamily: 'inherit', background: 'white',
}

// ── Customer modal (create / edit) ───────────────────────────────────────────

const EMPTY_FORM = { name: '', nickname: '', phone: '', email: '', notes: '' }

function CustomerModal({ initial, onClose, onSave, isPending }) {
  const [form, setForm] = useState(initial ?? EMPTY_FORM)
  const f = (k, v) => setForm(p => ({ ...p, [k]: v }))
  const isNew = !initial?.id

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 50, padding: 20 }}>
      <div style={{ background: 'white', borderRadius: 16, width: '100%', maxWidth: 480, boxShadow: '0 20px 60px rgba(0,0,0,0.18)', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '18px 22px 14px', borderBottom: '1px solid #f0f0ef', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h2 style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>{isNew ? 'Νέος Πελάτης' : 'Επεξεργασία Πελάτη'}</h2>
          <button onClick={onClose} style={{ background: 'none', border: 'none', fontSize: 18, cursor: 'pointer', color: '#9ca3af' }}>✕</button>
        </div>
        <div style={{ padding: '18px 22px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div>
            <label style={{ fontSize: 12, fontWeight: 600, color: '#374151', display: 'block', marginBottom: 5 }}>Όνομα *</label>
            <input style={inputStyle} value={form.name} onChange={e => f('name', e.target.value)} autoFocus placeholder="π.χ. Γιώργος Παπαδόπουλος" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div>
              <label style={{ fontSize: 12, fontWeight: 600, color: '#374151', display: 'block', marginBottom: 5 }}>Παρατσούκλι</label>
              <input style={inputStyle} value={form.nickname} onChange={e => f('nickname', e.target.value)} placeholder="π.χ. Μεγάλος Γιάννης" />
            </div>
            <div>
              <label style={{ fontSize: 12, fontWeight: 600, color: '#374151', display: 'block', marginBottom: 5 }}>Τηλέφωνο</label>
              <input style={inputStyle} value={form.phone} onChange={e => f('phone', e.target.value)} placeholder="π.χ. 6912345678" />
            </div>
          </div>
          <div>
            <label style={{ fontSize: 12, fontWeight: 600, color: '#374151', display: 'block', marginBottom: 5 }}>Email</label>
            <input style={inputStyle} type="email" value={form.email} onChange={e => f('email', e.target.value)} placeholder="email@example.com" />
          </div>
          <div>
            <label style={{ fontSize: 12, fontWeight: 600, color: '#374151', display: 'block', marginBottom: 5 }}>Σημειώσεις <span style={{ fontWeight: 400, color: '#9ca3af' }}>(αλλεργίες, προτιμήσεις…)</span></label>
            <textarea style={{ ...inputStyle, resize: 'none' }} rows={3} value={form.notes} onChange={e => f('notes', e.target.value)} placeholder="π.χ. Αλλεργία στους ξηρούς καρπούς, VIP πελάτης…" />
          </div>
        </div>
        <div style={{ padding: '14px 22px', borderTop: '1px solid #f0f0ef', display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
          <button onClick={onClose} style={{ padding: '8px 18px', border: '1px solid #e5e7eb', background: 'white', borderRadius: 8, fontSize: 13, cursor: 'pointer' }}>Ακύρωση</button>
          <button
            onClick={() => onSave(form)}
            disabled={!form.name.trim() || isPending}
            style={{ padding: '8px 20px', border: 'none', borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: form.name.trim() ? 'pointer' : 'default', background: form.name.trim() ? '#111827' : '#e5e7eb', color: form.name.trim() ? 'white' : '#9ca3af' }}
          >
            {isPending ? 'Αποθήκευση…' : isNew ? 'Δημιουργία' : 'Αποθήκευση'}
          </button>
        </div>
      </div>
    </div>
  )
}

// ── Customer detail panel ─────────────────────────────────────────────────────

function CustomerDetail({ customer, onEdit, onClose }) {
  const { data, isLoading } = useQuery({
    queryKey: ['customer-orders', customer.id],
    queryFn: () => client.get(`/api/customers/${customer.id}/orders`).then(r => r.data),
    staleTime: 30_000,
  })

  const { data: tabsData = [] } = useQuery({
    queryKey: ['customer-tabs', customer.id],
    queryFn: () => client.get(`/api/tabs/customer/${customer.id}`).then(r => r.data),
    staleTime: 30_000,
  })

  const openTab = tabsData.find(t => t.status === 'open')
  const orders = data?.orders || []

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'white', borderLeft: '1px solid #f0f0ef' }}>
      {/* Header */}
      <div style={{ padding: '18px 22px 14px', borderBottom: '1px solid #f0f0ef', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', flexShrink: 0 }}>
        <div>
          <div style={{ fontSize: 18, fontWeight: 800, color: '#111315' }}>{customer.name}</div>
          {customer.nickname && <div style={{ fontSize: 13, color: '#9ca3af', marginTop: 2 }}>«{customer.nickname}»</div>}
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <button onClick={onEdit} style={{ padding: '5px 12px', border: '1px solid #e5e7eb', background: 'white', borderRadius: 7, fontSize: 12, cursor: 'pointer', color: '#374151', fontWeight: 500 }}>Επεξεργασία</button>
          <button onClick={onClose} style={{ background: 'none', border: 'none', fontSize: 18, cursor: 'pointer', color: '#9ca3af', padding: '0 4px' }}>✕</button>
        </div>
      </div>

      {/* Stats row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, padding: '14px 22px', flexShrink: 0, borderBottom: '1px solid #f0f0ef' }}>
        {[
          { label: 'Επισκέψεις', value: customer.visit_count },
          { label: 'Σύνολο εξόδων', value: fmt(customer.total_spent) },
          { label: 'Μέσος λογ.', value: customer.visit_count > 0 ? fmt(customer.total_spent / customer.visit_count) : '—' },
        ].map(s => (
          <div key={s.label} style={{ background: '#f9fafb', borderRadius: 10, padding: '10px 12px', textAlign: 'center' }}>
            <div style={{ fontSize: 10, color: '#9ca3af', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{s.label}</div>
            <div style={{ fontSize: 16, fontWeight: 800, color: '#111315', marginTop: 3 }}>{s.value}</div>
          </div>
        ))}
      </div>

      {/* Open tab banner */}
      {openTab && (
        <div style={{ padding: '10px 22px', borderBottom: '1px solid #f0f0ef', flexShrink: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 10 }}>
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: '#dc2626' }}>Ανοιχτή Καρτέλα</div>
              <div style={{ fontSize: 12, color: '#9ca3af', marginTop: 1 }}>
                {openTab.entries.length} χρεώσεις · πληρωμένο {fmt(openTab.total_paid)}
              </div>
            </div>
            <div style={{ fontSize: 18, fontWeight: 800, color: '#dc2626' }}>{fmt(openTab.balance)}</div>
          </div>
        </div>
      )}

      {/* Contact info */}
      <div style={{ padding: '12px 22px', borderBottom: '1px solid #f0f0ef', flexShrink: 0 }}>
        {(customer.phone || customer.email || customer.notes) ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 13 }}>
            {customer.phone && <div><span style={{ color: '#9ca3af', marginRight: 6 }}>📞</span>{customer.phone}</div>}
            {customer.email && <div><span style={{ color: '#9ca3af', marginRight: 6 }}>✉</span>{customer.email}</div>}
            {customer.notes && (
              <div style={{ marginTop: 4, padding: '8px 12px', background: '#fffbeb', borderRadius: 8, border: '1px solid #fef3c7', fontSize: 12.5, color: '#92400e', lineHeight: 1.5 }}>
                📝 {customer.notes}
              </div>
            )}
          </div>
        ) : (
          <div style={{ fontSize: 12.5, color: '#d1d5db' }}>Δεν υπάρχουν στοιχεία επικοινωνίας.</div>
        )}
      </div>

      {/* Visit history */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 22px' }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: '#9ca3af', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 10 }}>Ιστορικό Επισκέψεων</div>
        {isLoading && <div style={{ color: '#9ca3af', fontSize: 13 }}>Φόρτωση…</div>}
        {!isLoading && orders.length === 0 && (
          <div style={{ color: '#d1d5db', fontSize: 13 }}>Δεν υπάρχουν επισκέψεις ακόμα.</div>
        )}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {orders.map(o => (
            <div key={o.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', border: '1px solid #f0f0ef', borderRadius: 10, background: 'white' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#111315' }}>
                  {o.table_name ? `Τραπέζι ${o.table_name}` : 'Χωρίς τραπέζι'}
                  {' '}
                  <span style={{ fontSize: 11, fontWeight: 700, padding: '1px 6px', borderRadius: 99, background: '#f3f4f6', color: ORDER_STATUS_COLORS[o.status] || '#6b7280' }}>
                    {ORDER_STATUS_LABELS[o.status] || o.status}
                  </span>
                </div>
                <div style={{ fontSize: 11.5, color: '#9ca3af', marginTop: 1 }}>
                  {fmtDateTime(o.opened_at)} · {o.item_count} αντικ.
                </div>
              </div>
              <div style={{ fontSize: 14, fontWeight: 700, color: '#111315', whiteSpace: 'nowrap' }}>{fmt(o.total)}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

// ── Main page ─────────────────────────────────────────────────────────────────

export default function CustomersPage() {
  const qc = useQueryClient()
  const [search, setSearch] = useState('')
  const [selected, setSelected] = useState(null)  // customer being viewed
  const [modal, setModal] = useState(null)         // null | { customer } | { customer: null }

  const { data: customers = [], isLoading } = useQuery({
    queryKey: ['customers', search],
    queryFn: () => client.get('/api/customers/', { params: search ? { search } : {} }).then(r => r.data),
    staleTime: 30_000,
  })

  const save = useMutation({
    mutationFn: ({ form, id }) => id
      ? client.put(`/api/customers/${id}`, form)
      : client.post('/api/customers/', form),
    onSuccess: (res) => {
      qc.invalidateQueries({ queryKey: ['customers'] })
      if (selected && res.data?.id === selected.id) {
        setSelected(res.data)
      }
      setModal(null)
      toast.success('Αποθηκεύτηκε')
    },
    onError: () => toast.error('Σφάλμα αποθήκευσης'),
  })

  const deactivate = useMutation({
    mutationFn: (id) => client.delete(`/api/customers/${id}`),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['customers'] })
      if (selected?.id) setSelected(null)
      toast.success('Αποενεργοποιήθηκε')
    },
    onError: () => toast.error('Σφάλμα'),
  })

  const activeCount = customers.length

  return (
    <div style={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
      {/* Left: list */}
      <div style={{ display: 'flex', flexDirection: 'column', width: selected ? 360 : '100%', flexShrink: 0, borderRight: selected ? '1px solid #f0f0ef' : 'none', overflow: 'hidden' }}>
        {/* Header */}
        <div style={{ padding: '18px 24px 14px', borderBottom: '1px solid #f0f0ef', flexShrink: 0, background: 'white' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <div>
              <h1 style={{ margin: 0, fontSize: 20, fontWeight: 800, color: '#111315' }}>Πελάτες</h1>
              <p style={{ margin: '2px 0 0', fontSize: 13, color: '#9ca3af' }}>{activeCount} ενεργοί πελάτες</p>
            </div>
            <button
              onClick={() => setModal({ customer: null })}
              style={{ padding: '8px 16px', borderRadius: 9, border: 'none', background: '#111827', color: 'white', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}
            >
              + Νέος
            </button>
          </div>
          <input
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Αναζήτηση με όνομα, παρατσούκλι ή τηλέφωνο…"
            style={{ ...inputStyle, fontSize: 13 }}
          />
        </div>

        {/* List */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {isLoading && <div style={{ color: '#9ca3af', fontSize: 13, textAlign: 'center', padding: '24px 0' }}>Φόρτωση…</div>}
          {!isLoading && customers.length === 0 && (
            <div style={{ color: '#9ca3af', fontSize: 13, textAlign: 'center', padding: '32px 0' }}>
              {search ? 'Δεν βρέθηκαν αποτελέσματα.' : 'Δεν υπάρχουν πελάτες ακόμα.'}
            </div>
          )}
          {customers.map(c => (
            <button
              key={c.id}
              onClick={() => setSelected(selected?.id === c.id ? null : c)}
              style={{
                display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
                border: `1px solid ${selected?.id === c.id ? '#3b82f6' : '#f0f0ef'}`,
                borderRadius: 10, background: selected?.id === c.id ? '#eff6ff' : 'white',
                cursor: 'pointer', textAlign: 'left', width: '100%',
              }}
            >
              {/* Avatar */}
              <div style={{
                width: 38, height: 38, borderRadius: '50%', flexShrink: 0,
                background: `hsl(${[...c.name].reduce((a, ch) => a + ch.charCodeAt(0), 0) % 360},55%,62%)`,
                color: 'white', fontSize: 15, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {c.name.trim()[0].toUpperCase()}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: '#111315', display: 'flex', alignItems: 'center', gap: 6 }}>
                  {c.name}
                  {c.nickname && <span style={{ fontSize: 11, fontWeight: 500, color: '#9ca3af' }}>«{c.nickname}»</span>}
                </div>
                <div style={{ fontSize: 12, color: '#9ca3af', marginTop: 1 }}>
                  {c.phone || c.email || 'Χωρίς στοιχεία'}
                  {c.visit_count > 0 && <span style={{ marginLeft: 8, color: '#6b7280' }}>· {c.visit_count} επισκέψεις</span>}
                </div>
              </div>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#111315', whiteSpace: 'nowrap', flexShrink: 0 }}>
                {c.total_spent > 0 ? fmt(c.total_spent) : ''}
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Right: detail panel */}
      {selected && (
        <div style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
          <CustomerDetail
            customer={selected}
            onEdit={() => setModal({ customer: selected })}
            onClose={() => setSelected(null)}
          />
        </div>
      )}

      {modal && (
        <CustomerModal
          initial={modal.customer ? {
            ...modal.customer,
            nickname: modal.customer.nickname || '',
            phone: modal.customer.phone || '',
            email: modal.customer.email || '',
            notes: modal.customer.notes || '',
          } : null}
          onClose={() => setModal(null)}
          isPending={save.isPending}
          onSave={(form) => save.mutate({
            form: {
              name: form.name,
              nickname: form.nickname || null,
              phone: form.phone || null,
              email: form.email || null,
              notes: form.notes || null,
            },
            id: modal.customer?.id,
          })}
        />
      )}
    </div>
  )
}