fabdash/frontend/src/components/Projects/ProjectCard.jsx

import { useState } from 'react'
import Badge from '../UI/Badge'
import { formatDate } from '../../utils/dateHelpers'
import useFocusStore from '../../store/useFocusStore'
import useProjectStore from '../../store/useProjectStore'
import { deleteDeliverable } from '../../api/deliverables'
import DeliverableModal from '../Deliverables/DeliverableModal'
import ContextMenu from '../UI/ContextMenu'

function DriveIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" className="w-3.5 h-3.5">
      <path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
      <path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
      <path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
      <path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
      <path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
      <path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 27h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
    </svg>
  )
}

export default function ProjectCard({ project, onEdit, onDelete }) {
  const openFocus        = useFocusStore(s => s.openFocus)
  const { removeDeliverable } = useProjectStore()
  const [delModal,  setDelModal]  = useState({ open: false, deliverable: null })
  const [ctxMenu,   setCtxMenu]   = useState(null)

  const openDelEdit = (d) => setDelModal({ open: true, deliverable: d })

  const handleRowCtx = (e, d) => {
    e.preventDefault()
    e.stopPropagation()
    setCtxMenu({
      x: e.clientX, y: e.clientY,
      items: [
        { icon: '✎', label: 'Edit Deliverable',  action: () => openDelEdit(d) },
        { icon: '◎', label: 'Open Focus View',   action: () => openFocus(project.id, d.id) },
        { separator: true },
        {
          icon: '✕', label: 'Delete Deliverable', danger: true,
          action: async () => {
            if (window.confirm(`Delete "${d.title}"?`)) {
              await deleteDeliverable(d.id)
              removeDeliverable(d.id)
            }
          },
        },
      ],
    })
  }

  const handleHeaderCtx = (e) => {
    e.preventDefault()
    setCtxMenu({
      x: e.clientX, y: e.clientY,
      items: [
        { icon: '✎', label: 'Edit Project',  action: () => onEdit(project) },
        ...(project.drive_url ? [{ icon: '⬡', label: 'Open Drive', action: () => window.open(project.drive_url, '_blank') }] : []),
        { separator: true },
        { icon: '✕', label: 'Delete Project', danger: true, action: () => onDelete(project) },
      ],
    })
  }

  return (
    <div className="bg-surface-elevated border border-surface-border rounded-lg overflow-hidden transition-all hover:border-gold/20">
      <div className="h-1 w-full" style={{ backgroundColor: project.color }} />
      <div className="p-3">

        {/* Header — double-click to edit, right-click for menu */}
        <div
          className="flex items-start justify-between mb-1.5 cursor-default"
          onDoubleClick={() => onEdit(project)}
          onContextMenu={handleHeaderCtx}
          title="Double-click to edit project"
        >
          <div className="flex items-center gap-2 min-w-0">
            <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: project.color }} />
            <span className="text-sm font-semibold text-text-primary truncate">{project.name}</span>
          </div>
          <div className="flex items-center gap-0.5 flex-shrink-0 ml-1">
            {project.drive_url && (
              <a href={project.drive_url} target="_blank" rel="noopener noreferrer"
                title="Open Google Drive folder" onClick={e => e.stopPropagation()}
                className="flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary bg-surface hover:bg-surface-border/40 border border-surface-border hover:border-gold/30 rounded px-1.5 py-1 transition-all mr-1">
                <DriveIcon /><span>Drive</span>
              </a>
            )}
            <button onClick={() => onEdit(project)}   className="text-text-muted hover:text-gold p-1 transition-colors text-sm" title="Edit project">✎</button>
            <button onClick={() => onDelete(project)} className="text-text-muted hover:text-red-400 p-1 transition-colors text-sm" title="Delete project">✕</button>
          </div>
        </div>

        {project.description && (
          <p className="text-xs text-text-muted mb-2 line-clamp-1">{project.description}</p>
        )}

        {/* Deliverable rows */}
        <div className="space-y-1">
          {(project.deliverables || []).map(d => (
            <button
              key={d.id}
              onClick={() => openFocus(project.id, d.id)}
              onDoubleClick={(e) => { e.stopPropagation(); openDelEdit(d) }}
              onContextMenu={(e) => handleRowCtx(e, d)}
              title="Click: Focus View · Double-click: Edit · Right-click: Menu"
              className="w-full flex items-center justify-between text-xs bg-surface rounded px-2 py-1.5 border border-transparent hover:border-gold/20 hover:bg-surface-border/20 transition-all text-left group"
            >
              <span className="text-text-muted group-hover:text-text-primary truncate flex-1 pr-2">{d.title}</span>
              <div className="flex items-center gap-1.5 flex-shrink-0">
                <span className="text-text-muted/60 font-mono text-[9px]">{formatDate(d.due_date)}</span>
                <Badge status={d.status} />
              </div>
            </button>
          ))}
          {(!project.deliverables || project.deliverables.length === 0) && (
            <p className="text-[11px] text-text-muted/40 italic text-center py-1">No deliverables</p>
          )}
        </div>

      </div>

      {/* Local deliverable edit modal */}
      <DeliverableModal
        isOpen={delModal.open}
        onClose={() => setDelModal({ open: false, deliverable: null })}
        deliverable={delModal.deliverable}
        projectId={project.id}
      />

      {ctxMenu && (
        <ContextMenu x={ctxMenu.x} y={ctxMenu.y} items={ctxMenu.items} onClose={() => setCtxMenu(null)} />
      )}
    </div>
  )
}