'use client'

import { useState } from 'react'
import { useAppStore } from '@/store'
import { Modal } from '@/components/ui/Modal'
import { PriorityBadge, StatusBadge } from '@/components/ui/Badge'
import { ProgressBar } from '@/components/ui/ProgressBar'
import { AvatarGroup, Avatar } from '@/components/ui/Avatar'
import { formatDate, formatDateShort, isOverdue, isSoon, generateId } from '@/lib/utils'
import { MEMBERS } from '@/lib/data'
import { showToast } from '@/components/ui/Toast'
import type { TaskStatus, Priority } from '@/types'

const COL_ORDER: TaskStatus[] = ['todo','inprogress','review','done']
const COL_LABELS: Record<TaskStatus, string> = {
  todo:'To Do', inprogress:'In Progress', review:'Review', done:'Done'
}
const COL_COLORS: Record<TaskStatus, string> = {
  todo:'#6366F1', inprogress:'#F97316', review:'#8B5CF6', done:'#22C55E'
}

/* ─────────────────────── PROJECT DETAIL ─────────────────────── */
function ProjectDetailModal() {
  const { selectedProject, modalType, setModalType, columns, tasks } = useAppStore()
  if (!selectedProject || modalType !== 'projectDetail') return null

  const members = MEMBERS.filter(m => selectedProject.memberIds.includes(m.id))
  const od   = isOverdue(selectedProject.deadline)
  const soon = isSoon(selectedProject.deadline)

  return (
    <Modal open size="xl" onClose={() => setModalType('none')}>
      {/* Header */}
      <div className="flex items-start gap-4 px-6 py-5 border-b border-gray-150">
        <div className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl flex-shrink-0"
          style={{ background: selectedProject.color + '22' }}>📁</div>
        <div className="flex-1 min-w-0">
          <h2 className="text-lg font-bold text-gray-900">{selectedProject.title}</h2>
          <p className="text-sm text-gray-400 mt-0.5 line-clamp-2">{selectedProject.description}</p>
        </div>
        <button onClick={() => setModalType('none')}
          className="w-8 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-500 text-sm transition-all flex-shrink-0">✕</button>
      </div>

      {/* Meta strip */}
      <div className="flex flex-wrap gap-6 px-6 py-4 bg-gray-50 border-b border-gray-150 text-sm">
        <div>
          <div className="text-[10px] text-gray-400 font-semibold uppercase mb-1">Progress</div>
          <div className="font-bold text-lg" style={{ color: selectedProject.progress >= 80 ? '#22C55E' : selectedProject.progress >= 50 ? '#F5C542' : '#E86B5F' }}>
            {selectedProject.progress}%
          </div>
        </div>
        <div>
          <div className="text-[10px] text-gray-400 font-semibold uppercase mb-1">Deadline</div>
          <div className={`font-semibold ${od ? 'text-red-500' : soon ? 'text-orange-500' : 'text-gray-800'}`}>
            {formatDate(selectedProject.deadline)}{od ? ' ⚠️' : soon ? ' ⏰' : ''}
          </div>
        </div>
        <div>
          <div className="text-[10px] text-gray-400 font-semibold uppercase mb-1">Prioritas</div>
          <PriorityBadge priority={selectedProject.priority} />
        </div>
        <div>
          <div className="text-[10px] text-gray-400 font-semibold uppercase mb-1">Anggota</div>
          <AvatarGroup members={members} max={5} size="xs" />
        </div>
      </div>

      <div className="px-6 py-5 space-y-5">
        {/* Progress bar */}
        <ProgressBar value={selectedProject.progress} />

        {/* Mini Kanban Preview */}
        <div>
          <h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-3">Progress Board</h3>
          <div className="flex gap-3 overflow-x-auto pb-2">
            {columns.map(col => {
              const colTasks = tasks.filter(t => col.taskIds.includes(t.id)).slice(0, 3)
              return (
                <div key={col.id} className="min-w-[175px] bg-gray-50 rounded-xl p-3 flex-shrink-0 border border-gray-150">
                  <div className="flex items-center gap-1.5 mb-2.5">
                    <div className="w-2 h-2 rounded-full" style={{ background: col.color }} />
                    <span className="text-[10px] font-semibold uppercase tracking-wide" style={{ color: col.color }}>
                      {col.title} ({col.taskIds.length})
                    </span>
                  </div>
                  {colTasks.map(t => (
                    <div key={t.id} className="bg-white rounded-lg p-2 mb-1.5 border border-gray-150 text-[11px] font-medium text-gray-700 truncate">
                      {t.title}
                    </div>
                  ))}
                  {col.taskIds.length > 3 && (
                    <div className="text-[10px] text-gray-400 text-center mt-1">+{col.taskIds.length - 3} lainnya</div>
                  )}
                </div>
              )
            })}
          </div>
        </div>

        {/* Members */}
        <div>
          <h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-3">Tim ({members.length})</h3>
          <div className="flex flex-wrap gap-2">
            {members.map((m, i) => (
              <div key={m.id} className="flex items-center gap-2 bg-gray-50 border border-gray-150 rounded-full px-3 py-1.5">
                <Avatar initials={m.initials} color={m.color} size="xs" />
                <div>
                  <div className="text-xs font-medium text-gray-800">{m.name}</div>
                  <div className="text-[10px] text-gray-400">{m.role}</div>
                </div>
              </div>
            ))}
            <button
              onClick={() => showToast('➕ Fitur undang anggota coming soon!')}
              className="flex items-center gap-1.5 border-2 border-dashed rounded-full px-3 py-1.5 text-xs font-medium transition-all hover:bg-gold-50"
              style={{ borderColor:'#F5C542', color:'#D4A017' }}
            >
              + Undang Anggota
            </button>
          </div>
        </div>

        {/* Comment */}
        <div className="bg-gray-50 rounded-xl p-4 border border-gray-150">
          <h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-3">💬 Komentar</h3>
          <div className="flex gap-3">
            <Avatar initials="AD" size="sm" />
            <input
              type="text"
              placeholder="Tulis komentar atau @mention anggota..."
              className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm bg-white outline-none"
              onKeyDown={(e) => {
                if (e.key === 'Enter' && e.currentTarget.value) {
                  showToast('💬 Komentar dikirim!')
                  e.currentTarget.value = ''
                }
              }}
            />
          </div>
          <p className="text-[10px] text-gray-400 mt-2.5">⏰ Terakhir diperbarui: 2 jam yang lalu</p>
        </div>
      </div>
    </Modal>
  )
}

/* ─────────────────────── TASK DETAIL ─────────────────────── */
function TaskDetailModal() {
  const { selectedTask, modalType, setModalType, toggleSubtask, deleteTask } = useAppStore()
  if (!selectedTask || modalType !== 'taskDetail') return null

  const members = MEMBERS.filter(m => selectedTask.assigneeIds.includes(m.id))
  const od = isOverdue(selectedTask.dueDate) && selectedTask.status !== 'done'

  return (
    <Modal open size="lg" onClose={() => setModalType('none')}>
      <div className="flex items-start gap-3 px-6 py-5 border-b border-gray-150">
        <span className="text-2xl">{selectedTask.status === 'done' ? '✅' : '📋'}</span>
        <div className="flex-1 min-w-0">
          <h2 className={`text-base font-bold ${selectedTask.status === 'done' ? 'line-through text-gray-400' : 'text-gray-900'}`}>
            {selectedTask.title}
          </h2>
          {selectedTask.description && (
            <p className="text-sm text-gray-400 mt-1">{selectedTask.description}</p>
          )}
        </div>
        <button onClick={() => setModalType('none')}
          className="w-8 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-500 text-sm transition-all flex-shrink-0">✕</button>
      </div>

      <div className="px-6 py-5 space-y-5">
        {/* Meta */}
        <div className="flex flex-wrap gap-4 text-sm">
          <div><div className="text-[10px] text-gray-400 uppercase mb-1">Status</div><StatusBadge status={selectedTask.status} /></div>
          <div><div className="text-[10px] text-gray-400 uppercase mb-1">Prioritas</div><PriorityBadge priority={selectedTask.priority} /></div>
          <div>
            <div className="text-[10px] text-gray-400 uppercase mb-1">Due Date</div>
            <div className={`text-sm font-medium ${od ? 'text-red-500' : 'text-gray-700'}`}>
              📅 {formatDate(selectedTask.dueDate)}{od ? ' ⚠️' : ''}
            </div>
          </div>
          <div><div className="text-[10px] text-gray-400 uppercase mb-1">Assignee</div><AvatarGroup members={members} max={4} size="xs" /></div>
        </div>

        {/* Subtasks */}
        {selectedTask.subtasks.length > 0 && (
          <div>
            <h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-3">
              Checklist ({selectedTask.subtasks.filter(s => s.completed).length}/{selectedTask.subtasks.length})
            </h3>
            <div className="bg-gray-50 rounded-xl border border-gray-150 divide-y divide-gray-100 overflow-hidden">
              {selectedTask.subtasks.map(st => (
                <div
                  key={st.id}
                  className="flex items-center gap-3 px-4 py-3 hover:bg-gray-100 cursor-pointer transition-colors"
                  onClick={() => toggleSubtask(selectedTask.id, st.id)}
                >
                  <div className={`w-4 h-4 rounded border-2 flex-shrink-0 flex items-center justify-center transition-all ${
                    st.completed ? 'border-green-500 bg-green-500 text-white' : 'border-gray-300'
                  }`}>
                    {st.completed && <span className="text-[10px]">✓</span>}
                  </div>
                  <span className={`text-sm ${st.completed ? 'line-through text-gray-400' : 'text-gray-700'}`}>
                    {st.title}
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Tags */}
        {selectedTask.tags.length > 0 && (
          <div>
            <h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">Tags</h3>
            <div className="flex flex-wrap gap-1.5">
              {selectedTask.tags.map(tag => (
                <span key={tag} className="px-2 py-1 bg-gray-100 text-gray-600 rounded-lg text-xs font-medium">
                  #{tag}
                </span>
              ))}
            </div>
          </div>
        )}

        {/* Comments */}
        {selectedTask.comments.length > 0 && (
          <div>
            <h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-3">💬 Komentar</h3>
            <div className="space-y-3">
              {selectedTask.comments.map(c => {
                const author = MEMBERS.find(m => m.id === c.authorId)
                return (
                  <div key={c.id} className="flex gap-3">
                    {author && <Avatar initials={author.initials} color={author.color} size="xs" />}
                    <div className="flex-1 bg-gray-50 rounded-xl px-3 py-2.5 border border-gray-150">
                      <div className="flex items-center gap-2 mb-1">
                        <span className="text-xs font-semibold text-gray-800">{author?.name}</span>
                        <span className="text-[10px] text-gray-400">{formatDate(c.createdAt)}</span>
                      </div>
                      <p className="text-xs text-gray-600 leading-relaxed">{c.content}</p>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        )}

        {/* Add comment */}
        <div className="flex gap-3">
          <Avatar initials="AD" size="xs" />
          <input
            type="text"
            placeholder="Tulis komentar atau @mention..."
            className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm bg-white outline-none"
            onKeyDown={(e) => { if (e.key === 'Enter') { showToast('💬 Komentar dikirim!'); e.currentTarget.value = '' } }}
          />
        </div>

        {/* Actions */}
        <div className="flex gap-2 pt-2 border-t border-gray-100">
          <button onClick={() => { showToast('📎 Upload file coming soon!') }}
            className="px-3 py-1.5 text-xs text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-100 transition-all">
            📎 Lampiran
          </button>
          <button onClick={() => { deleteTask(selectedTask.id); setModalType('none'); showToast('🗑️ Tugas dihapus') }}
            className="ml-auto px-3 py-1.5 text-xs text-red-500 border border-red-100 rounded-lg hover:bg-red-50 transition-all">
            🗑️ Hapus
          </button>
        </div>
      </div>
    </Modal>
  )
}

/* ─────────────────────── ADD FORMS ─────────────────────── */
function AddWorkspaceModal() {
  const { modalType, setModalType, addWorkspace } = useAppStore()
  const [title, setTitle] = useState('')
  const [desc,  setDesc]  = useState('')
  if (modalType !== 'addWorkspace') return null

  const submit = () => {
    if (!title.trim()) { showToast('⚠️ Nama workspace harus diisi!'); return }
    addWorkspace({ title, description: desc, memberIds: ['m1'], color: '#F5C542' })
    showToast(`🏢 Workspace "${title}" berhasil ditambahkan!`)
    setModalType('none'); setTitle(''); setDesc('')
  }

  return (
    <Modal open title="➕ Tambah Workspace Baru" size="md" onClose={() => setModalType('none')}>
      <div className="px-6 py-5 space-y-4">
        <InputField label="Nama Workspace" value={title} onChange={setTitle} placeholder="Masukkan nama workspace..." />
        <TextareaField label="Deskripsi" value={desc} onChange={setDesc} placeholder="Deskripsi singkat..." />
        <ModalActions onCancel={() => setModalType('none')} onSubmit={submit} />
      </div>
    </Modal>
  )
}

function AddTeamModal() {
  const { modalType, setModalType, addTeam } = useAppStore()
  const [title, setTitle] = useState('')
  const [desc,  setDesc]  = useState('')
  if (modalType !== 'addTeam') return null

  const submit = () => {
    if (!title.trim()) { showToast('⚠️ Nama tim harus diisi!'); return }
    addTeam({ title, description: desc, memberIds: ['m1'], status: 'active', color: '#6366F1', workspaceId: 'ws1' })
    showToast(`👥 Tim "${title}" berhasil ditambahkan!`)
    setModalType('none'); setTitle(''); setDesc('')
  }

  return (
    <Modal open title="➕ Tambah Tim / Divisi" size="md" onClose={() => setModalType('none')}>
      <div className="px-6 py-5 space-y-4">
        <InputField label="Nama Tim" value={title} onChange={setTitle} placeholder="Contoh: Dept. Keuangan" />
        <TextareaField label="Deskripsi" value={desc} onChange={setDesc} placeholder="Peran dan tanggung jawab tim..." />
        <ModalActions onCancel={() => setModalType('none')} onSubmit={submit} />
      </div>
    </Modal>
  )
}

function AddProjectModal() {
  const { modalType, setModalType, addProject } = useAppStore()
  const [title,    setTitle]    = useState('')
  const [desc,     setDesc]     = useState('')
  const [deadline, setDeadline] = useState('')
  const [priority, setPriority] = useState<Priority>('medium')
  if (modalType !== 'addProject') return null

  const submit = () => {
    if (!title.trim()) { showToast('⚠️ Nama proyek harus diisi!'); return }
    addProject({ title, description: desc, memberIds: ['m1'], progress: 0, deadline: deadline || '2025-12-31', priority, color: '#6366F1', teamId: 't1' })
    showToast(`📁 Proyek "${title}" berhasil ditambahkan!`)
    setModalType('none'); setTitle(''); setDesc(''); setDeadline('')
  }

  return (
    <Modal open title="➕ Tambah Proyek Baru" size="md" onClose={() => setModalType('none')}>
      <div className="px-6 py-5 space-y-4">
        <InputField label="Nama Proyek" value={title} onChange={setTitle} placeholder="Masukkan nama proyek..." />
        <TextareaField label="Deskripsi" value={desc} onChange={setDesc} placeholder="Tujuan dan scope proyek..." />
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1.5">Deadline</label>
            <input type="date" value={deadline} onChange={e => setDeadline(e.target.value)}
              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-white outline-none" />
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1.5">Prioritas</label>
            <select value={priority} onChange={e => setPriority(e.target.value as Priority)}
              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-white outline-none">
              <option value="low">🟢 Low</option>
              <option value="medium">🟡 Medium</option>
              <option value="high">🟠 High</option>
              <option value="urgent">🔴 Urgent</option>
            </select>
          </div>
        </div>
        <ModalActions onCancel={() => setModalType('none')} onSubmit={submit} />
      </div>
    </Modal>
  )
}

function AddTaskModal() {
  const { modalType, setModalType, addTask, selectedTask } = useAppStore()
  const [title,    setTitle]    = useState('')
  const [desc,     setDesc]     = useState('')
  const [dueDate,  setDueDate]  = useState('')
  const [priority, setPriority] = useState<Priority>('medium')
  const [status,   setStatus]   = useState<TaskStatus>(
    (selectedTask as any)?.status ?? 'todo'
  )
  if (modalType !== 'addTask') return null

  const submit = () => {
    if (!title.trim()) { showToast('⚠️ Judul tugas harus diisi!'); return }
    addTask({ title, description: desc, status, priority, dueDate: dueDate || '2025-12-31', assigneeIds: ['m1'], projectId: 'p1' })
    showToast(`✅ Tugas "${title}" ditambahkan ke ${COL_LABELS[status]}!`)
    setModalType('none'); setTitle(''); setDesc(''); setDueDate('')
  }

  return (
    <Modal open title="✅ Tambah Tugas Baru" size="md" onClose={() => setModalType('none')}>
      <div className="px-6 py-5 space-y-4">
        <InputField label="Judul Tugas" value={title} onChange={setTitle} placeholder="Masukkan judul tugas..." />
        <TextareaField label="Deskripsi (opsional)" value={desc} onChange={setDesc} placeholder="Detail pekerjaan..." />
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1.5">Kolom</label>
            <select value={status} onChange={e => setStatus(e.target.value as TaskStatus)}
              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-white outline-none">
              {COL_ORDER.map(c => <option key={c} value={c}>{COL_LABELS[c]}</option>)}
            </select>
          </div>
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1.5">Prioritas</label>
            <select value={priority} onChange={e => setPriority(e.target.value as Priority)}
              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-white outline-none">
              <option value="low">🟢 Low</option>
              <option value="medium">🟡 Medium</option>
              <option value="high">🟠 High</option>
              <option value="urgent">🔴 Urgent</option>
            </select>
          </div>
        </div>
        <div>
          <label className="text-xs font-semibold text-gray-600 block mb-1.5">Due Date</label>
          <input type="date" value={dueDate} onChange={e => setDueDate(e.target.value)}
            className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-white outline-none" />
        </div>
        <ModalActions onCancel={() => setModalType('none')} onSubmit={submit} label="Tambah Tugas" />
      </div>
    </Modal>
  )
}

/* ─────────────────────── SETTINGS ─────────────────────── */
function SettingsModal() {
  const { modalType, setModalType } = useAppStore()
  if (modalType !== 'settings') return null

  const items = [
    { icon:'👤', label:'Profil Pengguna',   desc:'Edit nama, foto, dan info akun' },
    { icon:'🔔', label:'Notifikasi',         desc:'Kelola preferensi notifikasi' },
    { icon:'🎨', label:'Tampilan & Tema',    desc:'Dark mode, font, dan warna aksen' },
    { icon:'🔒', label:'Privasi & Keamanan', desc:'Password, 2FA, dan sesi aktif' },
    { icon:'🔗', label:'Integrasi API',      desc:'Connect Slack, GitHub, dan lainnya' },
    { icon:'👥', label:'Manajemen Tim',      desc:'Undang, hapus, dan atur peran anggota' },
    { icon:'💾', label:'Ekspor Data',        desc:'Download semua data workspace' },
  ]

  return (
    <Modal open title="⚙️ Pengaturan" size="md" onClose={() => setModalType('none')}>
      <div className="px-2 py-2">
        {items.map((item, i) => (
          <button key={i}
            onClick={() => showToast(`${item.icon} ${item.label} coming soon!`)}
            className="w-full flex items-center gap-4 px-4 py-3.5 rounded-xl hover:bg-gray-50 transition-all text-left"
          >
            <span className="text-xl">{item.icon}</span>
            <div className="flex-1">
              <div className="text-sm font-medium text-gray-800">{item.label}</div>
              <div className="text-[11px] text-gray-400">{item.desc}</div>
            </div>
            <span className="text-gray-300">›</span>
          </button>
        ))}
      </div>
    </Modal>
  )
}

/* ─────────────────────── SHARED FIELDS ─────────────────────── */
function InputField({ label, value, onChange, placeholder }: {
  label: string; value: string; onChange: (v: string) => void; placeholder?: string
}) {
  return (
    <div>
      <label className="text-xs font-semibold text-gray-600 block mb-1.5">{label}</label>
      <input type="text" value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
        className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm bg-white outline-none" />
    </div>
  )
}

function TextareaField({ label, value, onChange, placeholder }: {
  label: string; value: string; onChange: (v: string) => void; placeholder?: string
}) {
  return (
    <div>
      <label className="text-xs font-semibold text-gray-600 block mb-1.5">{label}</label>
      <textarea rows={3} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
        className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm bg-white outline-none resize-none" />
    </div>
  )
}

function ModalActions({ onCancel, onSubmit, label = 'Simpan' }: {
  onCancel: () => void; onSubmit: () => void; label?: string
}) {
  return (
    <div className="flex gap-3 justify-end pt-2 border-t border-gray-100">
      <button onClick={onCancel}
        className="px-4 py-2 text-sm border border-gray-200 rounded-xl bg-white hover:bg-gray-100 transition-all">
        Batal
      </button>
      <button onClick={onSubmit}
        className="px-5 py-2 text-sm font-semibold rounded-xl transition-all hover:brightness-90"
        style={{ background:'#F5C542', color:'#444' }}>
        {label}
      </button>
    </div>
  )
}

/* ─────────────────────── MAIN EXPORT ─────────────────────── */
export function ModalsManager() {
  return (
    <>
      <ProjectDetailModal />
      <TaskDetailModal />
      <AddWorkspaceModal />
      <AddTeamModal />
      <AddProjectModal />
      <AddTaskModal />
      <SettingsModal />
    </>
  )
}