import { useCallback, useEffect, useMemo, useState } from 'react';
import { Link, useParams, useSearchParams } from 'react-router-dom';
import {
  Activity, AlertTriangle, ArrowRight, Ban, CalendarDays, CheckCircle2,
  Clock3, Gauge, ListChecks, MessageSquare, Plus, ShieldAlert, Target, Users,
} from 'lucide-react';
import api from '../services/api';
import { formatJalaliDate, formatJalaliDateTime } from '../utils/date';

const tabs = [
  ['overview', 'نمای کلی'], ['board', 'برد'], ['meetings', 'جلسات'], ['decisions', 'تصمیم‌ها'],
  ['action-items', 'اقدام‌ها'], ['blockers', 'موانع'], ['metrics', 'شاخص‌ها'], ['activity', 'فعالیت'],
];
const healthLabels = { on_track: 'روی برنامه', at_risk: 'در معرض ریسک', off_track: 'خارج از برنامه' };

function Empty({ text }) {
  return <div className="workspace-empty"><ListChecks size={25} /><span>{text}</span></div>;
}

export default function SprintWorkspace() {
  const { id } = useParams();
  const [searchParams, setSearchParams] = useSearchParams();
  const [workspace, setWorkspace] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const activeTab = searchParams.get('tab') || 'overview';

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    try {
      const { data } = await api.get(`/sprints/${id}/workspace`);
      setWorkspace(data.data);
    } catch {
      setError('دریافت فضای کاری Sprint ناموفق بود.');
    } finally {
      setLoading(false);
    }
  }, [id]);

  useEffect(() => { load(); }, [load]);

  const sprint = workspace?.sprint;
  const health = workspace?.health || {};
  const progress = workspace?.progress || {};
  const tasksByStatus = useMemo(() => (sprint?.tasks || []).reduce((result, task) => {
    if (!result[task.status]) result[task.status] = [];
    result[task.status].push(task);
    return result;
  }, {}), [sprint]);

  if (loading) return <div className="page-container workspace-page"><div className="workspace-loading">{Array.from({ length: 8 }).map((_, index) => <div className="skeleton" key={index} />)}</div></div>;
  if (error || !sprint) return <div className="page-container workspace-page"><div className="monitor-error"><ShieldAlert size={34} /><h2>{error}</h2><button className="btn btn-primary" onClick={load}>تلاش دوباره</button></div></div>;

  return (
    <div className="page-container workspace-page">
      <header className="workspace-hero">
        <div className="workspace-breadcrumb"><Link to="/sprints"><ArrowRight size={16} /> Sprintها</Link><span>/</span><span>{sprint.title}</span></div>
        <div className="workspace-hero-main">
          <div>
            <div className="workspace-title-row"><h1>{sprint.title}</h1><span className={`health-chip ${health.status === 'on_track' ? 'success' : health.status === 'at_risk' ? 'warning' : 'danger'}`}>{healthLabels[health.status]}</span></div>
            <p>{sprint.goal || 'برای این Sprint هنوز هدفی ثبت نشده است.'}</p>
            <div className="workspace-context"><span>{sprint.project?.title}</span><span>{formatJalaliDate(sprint.start_date)} تا {formatJalaliDate(sprint.end_date)}</span><span>{health.remaining_days} روز باقی‌مانده</span></div>
          </div>
          <div className="workspace-progress-ring" style={{ '--progress': `${health.progress || 0}%` }}>
            <strong>{health.progress || 0}%</strong><span>پیشرفت</span>
          </div>
        </div>
        <div className="workspace-quick-actions">
          <Link className="btn btn-primary" to={`/meetings?sprint_id=${sprint.id}`}><Plus size={16} /> جلسه جدید</Link>
          <Link className="btn btn-outline" to="/tasks"><Plus size={16} /> افزودن تسک</Link>
          <button type="button" className="btn btn-outline" onClick={() => setSearchParams({ tab: 'blockers' })}><Ban size={16} /> مشاهده موانع</button>
        </div>
      </header>

      <div className="workspace-kpis">
        <article><Target size={19} /><span>کل تسک‌ها</span><strong>{progress.total_tasks || 0}</strong></article>
        <article><CheckCircle2 size={19} /><span>تکمیل‌شده</span><strong>{progress.completed_tasks || 0}</strong></article>
        <article><Activity size={19} /><span>در حال انجام</span><strong>{progress.in_progress_tasks || 0}</strong></article>
        <article className="danger"><Ban size={19} /><span>مسدود</span><strong>{progress.blocked_tasks || 0}</strong></article>
        <article className="warning"><Clock3 size={19} /><span>عقب‌افتاده</span><strong>{progress.overdue_tasks || 0}</strong></article>
        <article><Users size={19} /><span>اعضای تیم</span><strong>{sprint.members?.length || 0}</strong></article>
      </div>

      <nav className="workspace-tabs" aria-label="بخش‌های Sprint">
        {tabs.map(([key, label]) => <button key={key} type="button" className={activeTab === key ? 'active' : ''} onClick={() => setSearchParams({ tab: key })}>{label}</button>)}
      </nav>

      <main className="workspace-content">
        {activeTab === 'overview' && (
          <div className="sprint-overview-grid">
            <section className="workspace-card span-2">
              <header><div><Gauge size={18} /><h2>سلامت Sprint</h2></div><span className={`health-chip ${health.status === 'on_track' ? 'success' : health.status === 'at_risk' ? 'warning' : 'danger'}`}>{healthLabels[health.status]}</span></header>
              <div className="health-comparison">
                <label>پیشرفت واقعی <span><i style={{ width: `${health.progress || 0}%` }} /></span><b>{health.progress || 0}%</b></label>
                <label>پیشرفت مورد انتظار <span><i className="expected" style={{ width: `${health.expected_progress || 0}%` }} /></span><b>{health.expected_progress || 0}%</b></label>
              </div>
              {(health.open_blockers > 0 || health.overdue_tasks > 0) && <div className="workspace-alert"><AlertTriangle size={17} /> {health.open_blockers} مانع باز و {health.overdue_tasks} تسک عقب‌افتاده نیازمند توجه است.</div>}
            </section>

            <section className="workspace-card">
              <header><div><CalendarDays size={18} /><h2>جلسه بعدی</h2></div></header>
              {workspace.upcoming_meeting ? (
                <Link className="upcoming-workspace-meeting" to={`/meetings/${workspace.upcoming_meeting.id}/workspace`}>
                  <strong>{workspace.upcoming_meeting.title}</strong>
                  <span>{formatJalaliDate(workspace.upcoming_meeting.date)} · {workspace.upcoming_meeting.start_time?.slice(0, 5) || 'تمام روز'}</span>
                  <small>{workspace.upcoming_meeting.location || 'مکان ثبت نشده'}</small>
                </Link>
              ) : <Empty text="جلسه آینده‌ای ثبت نشده است." />}
            </section>

            <section className="workspace-card">
              <header><div><Ban size={18} /><h2>موانع باز</h2></div><button onClick={() => setSearchParams({ tab: 'blockers' })}>همه</button></header>
              {(workspace.blockers || []).filter((item) => !['resolved', 'closed'].includes(item.status)).slice(0, 4).map((item) => <div className="workspace-list-item" key={item.id}><span className={`severity ${item.severity}`} /><div><strong>{item.title}</strong><small>{item.status}</small></div></div>)}
              {(workspace.blockers || []).length === 0 && <Empty text="مانع بازی وجود ندارد." />}
            </section>

            <section className="workspace-card">
              <header><div><MessageSquare size={18} /><h2>تصمیم‌های اخیر</h2></div><button onClick={() => setSearchParams({ tab: 'decisions' })}>همه</button></header>
              {(workspace.decisions || []).slice(0, 4).map((item) => <div className="workspace-list-item" key={item.id}><CheckCircle2 size={16} /><div><strong>{item.title}</strong><small>{item.status}</small></div></div>)}
              {(workspace.decisions || []).length === 0 && <Empty text="هنوز تصمیمی ثبت نشده است." />}
            </section>
          </div>
        )}

        {activeTab === 'board' && (
          <div className="workspace-board">
            {[['waiting', 'در انتظار'], ['todo', 'برای انجام'], ['in_progress', 'در حال انجام'], ['review', 'بازبینی'], ['done', 'انجام‌شده']].map(([status, label]) => (
              <section key={status}><header><strong>{label}</strong><span>{tasksByStatus[status]?.length || 0}</span></header>
                {(tasksByStatus[status] || []).map((task) => <article key={task.id}><strong>{task.title}</strong><small>{task.assignee?.name || 'بدون مسئول'}</small></article>)}
              </section>
            ))}
          </div>
        )}

        {activeTab === 'meetings' && <WorkspaceCollection items={workspace.meetings} empty="جلسه‌ای به این Sprint متصل نشده است." render={(meeting) => <Link className="workspace-data-row" to={`/meetings/${meeting.id}/workspace`}><div><strong>{meeting.title}</strong><small>{formatJalaliDateTime(`${meeting.date}T${meeting.start_time || '00:00:00'}`)}</small></div><span className="badge badge-info">{meeting.status}</span></Link>} />}
        {activeTab === 'decisions' && <WorkspaceCollection items={workspace.decisions} empty="تصمیمی ثبت نشده است." render={(item) => <div className="workspace-data-row"><div><strong>{item.title}</strong><small>{item.description || item.rationale || 'بدون توضیح'}</small></div><span className="badge badge-primary">{item.status}</span></div>} />}
        {activeTab === 'action-items' && <WorkspaceCollection items={workspace.action_items} empty="اقدامی ثبت نشده است." render={(item) => <div className="workspace-data-row"><div><strong>{item.title}</strong><small>سررسید: {formatJalaliDate(item.due_date)}</small></div><span className="badge badge-warning">{item.status}</span></div>} />}
        {activeTab === 'blockers' && <WorkspaceCollection items={workspace.blockers} empty="مانعی ثبت نشده است." render={(item) => <div className="workspace-data-row"><div><strong>{item.title}</strong><small>{item.description || 'بدون توضیح'}</small></div><span className={`badge ${item.severity === 'critical' ? 'badge-danger' : 'badge-warning'}`}>{item.severity}</span></div>} />}
        {activeTab === 'metrics' && <div className="workspace-card"><header><div><Gauge size={18} /><h2>شاخص‌های Sprint</h2></div></header><div className="metrics-placeholder"><strong>{health.progress || 0}%</strong><span>نرخ تکمیل فعلی</span><strong>{health.expected_progress || 0}%</strong><span>پیشرفت مورد انتظار</span><strong>{workspace.scope_changes?.length || 0}</strong><span>تغییر محدوده</span></div></div>}
        {activeTab === 'activity' && <Empty text="فعالیت‌های Sprint از Audit Log در این بخش نمایش داده خواهند شد." />}
      </main>
    </div>
  );
}

function WorkspaceCollection({ items = [], empty, render }) {
  return <section className="workspace-card workspace-collection">{items.length === 0 ? <Empty text={empty} /> : items.map(render)}</section>;
}
