import { ClipboardList, Plus, RotateCcw } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { formatJalaliDate } from '../utils/date';
import PwaProjectProgress from './PwaProjectProgress';
import { pwaProjectStatusLabels } from './pwaProjectMeta';
import useHorizontalSwipeMenu from './useHorizontalSwipeMenu';

export default function PwaProjectCard({ project, permissions = {}, onCreateTask, onStatus }) {
  const navigate = useNavigate();
  const { open, dragging, translateX, revealRatio, close, swipeHandlers } = useHorizontalSwipeMenu();
  const counts = project.task_counts || {};
  const openTasks = () => {
    close();
    navigate(`/pwa/tasks?project_id=${project.id}`);
  };
  const createTask = () => {
    close();
    onCreateTask?.(project);
  };
  const changeStatus = () => {
    close();
    onStatus?.(project);
  };

  return (
    <article className={`pwa-project-swipe ${open ? 'open' : ''} ${dragging ? 'dragging' : ''}`}>
      <div className="pwa-project-action-rail" style={{ '--project-rail-reveal': revealRatio }} aria-hidden={!open}>
        <button type="button" onClick={openTasks}><ClipboardList size={17} /><span>مشاهده تسک</span></button>
        {permissions.canCreateTask && <button type="button" onClick={createTask}><Plus size={17} /><span>ایجاد تسک</span></button>}
        {permissions.canEditProject && <button type="button" onClick={changeStatus}><RotateCcw size={17} /><span>تغییر وضعیت</span></button>}
      </div>

      <div
        className="pwa-project-card"
        style={{ '--project-card-translate-x': `${translateX}px`, '--project-rail-reveal': revealRatio }}
        {...swipeHandlers}
        onClick={() => {
          if (open) close();
          else navigate(`/pwa/projects/${project.id}`);
        }}
      >
        <div className="pwa-project-card-head">
          <h3>{project.title}</h3>
          <span className="pwa-chip">{pwaProjectStatusLabels[project.status] || project.status || 'نامشخص'}</span>
        </div>

        <PwaProjectProgress value={project.progress} />

        <div className="pwa-project-stats">
          <Info label="تسک‌ها" value={counts.total || 0} />
          <Info label="انجام‌شده" value={counts.done || 0} />
          <Info label="عقب‌افتاده" value={counts.overdue || 0} />
        </div>

        <div className="pwa-project-meta">
          <span>مدیر پروژه: {project.manager?.name || 'نامشخص'}</span>
          <span>مهلت پروژه: {formatJalaliDate(project.due_date, 'بدون موعد')}</span>
        </div>

        <div className="pwa-project-card-foot">
          <div className="pwa-member-stack">
            {(project.members_preview || []).map((member) => (
              <span key={member.id}>{member.avatar_url ? <img src={member.avatar_url} alt={member.name} /> : member.name?.[0] || 'ک'}</span>
            ))}
          </div>
        </div>
      </div>
    </article>
  );
}

function Info({ label, value }) {
  return (
    <div>
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
}
