import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Trash2, Pencil, Check, X as XIcon } from 'lucide-react'
import toast from 'react-hot-toast'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts'
import client from '../../../api/client'
import { FilterBar, FilterDateInput } from '../shared/FilterBar'
import { Panel, DataTable, THead, TH, TR, TD, StatusBadge, WaiterAvatar, ChartTooltip } from '../shared/TablePrimitives'
import DrillDownModal from '../shared/DrillDownModal'
import OrderDetailModal from '../shared/OrderDetailModal'
import ShiftDetailModal from '../shared/ShiftDetailModal'
import DeleteConfirmModal from '../../../ui/DeleteConfirmModal'
import EmptyState from '../shared/EmptyState'
import SkeletonTable from '../shared/SkeletonTable'
import ExportButton from '../shared/ExportButton'
import { fmtEUR, fmtNum, fmtDate, fmtTime, fmtDuration, fmtDateTime, fmtDateStr } from '../shared/reportDesignTokens'

function today() { return new Date().toISOString().slice(0, 10) }
function monthAgo() { const d = new Date(); d.setDate(d.getDate() - 30); return d.toISOString().slice(0, 10) }

// ── Edit close-time inline control ─────────────────────────────────────────
function EditCloseTime({ day, onSaved }) {
  const [editing, setEditing] = useState(false)
  const [value, setValue] = useState('')
  const qc = useQueryClient()

  function startEdit() {
    // pre-fill with current closed_at in local datetime-local format
    const d = day.closed_at ? new Date(day.closed_at) : new Date()
    const pad = n => String(n).padStart(2, '0')
    const local = `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
    setValue(local)
    setEditing(true)
  }

  const mut = useMutation({
    mutationFn: (iso) => client.patch(`/api/business-day/${day.id}`, { closed_at: iso }).then(r => r.data),
    onSuccess: (data) => {
      toast.success('Ώρα κλεισίματος ενημερώθηκε')
      qc.invalidateQueries({ queryKey: ['business-days'] })
      setEditing(false)
      onSaved && onSaved(data)
    },
    onError: (err) => toast.error(err?.response?.data?.detail || 'Σφάλμα ενημέρωσης'),
  })

  if (!editing) {
    return (
      <button
        onClick={startEdit}
        title="Επεξεργασία ώρας κλεισίματος"
        className="ml-1 rounded p-0.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100"
      >
        <Pencil size={13} />
      </button>
    )
  }

  function handleSave() {
    if (!value) return
    const iso = new Date(value).toISOString()
    mut.mutate(iso)
  }

  return (
    <span className="inline-flex items-center gap-1 ml-1">
      <input
        type="datetime-local"
        value={value}
        onChange={e => setValue(e.target.value)}
        className="rounded border border-slate-300 px-1 py-0 text-[11px] font-mono text-slate-700 focus:outline-none focus:ring-1 focus:ring-slate-400"
        style={{ height: 22 }}
        max={new Date().toISOString().slice(0, 16)}
      />
      <button onClick={handleSave} disabled={mut.isPending} className="rounded p-0.5 text-emerald-600 hover:bg-emerald-50" title="Αποθήκευση">
        <Check size={14} />
      </button>
      <button onClick={() => setEditing(false)} className="rounded p-0.5 text-slate-400 hover:bg-slate-100" title="Ακύρωση">
        <XIcon size={14} />
      </button>
    </span>
  )
}

// ── Workday drill-down modal ────────────────────────────────────────────────
function WorkDayModal({ day: initialDay, onClose, onDeleteShift }) {
  const [day, setDay] = useState(initialDay)
  const [tab, setTab] = useState('orders')
  const [drillOrder, setDrillOrder] = useState(null)
  const [detailShift, setDetailShift] = useState(null)

  const { data: ordersData } = useQuery({
    queryKey: ['business-day-orders', day.id],
    queryFn: () => client.get('/api/reports/orders/history', { params: { business_day_id: day.id, page_size: 200 } }).then(r => r.data),
    staleTime: 0,
  })

  const { data: shiftsData } = useQuery({
    queryKey: ['shifts-for-day', day.id],
    queryFn: () => client.get('/api/reports/shifts', { params: { business_day_id: day.id } }).then(r => r.data),
    staleTime: 0,
  })

  const orders = Array.isArray(ordersData) ? ordersData : []
  const shifts = shiftsData?.shifts || []

  const TABS = [
    { key: 'orders', label: `Παραγγελίες (${orders.length})` },
    { key: 'shifts', label: `Βάρδιες (${shifts.length})` },
  ]

  const hasCost = (day.total_cost || 0) > 0
  const hasProfit = (day.trackable_profit || 0) > 0

  // Build the rich subtitle
  const openDate = fmtDate(day.opened_at)
  const closeDate = day.closed_at ? fmtDate(day.closed_at) : null
  const openTime = fmtTime(day.opened_at)
  const closeTime = day.closed_at ? fmtTime(day.closed_at) : null
  const spansDays = closeDate && closeDate !== openDate

  const subtitleParts = [
    `${fmtEUR(day.revenue)} έσοδα`,
    hasCost ? `${fmtEUR(day.total_cost)} Έξοδα` : null,
    hasProfit ? `${fmtEUR(day.trackable_profit)} Κέρδος` : null,
  ].filter(Boolean)

  const openLabel = spansDays ? `${openDate} ${openTime}` : openTime
  const closeLabel = day.closed_at
    ? (spansDays ? `${closeDate} ${closeTime}` : closeTime)
    : 'ανοιχτή'

  const subtitle = subtitleParts.join(' · ')
  const timeRange = `${openLabel} – ${closeLabel}`

  return (
    <>
      <DrillDownModal
        title={`Εργάσιμη Μέρα · ${fmtDate(day.opened_at)}`}
        subtitle={
          <span>
            {subtitle}
            <span className="text-slate-400 mx-1">·</span>
            {timeRange}
            {day.status === 'closed' && (
              <EditCloseTime day={day} onSaved={updated => setDay(d => ({ ...d, closed_at: updated.closed_at }))} />
            )}
          </span>
        }
        onClose={onClose}
      >
        {/* Tabs */}
        <div className="flex border-b border-slate-200 px-6">
          {TABS.map(t => (
            <button
              key={t.key}
              onClick={() => setTab(t.key)}
              className={`px-4 py-2.5 text-[13px] font-medium border-b-2 transition-colors ${tab === t.key ? 'border-slate-800 text-slate-900' : 'border-transparent text-slate-500 hover:text-slate-700'}`}
            >
              {t.label}
            </button>
          ))}
        </div>

        {/* Orders tab */}
        {tab === 'orders' && (
          orders.length === 0
            ? <div className="py-12 text-center text-slate-400 text-sm">Δεν βρέθηκαν παραγγελίες</div>
            : <DataTable>
                <THead>
                  <TH>#</TH><TH>Τραπέζι</TH><TH>Άνοιξε</TH><TH>Έκλεισε</TH>
                  <TH align="right">Είδη</TH><TH align="right">Ακυρώσεις</TH><TH align="right">Σύνολο</TH><TH>Κατάσταση</TH>
                </THead>
                <tbody>
                  {orders.map(o => {
                    const allItems = o.items || []
                    const activeItems = allItems.filter(i => i.status !== 'cancelled')
                    const cancelledItems = allItems.filter(i => i.status === 'cancelled')
                    const totalQty = allItems.reduce((s, i) => s + (i.quantity || 1), 0)
                    const cancelledQty = cancelledItems.reduce((s, i) => s + (i.quantity || 1), 0)
                    const total = activeItems.reduce((s, i) => s + ((i.unit_price ?? 0) + (i.price_adjustment ?? 0)) * i.quantity, 0)
                    return (
                      <TR key={o.id} striped onClick={() => setDrillOrder(o)} className="cursor-pointer">
                        <TD mono>#{o.id}</TD>
                        <TD>{o.table_name ?? o.table_id}</TD>
                        <TD mono>{fmtDateTime(o.opened_at)}</TD>
                        <TD mono>{o.closed_at ? fmtDateTime(o.closed_at) : '—'}</TD>
                        <TD mono align="right">{totalQty}</TD>
                        <TD mono align="right">
                          {cancelledQty > 0
                            ? <span className="text-red-500 font-semibold">{cancelledQty}</span>
                            : <span className="text-slate-300">—</span>}
                        </TD>
                        <TD mono align="right" className="font-semibold text-slate-900">{fmtEUR(total)}</TD>
                        <TD><StatusBadge status={o.status} /></TD>
                      </TR>
                    )
                  })}
                </tbody>
              </DataTable>
        )}

        {/* Shifts tab */}
        {tab === 'shifts' && (
          shifts.length === 0
            ? <div className="py-12 text-center text-slate-400 text-sm">Δεν βρέθηκαν βάρδιες</div>
            : <DataTable>
                <THead>
                  <TH>Σερβιτόρος</TH>
                  <TH>Έναρξη</TH>
                  <TH>Λήξη</TH>
                  <TH align="right">Διάρκεια</TH>
                  <TH align="right">Εισπράχθηκαν</TH>
                  <TH>Κατάσταση</TH>
                  <TH className="w-20" />
                </THead>
                <tbody>
                  {shifts.map(s => (
                    <TR key={s.id} striped onClick={() => setDetailShift(s)} className="cursor-pointer">
                      <TD><WaiterAvatar name={s.waiter_name} id={s.waiter_id} /></TD>
                      <TD mono>{fmtDateTime(s.started_at)}</TD>
                      <TD mono>{s.ended_at ? fmtDateTime(s.ended_at) : <span className="text-sky-600 font-medium">— ενεργή —</span>}</TD>
                      <TD mono align="right">{fmtDuration(s.started_at, s.ended_at)}</TD>
                      <TD mono align="right">{fmtEUR(s.total_collected)}</TD>
                      <TD><StatusBadge status={s.is_active ? 'active' : 'closed'} pulse /></TD>
                      <TD align="right">
                        <div className="flex items-center justify-end gap-2">
                          <button
                            onClick={e => { e.stopPropagation(); setDetailShift(s) }}
                            className="rounded border border-slate-200 bg-white px-2 py-0.5 text-[11px] font-medium text-slate-600 hover:bg-slate-50"
                          >
                            Λεπτομέρειες
                          </button>
                          {!s.is_active && (
                            <button
                              onClick={e => { e.stopPropagation(); onDeleteShift(s) }}
                              className="rounded border border-red-200 bg-white p-0.5 text-red-400 hover:bg-red-50 hover:text-red-600"
                              title="Διαγραφή βάρδιας"
                            >
                              <Trash2 size={13} />
                            </button>
                          )}
                        </div>
                      </TD>
                    </TR>
                  ))}
                </tbody>
              </DataTable>
        )}
      </DrillDownModal>

      {drillOrder && (
        <OrderDetailModal order={drillOrder} onClose={() => setDrillOrder(null)} />
      )}

      {detailShift && (
        <ShiftDetailModal
          shiftId={detailShift.id}
          shiftWaiterId={detailShift.waiter_id}
          onClose={() => setDetailShift(null)}
        />
      )}
    </>
  )
}

// ── Main page ───────────────────────────────────────────────────────────────
export default function WorkDaySummary() {
  const [from, setFrom] = useState(monthAgo())
  const [to, setTo] = useState(today())
  const [drillDay, setDrillDay] = useState(null)
  const [deleteDay, setDeleteDay] = useState(null)
  const [deleteShift, setDeleteShift] = useState(null)

  const qc = useQueryClient()

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ['business-days', from, to],
    queryFn: () => client.get('/api/reports/business-days', { params: { from: from + 'T00:00:00', to: to + 'T23:59:59' } }).then(r => r.data),
    staleTime: 0,
  })

  const deleteDayMutation = useMutation({
    mutationFn: (id) => client.delete(`/api/business-day/${id}`),
    onSuccess: () => {
      toast.success('Η εργάσιμη μέρα διαγράφηκε')
      qc.invalidateQueries({ queryKey: ['business-days'] })
      qc.invalidateQueries({ queryKey: ['business-days-list'] })
      setDeleteDay(null)
    },
    onError: (err) => {
      toast.error(err?.response?.data?.detail || 'Σφάλμα διαγραφής εργάσιμης μέρας')
      setDeleteDay(null)
    },
  })

  const deleteShiftMutation = useMutation({
    mutationFn: (id) => client.delete(`/api/shifts/${id}`),
    onSuccess: () => {
      toast.success('Η βάρδια και οι παραγγελίες της διαγράφηκαν')
      qc.invalidateQueries({ queryKey: ['shifts'] })
      qc.invalidateQueries({ queryKey: ['shifts-for-day'] })
      qc.invalidateQueries({ queryKey: ['business-days'] })
      qc.invalidateQueries({ queryKey: ['business-days-list'] })
      setDeleteShift(null)
    },
    onError: (err) => {
      toast.error(err?.response?.data?.detail || 'Σφάλμα διαγραφής βάρδιας')
      setDeleteShift(null)
    },
  })

  const days = data?.business_days || []

  const anyHasCost = days.some(d => (d.total_cost || 0) > 0)
  const chartData = [...days].reverse().map(d => ({
    date: fmtDate(d.opened_at),
    revenue: d.revenue,
    profit: (d.trackable_profit || 0) > 0 ? d.trackable_profit : undefined,
  }))

  if (isLoading) return <div className="flex-1 overflow-y-auto p-6"><SkeletonTable rows={8} columns={9} showChart /></div>
  if (isError) return (
    <div className="flex flex-col flex-1 min-h-0">
      <FilterBar><span className="text-[12px] text-slate-500">Αδυναμία φόρτωσης δεδομένων</span></FilterBar>
      <div className="flex flex-1 items-center justify-center"><button onClick={() => refetch()} className="rounded-md border border-slate-200 px-4 py-2 text-sm hover:bg-slate-50">Επανάληψη</button></div>
    </div>
  )

  return (
    <div className="flex flex-col flex-1 min-h-0">
      <FilterBar right={
        <ExportButton endpoint="/api/reports/orders/export" params={{ from: from + 'T00:00:00', to: to + 'T23:59:59' }} filename={`workdays-${from}-to-${to}.csv`} />
      }>
        <FilterDateInput value={from} onChange={setFrom} label="Από" />
        <FilterDateInput value={to} onChange={setTo} label="Έως" />
      </FilterBar>

      <div className="flex-1 overflow-y-auto p-6">
        {chartData.length > 0 && (
          <Panel title="Έσοδα ανά Εργάσιμη Μέρα" subtitle={`${days.length} μέρες · ${fmtDateStr(from)} → ${fmtDateStr(to)}`}>
            <div style={{ height: 240 }}>
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={chartData} margin={{ top: 8, right: 16, bottom: anyHasCost ? 16 : 4, left: 4 }}>
                  <CartesianGrid vertical={false} stroke="#f1f5f9" />
                  <XAxis dataKey="date" tick={{ fontSize: 10, fill: '#94a3b8' }} stroke="#cbd5e1" axisLine={false} tickLine={false} />
                  <YAxis tick={{ fontSize: 11, fill: '#94a3b8' }} stroke="#cbd5e1" axisLine={false} tickLine={false} tickFormatter={v => '€' + v} />
                  <Tooltip content={<ChartTooltip formatter={v => fmtEUR(v)} />} />
                  {anyHasCost && <Legend wrapperStyle={{ fontSize: 11 }} iconType="rect" />}
                  <Line type="monotone" dataKey="revenue" name="Έσοδα" stroke="#60a5fa" strokeWidth={2} dot={{ r: 3, fill: '#60a5fa' }} activeDot={{ r: 5 }} />
                  {anyHasCost && (
                    <Line type="monotone" dataKey="profit" name="Κέρδος" stroke="#34d399" strokeWidth={2} dot={{ r: 3, fill: '#34d399' }} activeDot={{ r: 5 }} connectNulls={false} />
                  )}
                </LineChart>
              </ResponsiveContainer>
            </div>
          </Panel>
        )}

        <div className="mt-4">
          <Panel title="Εργάσιμες Μέρες" padded={false}>
            {days.length === 0 ? (
              <EmptyState title="Δεν βρέθηκαν εργάσιμες μέρες" description="Δοκιμάστε ευρύτερο εύρος ημερομηνιών." />
            ) : (
              <DataTable>
                <THead>
                  <TH>Εργάσιμη Μέρα</TH>
                  <TH>Άνοιξε</TH>
                  <TH>Έκλεισε</TH>
                  <TH align="right">Διάρκεια</TH>
                  <TH align="right">Παραγγελίες</TH>
                  <TH align="right">Έσοδα</TH>
                  {anyHasCost && <TH align="right">Κόστος</TH>}
                  {anyHasCost && <TH align="right">Κέρδος</TH>}
                  <TH align="right">Ακυρώσεις</TH>
                  <TH align="right">Σερβιτόροι</TH>
                  <TH>Κατάσταση</TH>
                  <TH className="w-10" />
                </THead>
                <tbody>
                  {days.map(d => {
                    const margin = d.revenue > 0 && (d.trackable_profit || 0) > 0
                      ? ((d.trackable_profit / d.revenue) * 100).toFixed(0) + '%'
                      : null
                    return (
                    <TR key={d.id} onClick={() => setDrillDay(d)} striped>
                      <TD className="font-medium text-slate-900">{fmtDate(d.opened_at)}</TD>
                      <TD mono>{fmtTime(d.opened_at)}</TD>
                      <TD mono>{d.closed_at ? fmtTime(d.closed_at) : '—'}</TD>
                      <TD mono align="right">{fmtDuration(d.opened_at, d.closed_at)}</TD>
                      <TD mono align="right">{fmtNum(d.order_count)}</TD>
                      <TD mono align="right" className="font-semibold text-slate-900">{fmtEUR(d.revenue)}</TD>
                      {anyHasCost && (
                        <TD mono align="right" className="text-slate-600">
                          {(d.total_cost || 0) > 0 ? fmtEUR(d.total_cost) : <span className="text-slate-300">—</span>}
                        </TD>
                      )}
                      {anyHasCost && (
                        <TD mono align="right">
                          {(d.trackable_profit || 0) > 0 ? (
                            <span className="text-green-700">
                              {fmtEUR(d.trackable_profit)}
                              {margin && !d.has_gap && <span className="ml-1 text-[10px] text-slate-400">({margin})</span>}
                              {d.has_gap && <span className="ml-1 text-[10px] text-amber-500">⚠</span>}
                            </span>
                          ) : <span className="text-slate-300">—</span>}
                        </TD>
                      )}
                      <TD mono align="right">{fmtNum(d.cancellation_count)}</TD>
                      <TD mono align="right">{fmtNum(d.waiter_count)}</TD>
                      <TD><StatusBadge status={d.status} pulse /></TD>
                      <TD align="right">
                        {d.status === 'closed' && (
                          <button
                            onClick={e => { e.stopPropagation(); setDeleteDay(d) }}
                            className={`rounded border p-0.5 bg-white ${(d.shift_count ?? 0) === 0 ? 'border-red-200 text-red-400 hover:bg-red-50 hover:text-red-600' : 'border-slate-200 text-slate-300 cursor-not-allowed'}`}
                            title={(d.shift_count ?? 0) === 0 ? 'Διαγραφή εργάσιμης μέρας' : `Έχει ${d.shift_count} βάρδιες — διαγράψτε τες πρώτα`}
                            disabled={(d.shift_count ?? 0) > 0}
                          >
                            <Trash2 size={13} />
                          </button>
                        )}
                      </TD>
                    </TR>
                  )})}
                </tbody>
              </DataTable>
            )}
          </Panel>
        </div>
      </div>

      {drillDay && (
        <WorkDayModal
          day={drillDay}
          onClose={() => setDrillDay(null)}
          onDeleteShift={s => setDeleteShift(s)}
        />
      )}

      {deleteDay && (
        <DeleteConfirmModal
          title={`Διαγραφή Εργάσιμης Μέρας #${deleteDay.id}`}
          description={`Η εργάσιμη μέρα της ${fmtDate(deleteDay.opened_at)} θα διαγραφεί μόνιμα. Δεν έχει βάρδιες.`}
          onConfirm={() => deleteDayMutation.mutate(deleteDay.id)}
          onCancel={() => setDeleteDay(null)}
        />
      )}

      {deleteShift && (
        <DeleteConfirmModal
          title={`Διαγραφή Βάρδιας #${deleteShift.id}`}
          description={`Η βάρδια του ${deleteShift.waiter_name} (${fmtDateTime(deleteShift.started_at)}) και ΟΛΕΣ οι παραγγελίες της θα διαγραφούν μόνιμα.`}
          onConfirm={() => deleteShiftMutation.mutate(deleteShift.id)}
          onCancel={() => setDeleteShift(null)}
        />
      )}
    </div>
  )
}
