import { useState } from 'react'
import { CheckCircle2, Clock, Sparkles, User, ListChecks, Settings2, Save, Wrench, X as XIcon, Send } from 'lucide-react'
import { MOCK_HK_TASKS } from '../data/mockData'
import type { HousekeepingTask } from '../types'
import { cn } from '../lib/utils'
import { Badge } from '../components/ui/Badge'

function Toggle({ on, onChange }: { on: boolean; onChange: () => void }) {
  return (
    <button
      onClick={onChange}
      className={cn('relative w-10 h-5.5 rounded-full transition-colors shrink-0 h-[22px]', on ? 'bg-brand-600' : 'bg-slate-200 dark:bg-slate-600')}
    >
      <div className={cn('absolute top-0.5 w-4.5 h-4.5 rounded-full bg-white shadow-sm transition-transform w-[18px] h-[18px]', on ? 'left-[20px]' : 'left-0.5')} />
    </button>
  )
}

type Column = 'pending' | 'in_progress' | 'done'

const COLUMNS: { id: Column; label: string; icon: React.ElementType; color: string }[] = [
  { id: 'pending',     label: 'Ожидают',      icon: Clock,         color: 'text-amber-600 dark:text-amber-400' },
  { id: 'in_progress', label: 'В процессе',   icon: Sparkles,      color: 'text-blue-600 dark:text-blue-400' },
  { id: 'done',        label: 'Готово',        icon: CheckCircle2,  color: 'text-emerald-600 dark:text-emerald-400' },
]

const PRIORITY_COLORS = {
  high:   'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
  normal: 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
  low:    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
}

const PRIORITY_LABELS = { high: 'Срочно', normal: 'Обычный', low: 'Низкий' }

const TYPE_COLORS = {
  cleaning:    'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
  inspection:  'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
  maintenance: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
}

const TYPE_LABELS = {
  cleaning: 'Уборка',
  inspection: 'Проверка',
  maintenance: 'Ремонт',
}

export function HousekeepingPage() {
  const [tasks, setTasks] = useState<HousekeepingTask[]>(MOCK_HK_TASKS)
  const [activeTab, setActiveTab] = useState<'tasks' | 'plans'>('tasks')
  const [planSaved, setPlanSaved] = useState(false)

  // Cleaning plan settings
  const [plans, setPlans] = useState({
    checkoutAuto:       true,
    checkoutPriority:   'high' as 'high' | 'normal',
    checkoutInspection: true,

    dailyEnabled:       true,
    dailyIntervalDays:  1,
    dailyStartFromDay:  1,

    onDemandEnabled:    true,
    onDemandPriority:   'normal' as 'high' | 'normal' | 'low',

    deepCleanEnabled:   false,
    deepCleanEveryDays: 7,

    inspectionAfterClean: true,
    autoAssign:           false,
  })

  const setP = <K extends keyof typeof plans>(k: K, v: typeof plans[K]) =>
    setPlans(prev => ({ ...prev, [k]: v }))

  const savePlans = () => {
    setPlanSaved(true)
    setTimeout(() => setPlanSaved(false), 2000)
  }

  const updateStatus = (id: string, status: HousekeepingTask['status']) => {
    setTasks(prev => prev.map(t =>
      t.id === id
        ? { ...t, status, completedAt: status === 'done' ? new Date().toISOString() : undefined }
        : t,
    ))
  }

  const addMaintenanceNote = (id: string, note: string) => {
    setTasks(prev => prev.map(t => t.id === id ? { ...t, maintenanceNote: note } : t))
  }

  const total = tasks.length
  const done = tasks.filter(t => t.status === 'done').length

  return (
    <div className="p-4 md:p-6 space-y-5">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">Уборка и обслуживание</h1>
          {activeTab === 'tasks' && (
            <div className="flex items-center gap-3 mt-1.5">
              <div className="flex-1 bg-slate-200 dark:bg-slate-700 rounded-full h-2">
                <div
                  className="h-2 rounded-full bg-emerald-500 transition-all duration-500"
                  style={{ width: total ? `${(done / total) * 100}%` : '0%' }}
                />
              </div>
              <span className="text-sm text-slate-600 dark:text-slate-400 shrink-0">
                {done} / {total} завершено
              </span>
            </div>
          )}
        </div>
      </div>

      {/* Tabs */}
      <div className="flex border-b border-slate-200 dark:border-slate-700">
        {([
          { id: 'tasks' as const,  label: 'Задачи на сегодня', icon: ListChecks },
          { id: 'plans' as const,  label: 'Планы уборки',       icon: Settings2 },
        ]).map(t => (
          <button
            key={t.id}
            onClick={() => setActiveTab(t.id)}
            className={cn(
              'flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors',
              activeTab === t.id
                ? 'border-brand-600 text-brand-600 dark:text-brand-400 dark:border-brand-400'
                : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300',
            )}
          >
            <t.icon size={14} />
            {t.label}
          </button>
        ))}
      </div>

      {/* ── Tasks tab ── */}
      {activeTab === 'tasks' && (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {COLUMNS.map(col => {
            const colTasks = tasks.filter(t => t.status === col.id)
            const Icon = col.icon
            return (
              <div key={col.id} className="space-y-3">
                <div className="flex items-center gap-2">
                  <Icon size={16} className={col.color} />
                  <h3 className="font-semibold text-slate-700 dark:text-slate-300">{col.label}</h3>
                  <span className="ml-auto text-xs font-bold px-2 py-0.5 rounded-full bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400">
                    {colTasks.length}
                  </span>
                </div>
                <div className="space-y-2.5">
                  {colTasks.map(task => (
                    <TaskCard key={task.id} task={task} onStatusChange={updateStatus} onMaintenanceNote={addMaintenanceNote} />
                  ))}
                  {colTasks.length === 0 && (
                    <div className="rounded-xl border-2 border-dashed border-slate-200 dark:border-slate-700 py-8 text-center">
                      <p className="text-sm text-slate-400 dark:text-slate-500">Пусто</p>
                    </div>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      )}

      {/* ── Plans tab ── */}
      {activeTab === 'plans' && (
        <div className="max-w-2xl space-y-5">

          {/* Checkout cleaning */}
          <div className="card p-4 space-y-3">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-semibold text-slate-900 dark:text-slate-100">Уборка при выезде</p>
                <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                  Автоматически создавать задачу на уборку, как только гость освобождает номер
                </p>
              </div>
              <Toggle on={plans.checkoutAuto} onChange={() => setP('checkoutAuto', !plans.checkoutAuto)} />
            </div>
            {plans.checkoutAuto && (
              <div className="pl-1 space-y-3 border-t border-slate-100 dark:border-slate-700 pt-3">
                <div>
                  <label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1.5">Приоритет задачи</label>
                  <div className="flex gap-2">
                    {([['high', 'Срочно'], ['normal', 'Обычный']] as const).map(([v, l]) => (
                      <button
                        key={v}
                        onClick={() => setP('checkoutPriority', v)}
                        className={cn(
                          'px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
                          plans.checkoutPriority === v
                            ? v === 'high' ? 'bg-red-500 border-red-500 text-white' : 'bg-brand-600 border-brand-600 text-white'
                            : 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300',
                        )}
                      >
                        {l}
                      </button>
                    ))}
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-slate-700 dark:text-slate-300">Инспекция после уборки</p>
                    <p className="text-xs text-slate-500 dark:text-slate-400">Создавать задачу проверки для старшей горничной</p>
                  </div>
                  <Toggle on={plans.checkoutInspection} onChange={() => setP('checkoutInspection', !plans.checkoutInspection)} />
                </div>
              </div>
            )}
          </div>

          {/* Daily cleaning */}
          <div className="card p-4 space-y-3">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-semibold text-slate-900 dark:text-slate-100">Ежедневная уборка</p>
                <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                  Регулярная уборка в номерах с проживающими гостями
                </p>
              </div>
              <Toggle on={plans.dailyEnabled} onChange={() => setP('dailyEnabled', !plans.dailyEnabled)} />
            </div>
            {plans.dailyEnabled && (
              <div className="pl-1 space-y-3 border-t border-slate-100 dark:border-slate-700 pt-3">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1.5">
                      Каждые N дней
                    </label>
                    <div className="flex gap-1.5 flex-wrap">
                      {[1, 2, 3, 7].map(n => (
                        <button
                          key={n}
                          onClick={() => setP('dailyIntervalDays', n)}
                          className={cn(
                            'px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
                            plans.dailyIntervalDays === n
                              ? 'bg-brand-600 border-brand-600 text-white'
                              : 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300',
                          )}
                        >
                          {n === 1 ? 'Ежедневно' : `${n} дня`}
                        </button>
                      ))}
                    </div>
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1.5">
                      Начинать с дня заезда №
                    </label>
                    <input
                      type="number" min={1} max={10}
                      className="input w-20 text-sm"
                      value={plans.dailyStartFromDay}
                      onChange={e => setP('dailyStartFromDay', Math.max(1, parseInt(e.target.value) || 1))}
                    />
                    <p className="text-xs text-slate-400 mt-1">
                      Уборка начнётся на {plans.dailyStartFromDay}-й день проживания
                    </p>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* On-demand cleaning */}
          <div className="card p-4 space-y-3">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-semibold text-slate-900 dark:text-slate-100">Уборка по запросу гостя</p>
                <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                  Гость может запросить уборку через QR-код или мобильное приложение
                </p>
              </div>
              <Toggle on={plans.onDemandEnabled} onChange={() => setP('onDemandEnabled', !plans.onDemandEnabled)} />
            </div>
            {plans.onDemandEnabled && (
              <div className="pl-1 border-t border-slate-100 dark:border-slate-700 pt-3">
                <label className="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1.5">Приоритет</label>
                <div className="flex gap-2">
                  {([['high', 'Срочно'], ['normal', 'Обычный'], ['low', 'Низкий']] as const).map(([v, l]) => (
                    <button
                      key={v}
                      onClick={() => setP('onDemandPriority', v)}
                      className={cn(
                        'px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
                        plans.onDemandPriority === v
                          ? 'bg-brand-600 border-brand-600 text-white'
                          : 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300',
                      )}
                    >
                      {l}
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Deep cleaning */}
          <div className="card p-4 space-y-3">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-semibold text-slate-900 dark:text-slate-100">Генеральная уборка</p>
                <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                  Глубокая уборка с чисткой мебели, мытьём окон и полной сменой постельного белья
                </p>
              </div>
              <Toggle on={plans.deepCleanEnabled} onChange={() => setP('deepCleanEnabled', !plans.deepCleanEnabled)} />
            </div>
            {plans.deepCleanEnabled && (
              <div className="pl-1 border-t border-slate-100 dark:border-slate-700 pt-3 flex items-center gap-3">
                <label className="text-xs font-medium text-slate-600 dark:text-slate-400 shrink-0">Проводить каждые</label>
                <input
                  type="number" min={1} max={30}
                  className="input w-20 text-sm"
                  value={plans.deepCleanEveryDays}
                  onChange={e => setP('deepCleanEveryDays', Math.max(1, parseInt(e.target.value) || 7))}
                />
                <span className="text-xs text-slate-500 dark:text-slate-400">дней</span>
              </div>
            )}
          </div>

          {/* Inspection after cleaning */}
          <div className="card p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-semibold text-slate-900 dark:text-slate-100">Проверка после уборки</p>
                <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                  После завершения любой уборки создавать задачу инспекции для старшей горничной
                </p>
              </div>
              <Toggle on={plans.inspectionAfterClean} onChange={() => setP('inspectionAfterClean', !plans.inspectionAfterClean)} />
            </div>
          </div>

          {/* Auto assign */}
          <div className="card p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-semibold text-slate-900 dark:text-slate-100">Автоназначение горничной</p>
                <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                  Автоматически назначать ответственную горничную по расписанию смен (без этой опции — задачи назначаются вручную)
                </p>
              </div>
              <Toggle on={plans.autoAssign} onChange={() => setP('autoAssign', !plans.autoAssign)} />
            </div>
          </div>

          <div className="flex justify-end">
            <button onClick={savePlans} className="btn-primary">
              <Save size={14} />
              {planSaved ? 'Сохранено!' : 'Сохранить планы'}
            </button>
          </div>
        </div>
      )}
    </div>
  )
}

function TaskCard({ task, onStatusChange, onMaintenanceNote }: {
  task: HousekeepingTask
  onStatusChange: (id: string, status: HousekeepingTask['status']) => void
  onMaintenanceNote: (id: string, note: string) => void
}) {
  const [reportOpen, setReportOpen] = useState(false)
  const [reportText, setReportText] = useState('')

  const submitReport = () => {
    if (!reportText.trim()) return
    onMaintenanceNote(task.id, reportText.trim())
    setReportText('')
    setReportOpen(false)
  }

  return (
    <div className={cn(
      'card p-3.5 space-y-2.5 transition-all',
      task.status === 'done' && 'opacity-70',
    )}>
      <div className="flex items-center justify-between">
        <span className="text-xl font-bold text-slate-900 dark:text-slate-100">
          №{task.roomNumber}
        </span>
        <Badge className={PRIORITY_COLORS[task.priority]}>
          {PRIORITY_LABELS[task.priority]}
        </Badge>
      </div>

      <div className="flex gap-1.5 flex-wrap">
        <Badge className={TYPE_COLORS[task.type]}>
          {TYPE_LABELS[task.type]}
        </Badge>
      </div>

      {task.notes && (
        <p className="text-xs text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-700/40 rounded-lg p-2">
          {task.notes}
        </p>
      )}

      {task.maintenanceNote && (
        <div className="flex items-start gap-1.5 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-2">
          <Wrench size={11} className="text-orange-500 mt-0.5 shrink-0" />
          <p className="text-xs text-orange-700 dark:text-orange-300">{task.maintenanceNote}</p>
        </div>
      )}

      {task.assignedToName && (
        <div className="flex items-center gap-1.5 text-xs text-slate-500 dark:text-slate-400">
          <User size={11} />
          {task.assignedToName}
        </div>
      )}

      {task.completedAt && (
        <p className="text-xs text-emerald-600 dark:text-emerald-400">
          Завершено в {new Date(task.completedAt).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })}
        </p>
      )}

      {/* Maintenance report form */}
      {reportOpen && (
        <div className="border-t border-slate-100 dark:border-slate-700 pt-2 space-y-1.5">
          <div className="flex items-center justify-between">
            <p className="text-xs font-medium text-orange-600 dark:text-orange-400 flex items-center gap-1">
              <Wrench size={11} /> Сообщить о поломке
            </p>
            <button onClick={() => setReportOpen(false)} className="text-slate-400 hover:text-slate-600">
              <XIcon size={13} />
            </button>
          </div>
          <textarea
            autoFocus
            className="w-full text-xs border border-slate-200 dark:border-slate-600 rounded-lg p-2 bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-300 resize-none focus:outline-none focus:border-orange-400"
            rows={2}
            placeholder="Опишите неисправность (напр. Не работает кондиционер, сломана ручка двери...)"
            value={reportText}
            onChange={e => setReportText(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter' && e.ctrlKey) submitReport() }}
          />
          <button
            onClick={submitReport}
            disabled={!reportText.trim()}
            className="w-full flex items-center justify-center gap-1 text-xs py-1.5 rounded-lg bg-orange-500 text-white font-medium hover:bg-orange-600 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
          >
            <Send size={11} /> Отправить технической службе
          </button>
        </div>
      )}

      {/* Actions */}
      <div className="flex gap-1.5 pt-1">
        {task.status === 'pending' && (
          <button
            onClick={() => onStatusChange(task.id, 'in_progress')}
            className="flex-1 text-xs py-1.5 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 font-medium hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors"
          >
            Начать
          </button>
        )}
        {task.status === 'in_progress' && (
          <button
            onClick={() => onStatusChange(task.id, 'done')}
            className="flex-1 text-xs py-1.5 rounded-lg bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300 font-medium hover:bg-emerald-100 dark:hover:bg-emerald-900/30 transition-colors"
          >
            Завершить
          </button>
        )}
        {task.status === 'done' && (
          <button
            onClick={() => onStatusChange(task.id, 'pending')}
            className="flex-1 text-xs py-1.5 rounded-lg bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-400 font-medium hover:bg-slate-100 dark:hover:bg-slate-600 transition-colors"
          >
            Вернуть
          </button>
        )}
        {!reportOpen && (
          <button
            onClick={() => setReportOpen(true)}
            title="Сообщить о поломке"
            className={cn(
              'text-xs py-1.5 px-2.5 rounded-lg font-medium transition-colors flex items-center gap-1',
              task.maintenanceNote
                ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400'
                : 'bg-slate-50 dark:bg-slate-700 text-slate-500 dark:text-slate-400 hover:bg-orange-50 dark:hover:bg-orange-900/20 hover:text-orange-600',
            )}
          >
            <Wrench size={11} />
          </button>
        )}
      </div>
    </div>
  )
}