import { useState, useEffect } from 'react'
import ProjectCard from './ProjectCard'
import ProjectModal from './ProjectModal'
import Button from '../UI/Button'
import AgendaPanel from '../Calendar/AgendaPanel'
import useProjectStore from '../../store/useProjectStore'
import useUIStore from '../../store/useUIStore'
import { deleteProject, fetchProjects } from '../../api/projects'

const VIEW_OPTIONS = [
  { key: 'active',   label: 'Active'   },
  { key: 'archived', label: 'Archived' },
  { key: 'all',      label: 'All'      },
]

export default function ProjectList({ onRegisterNewProject }) {
  const { projects, removeProject, setProjects } = useProjectStore()
  const { sidebarTab, setSidebarTab } = useUIStore()
  const [showModal, setShowModal] = useState(false)
  const [editing,   setEditing]   = useState(null)
  const [projectView, setProjectView] = useState('active')
  const [search, setSearch] = useState('')

  useEffect(() => {
    onRegisterNewProject?.(() => setShowModal(true))
  }, [onRegisterNewProject])

  const refreshProjects = async () => {
    const data = await fetchProjects()
    setProjects(data)
  }

  const handleEdit   = (p) => { setEditing(p); setShowModal(true) }
  const handleDelete = async (p) => {
    if (window.confirm(`Delete "${p.name}" and all its deliverables?`)) {
      await deleteProject(p.id)
      removeProject(p.id)
    }
  }
  const handleClose = () => { setShowModal(false); setEditing(null) }

  const q = search.trim().toLowerCase()
  const visibleProjects = (projects || [])
    .filter(p => {
      const isArchived = !!p.archived_at
      if (projectView === 'active')   return !isArchived
      if (projectView === 'archived') return  isArchived
      return true
    })
    .filter(p => {
      if (!q) return true
      const hay = `${p.name || ''} ${p.description || ''}`.toLowerCase()
      return hay.includes(q)
    })

  return (
    <div className="flex flex-col h-full">

      {/* Header */}
      <div className="flex items-center gap-3 px-4 py-4 border-b border-surface-border flex-shrink-0 pl-10">
        <img
          src="/logo.png"
          alt="FabDash logo"
          className="w-12 h-12 object-contain rounded flex-shrink-0"
          onError={e => { e.target.style.display = 'none' }}
        />
        <div className="flex flex-col justify-center min-w-0">
          <span className="text-base font-black tracking-widest uppercase leading-none">
            <span className="text-gold">FAB</span><span className="text-white">DASH</span>
          </span>
        </div>
        <div className="ml-auto flex-shrink-0">
          <Button size="sm" onClick={() => setShowModal(true)}>+ Project</Button>
        </div>
      </div>

      {/* Tab toggle */}
      <div className="flex border-b border-surface-border flex-shrink-0">
        {[['projects','Projects'],['agenda','Upcoming']].map(([key, label]) => (
          <button key={key} onClick={() => setSidebarTab(key)}
            className={`flex-1 py-2 text-xs font-semibold transition-colors ${
              sidebarTab === key
                ? 'text-gold border-b-2 border-gold'
                : 'text-text-muted hover:text-text-primary'
            }`}>
            {label}
          </button>
        ))}
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto">
        {sidebarTab === 'projects' ? (
          <div className="p-3 space-y-2">

            {/* View toggle + Search + Refresh */}
            <div className="flex items-center gap-2 pb-1">
              <div className="flex bg-surface-elevated border border-surface-border rounded-lg overflow-hidden flex-shrink-0">
                {VIEW_OPTIONS.map(v => (
                  <button
                    key={v.key}
                    onClick={() => setProjectView(v.key)}
                    className={`px-2.5 py-1.5 text-[10px] font-semibold transition-colors ${
                      projectView === v.key
                        ? 'bg-gold text-surface'
                        : 'text-text-muted hover:text-text-primary'
                    }`}
                    title={`Show ${v.label.toLowerCase()} projects`}
                  >
                    {v.label}
                  </button>
                ))}
              </div>
              <input
                value={search}
                onChange={e => setSearch(e.target.value)}
                placeholder="Search projects…"
                className="flex-1 min-w-0 bg-surface-elevated border border-surface-border rounded-lg px-2.5 py-1.5 text-xs text-text-primary placeholder:text-text-muted/50 outline-none focus:border-gold/40 transition-colors"
              />
              <button
                onClick={refreshProjects}
                className="flex-shrink-0 text-[10px] px-2 py-1.5 rounded-lg border border-surface-border bg-surface-elevated text-text-muted hover:text-text-primary hover:border-gold/30 transition-colors"
                title="Refresh projects"
              >
                ↺
              </button>
            </div>

            {visibleProjects.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-10 px-4 text-center">
                <div className="opacity-20 mb-3">
                  <svg width="56" height="56" viewBox="0 0 56 56" fill="none">
                    <rect x="7" y="12" width="42" height="37" rx="3" stroke="#C9A84C" strokeWidth="1.5"/>
                    <line x1="7" y1="21" x2="49" y2="21" stroke="#C9A84C" strokeWidth="1.5"/>
                    <circle cx="17" cy="7" r="3.5" stroke="#C9A84C" strokeWidth="1.5"/>
                    <circle cx="39" cy="7" r="3.5" stroke="#C9A84C" strokeWidth="1.5"/>
                    <line x1="17" y1="31" x2="39" y2="31" stroke="#C9A84C" strokeWidth="1.5" strokeDasharray="4 2.5"/>
                    <line x1="17" y1="39" x2="30" y2="39" stroke="#C9A84C" strokeWidth="1.5" strokeDasharray="4 2.5"/>
                  </svg>
                </div>
                <p className="text-text-muted text-sm font-medium">
                  {q ? 'No matching projects' : projectView === 'archived' ? 'No archived projects' : 'No projects yet'}
                </p>
                <p className="text-text-muted/50 text-xs mt-1">
                  Press <kbd className="bg-surface-border px-1.5 py-0.5 rounded text-[10px] font-mono">N</kbd> or click + Project
                </p>
              </div>
            ) : (
              visibleProjects.map(p => (
                <ProjectCard key={p.id} project={p} onEdit={handleEdit} onDelete={handleDelete} onArchiveToggle={refreshProjects} />
              ))
            )}
          </div>
        ) : (
          <AgendaPanel />
        )}
      </div>

      {/* Keyboard shortcut legend */}
      <div className="flex-shrink-0 border-t border-surface-border px-4 py-2 flex flex-wrap gap-x-3 gap-y-1">
        {[['N','New'],['B','Sidebar'],['← →','Navigate'],['T','Today']].map(([key, desc]) => (
          <span key={key} className="flex items-center gap-1 text-[10px] text-text-muted/50">
            <kbd className="bg-surface-border px-1 py-0.5 rounded text-[9px] font-mono">{key}</kbd>
            {desc}
          </span>
        ))}
      </div>

      <ProjectModal isOpen={showModal} onClose={handleClose} project={editing} />
    </div>
  )
}