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

const ZONE_COLORS = ['#6366f1','#0ea5e9','#10b981','#f59e0b','#ef4444','#ec4899','#8b5cf6','#14b8a6','#f97316','#64748b']

function ZoneColorPicker({ value, onChange }) {
  return (
    <div className="flex flex-wrap gap-2 mt-1">
      <button
        type="button"
        onClick={() => onChange(null)}
        className="w-7 h-7 rounded-full border-2 bg-gray-200 transition-all"
        style={{ borderColor: !value ? '#000' : 'transparent' }}
        title="Χωρίς χρώμα"
      />
      {ZONE_COLORS.map(c => (
        <button
          key={c}
          type="button"
          onClick={() => onChange(c)}
          className="w-7 h-7 rounded-full border-2 transition-all"
          style={{ background: c, borderColor: value === c ? '#000' : 'transparent' }}
        />
      ))}
    </div>
  )
}

export default function TablesPage() {
  const qc = useQueryClient()
  const [addModal, setAddModal] = useState(false)
  const [editModal, setEditModal] = useState(null)
  const [batchModal, setBatchModal] = useState(null)   // group object or null
  const [groupModal, setGroupModal] = useState(null)   // null | {} | group object
  const [confirmDelete, setConfirmDelete] = useState(null)
  const [showInactive, setShowInactive] = useState(false)
  const [activeTab, setActiveTab] = useState('all')   // 'all' | group.id

  const { data: tables = [], isLoading } = useQuery({
    queryKey: ['tables-all', showInactive],
    queryFn: () => client.get(`/api/tables/?include_inactive=${showInactive}`).then(r => r.data),
  })

  const { data: groups = [] } = useQuery({
    queryKey: ['table-groups'],
    queryFn: () => client.get('/api/tables/groups').then(r => r.data),
  })

  const invalidate = () => {
    qc.invalidateQueries({ queryKey: ['tables-all'] })
    qc.invalidateQueries({ queryKey: ['tables'] })
  }
  const invalidateGroups = () => qc.invalidateQueries({ queryKey: ['table-groups'] })

  const createTable = useMutation({
    mutationFn: (body) => client.post('/api/tables/', body),
    onSuccess: () => { toast.success('Τραπέζι δημιουργήθηκε'); setAddModal(false); invalidate() },
    onError: (err) => toast.error(err.response?.data?.detail || 'Σφάλμα'),
  })

  const batchCreate = useMutation({
    mutationFn: (body) => client.post('/api/tables/batch', body),
    onSuccess: (res) => { toast.success(`${res.data.length} τραπέζια δημιουργήθηκαν`); setBatchModal(null); invalidate() },
    onError: (err) => toast.error(err.response?.data?.detail || 'Σφάλμα'),
  })

  const updateTable = useMutation({
    mutationFn: ({ id, ...body }) => client.put(`/api/tables/${id}`, body),
    onSuccess: () => { toast.success('Αποθηκεύτηκε'); setEditModal(null); invalidate() },
    onError: () => toast.error('Σφάλμα'),
  })

  const deleteTable = useMutation({
    mutationFn: ({ id, hard }) => client.delete(`/api/tables/${id}?hard=${hard}`),
    onSuccess: (_, vars) => {
      toast.success(vars.hard ? 'Διαγράφηκε' : 'Απενεργοποιήθηκε')
      setConfirmDelete(null)
      invalidate()
    },
    onError: (err) => toast.error(err.response?.data?.detail || 'Σφάλμα'),
  })

  const saveGroup = useMutation({
    mutationFn: (body) => groupModal?.id
      ? client.put(`/api/tables/groups/${groupModal.id}`, body)
      : client.post('/api/tables/groups', body),
    onSuccess: () => { toast.success('Ζώνη αποθηκεύτηκε'); setGroupModal(null); invalidateGroups(); invalidate() },
    onError: (err) => toast.error(err.response?.data?.detail || 'Σφάλμα'),
  })

  const deleteGroup = useMutation({
    mutationFn: (id) => client.delete(`/api/tables/groups/${id}`),
    onSuccess: () => { toast.success('Ζώνη διαγράφηκε'); setGroupModal(null); invalidateGroups(); invalidate() },
    onError: () => toast.error('Σφάλμα'),
  })

  // Filter tables for the active tab
  const visibleTables = activeTab === 'all'
    ? tables
    : activeTab === 'ungrouped'
      ? tables.filter(t => !t.group_id)
      : tables.filter(t => t.group_id === activeTab)

  if (isLoading) return <div className="flex items-center justify-center h-64 text-gray-400">Φόρτωση…</div>

  return (
    <div className="space-y-4">
      <div className="flex gap-2 flex-wrap items-center justify-end">
        <label className="flex items-center gap-2 text-sm text-gray-600 cursor-pointer mr-auto">
          <input type="checkbox" checked={showInactive} onChange={e => setShowInactive(e.target.checked)} className="accent-primary-700" />
          Εμφάνιση ανενεργών
        </label>
        <button onClick={() => setGroupModal({})} className="btn btn-secondary text-sm">+ Νέα ζώνη</button>
        <button onClick={() => setAddModal(true)} className="btn btn-primary text-sm">+ Νέο τραπέζι</button>
      </div>

      {/* Zone tabs */}
      <div className="flex gap-1 flex-wrap border-b border-gray-200 pb-0">
        {[
          { id: 'all', label: 'Όλα', color: null },
          ...groups.map(g => ({ id: g.id, label: g.prefix ? `${g.prefix} – ${g.name}` : g.name, color: g.color, group: g })),
          ...(tables.some(t => !t.group_id) ? [{ id: 'ungrouped', label: 'Χωρίς ζώνη', color: null }] : []),
        ].map(tab => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${
              activeTab === tab.id
                ? 'bg-white border border-b-white border-gray-200 -mb-px text-primary-700'
                : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
            }`}
          >
            {tab.color && <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ background: tab.color }} />}
            {tab.label}
            <span className="ml-0.5 text-xs text-gray-400">
              ({tab.id === 'all' ? tables.length : tab.id === 'ungrouped' ? tables.filter(t => !t.group_id).length : tables.filter(t => t.group_id === tab.id).length})
            </span>
          </button>
        ))}
      </div>

      {/* Zone header (when viewing a specific zone) */}
      {activeTab !== 'all' && activeTab !== 'ungrouped' && (() => {
        const g = groups.find(g => g.id === activeTab)
        if (!g) return null
        return (
          <div className="flex items-center gap-3">
            <div>
              <span className="font-semibold text-gray-700">{g.name}</span>
              {g.prefix && <span className="ml-2 text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded font-mono">{g.prefix}</span>}
            </div>
            <button onClick={() => setGroupModal(g)} className="text-xs text-gray-400 hover:text-gray-600 underline">Επεξεργασία ζώνης</button>
            <button onClick={() => setBatchModal(g)} className="btn btn-secondary text-xs px-3 py-1 min-h-0 h-7">+ Μαζική προσθήκη</button>
          </div>
        )
      })()}

      {/* Tables list */}
      <div className="card divide-y divide-gray-100">
        {visibleTables.length === 0 && (
          <p className="px-4 py-8 text-sm text-gray-400 text-center">
            {showInactive ? 'Δεν υπάρχουν τραπέζια.' : 'Δεν υπάρχουν ενεργά τραπέζια.'}
          </p>
        )}
        {visibleTables.map((t, idx) => (
          <div key={t.id} className={`flex items-center gap-4 px-4 py-3 ${!t.is_active ? 'opacity-50 bg-gray-50' : ''}`}>
            <span className="text-xs text-gray-400 font-mono w-6 text-right">{idx + 1}</span>
            <p className="flex-1 font-medium text-gray-800">{t.label || `Τραπέζι ${t.number}`}</p>
            {t.group && (
              <span className="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded hidden sm:inline">
                {t.group.name}
              </span>
            )}
            {!t.is_active && <span className="text-xs text-amber-600 font-medium">Ανενεργό</span>}
            <button onClick={() => setEditModal(t)} className="btn btn-secondary text-sm px-3 py-1.5 min-h-0 h-8">Επεξεργασία</button>
            {t.is_active
              ? <button
                  onClick={() => !t.has_active_order && setConfirmDelete({ id: t.id, hard: false })}
                  disabled={t.has_active_order}
                  title={t.has_active_order ? 'Υπάρχει ενεργή παραγγελία' : undefined}
                  className="btn btn-secondary text-sm px-3 py-1.5 min-h-0 h-8 text-amber-600 hover:bg-amber-50 disabled:opacity-40 disabled:cursor-not-allowed"
                >Απενεργ.</button>
              : <button onClick={() => updateTable.mutate({ id: t.id, is_active: true })} className="btn btn-secondary text-sm px-3 py-1.5 min-h-0 h-8 text-green-600 hover:bg-green-50">Ενεργοπ.</button>
            }
            <button
              onClick={() => !t.has_active_order && setConfirmDelete({ id: t.id, hard: true })}
              disabled={t.has_active_order}
              title={t.has_active_order ? 'Υπάρχει ενεργή παραγγελία' : undefined}
              className="btn btn-danger text-sm px-3 py-1.5 min-h-0 h-8 disabled:opacity-40 disabled:cursor-not-allowed"
            >Διαγραφή</button>
          </div>
        ))}
      </div>

      {/* Add single table */}
      {addModal && (
        <TableModal
          title="Νέο τραπέζι"
          initial={{ label: '', group_id: activeTab !== 'all' && activeTab !== 'ungrouped' ? activeTab : '' }}
          groups={groups}
          onSave={(f) => createTable.mutate({ label: f.label || null, group_id: f.group_id ? Number(f.group_id) : null })}
          onClose={() => setAddModal(false)}
        />
      )}

      {/* Edit table */}
      {editModal && (
        <TableModal
          title="Επεξεργασία τραπεζιού"
          initial={{ label: editModal.label || '', group_id: editModal.group_id || '' }}
          groups={groups}
          onSave={(f) => updateTable.mutate({ id: editModal.id, label: f.label || null, group_id: f.group_id ? Number(f.group_id) : null })}
          onClose={() => setEditModal(null)}
        />
      )}

      {/* Batch add */}
      {batchModal !== null && (
        <BatchModal
          group={batchModal}
          onSave={(body) => batchCreate.mutate(body)}
          onClose={() => setBatchModal(null)}
        />
      )}

      {/* Group/Zone form */}
      {groupModal !== null && (
        <GroupModal
          group={groupModal}
          onSave={(data) => saveGroup.mutate(data)}
          onDelete={groupModal.id ? () => deleteGroup.mutate(groupModal.id) : null}
          onClose={() => setGroupModal(null)}
        />
      )}

      {/* Delete confirmation */}
      {confirmDelete && (
        <ConfirmModal
          title={confirmDelete.hard ? 'Οριστική διαγραφή τραπεζιού;' : 'Απενεργοποίηση τραπεζιού;'}
          message={confirmDelete.hard
            ? 'Το τραπέζι θα διαγραφεί οριστικά. Αδύνατο αν έχει ενεργή παραγγελία.'
            : 'Το τραπέζι θα κρυφτεί. Μπορείτε να το επανενεργοποιήσετε αργότερα.'}
          confirmLabel={confirmDelete.hard ? 'Διαγραφή' : 'Απενεργοποίηση'}
          confirmClass="btn-danger"
          onConfirm={() => deleteTable.mutate(confirmDelete)}
          onCancel={() => setConfirmDelete(null)}
        />
      )}
    </div>
  )
}

function TableModal({ title, initial, groups, onSave, onClose }) {
  const [form, setForm] = useState(initial)
  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 space-y-4">
        <h2 className="font-bold text-gray-800">{title}</h2>
        <div>
          <label className="label">Όνομα τραπεζιού</label>
          <input
            className="input"
            placeholder="π.χ. BS-TBL-1 ή Βεράντα 3"
            value={form.label}
            onChange={e => setForm(f => ({ ...f, label: e.target.value }))}
            autoFocus
          />
          <p className="text-xs text-gray-400 mt-1">Αφήστε κενό για αυτόματη αρίθμηση.</p>
        </div>
        <div>
          <label className="label">Ζώνη</label>
          <select className="input" value={form.group_id} onChange={e => setForm(f => ({ ...f, group_id: e.target.value }))}>
            <option value="">— Χωρίς ζώνη —</option>
            {groups.map(g => <option key={g.id} value={g.id}>{g.name}{g.prefix ? ` (${g.prefix})` : ''}</option>)}
          </select>
        </div>
        <div className="flex gap-3">
          <button onClick={onClose} className="flex-1 btn btn-secondary">Ακύρωση</button>
          <button onClick={() => onSave(form)} className="flex-1 btn btn-primary">Αποθήκευση</button>
        </div>
      </div>
    </div>
  )
}

function BatchModal({ group, onSave, onClose }) {
  const [count, setCount] = useState(5)
  const [prefix, setPrefix] = useState(group?.prefix ? `${group.prefix}-` : '')
  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 space-y-4">
        <h2 className="font-bold text-gray-800">Μαζική προσθήκη τραπεζιών</h2>
        {group && <p className="text-sm text-gray-500">Ζώνη: <span className="font-medium text-gray-700">{group.name}</span></p>}
        <div>
          <label className="label">Πρόθεμα ονόματος</label>
          <input
            className="input"
            placeholder="π.χ. BS-TBL- → BS-TBL-1, BS-TBL-2…"
            value={prefix}
            onChange={e => setPrefix(e.target.value)}
            autoFocus
          />
          <p className="text-xs text-gray-400 mt-1">Τα ονόματα θα αριθμηθούν αυτόματα συνεχίζοντας από εκεί που σταμάτησαν.</p>
        </div>
        <div>
          <label className="label">Πλήθος</label>
          <input className="input" type="number" min="1" max="200" value={count} onChange={e => setCount(Number(e.target.value))} />
        </div>
        <div className="flex gap-3">
          <button onClick={onClose} className="flex-1 btn btn-secondary">Ακύρωση</button>
          <button
            onClick={() => onSave({ group_id: group?.id ?? null, count, name_prefix: prefix })}
            disabled={count < 1 || !prefix.trim()}
            className="flex-1 btn btn-primary"
          >
            Δημιουργία {count > 0 && prefix.trim() ? `(${prefix.trim()}1 … ${prefix.trim()}${count})` : ''}
          </button>
        </div>
      </div>
    </div>
  )
}

function GroupModal({ group, onSave, onDelete, onClose }) {
  const [name, setName] = useState(group.name || '')
  const [prefix, setPrefix] = useState(group.prefix || '')
  const [color, setColor] = useState(group.color || null)
  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 space-y-4">
        <h2 className="font-bold text-gray-800">{group.id ? 'Επεξεργασία ζώνης' : 'Νέα ζώνη'}</h2>
        <div>
          <label className="label">Όνομα ζώνης *</label>
          <input className="input" value={name} onChange={e => setName(e.target.value)} autoFocus placeholder="π.χ. Beachside" />
        </div>
        <div>
          <label className="label">Πρόθεμα (για μαζική δημιουργία)</label>
          <input className="input font-mono" value={prefix} onChange={e => setPrefix(e.target.value)} placeholder="π.χ. BS" />
          <p className="text-xs text-gray-400 mt-1">Χρησιμοποιείται ως προτεινόμενο πρόθεμα στη μαζική προσθήκη.</p>
        </div>
        <div>
          <label className="label">Χρώμα ζώνης</label>
          <ZoneColorPicker value={color} onChange={setColor} />
        </div>
        <div className="flex gap-3">
          {onDelete && <button onClick={onDelete} className="btn btn-danger px-3">Διαγραφή</button>}
          <button onClick={onClose} className="flex-1 btn btn-secondary">Ακύρωση</button>
          <button onClick={() => onSave({ name, prefix: prefix || null, color: color || null })} disabled={!name.trim()} className="flex-1 btn btn-primary">Αποθήκευση</button>
        </div>
      </div>
    </div>
  )
}
