import { useCallback, useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import {
  Activity, AlertTriangle, Ban, CalendarDays, CheckCircle2, Clock3,
  FolderKanban, RefreshCw, ShieldAlert, TimerReset,
} from 'lucide-react';
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import api from '../services/api';
import { formatJalaliDate, formatJalaliDateTime } from '../utils/date';

const healthLabels = { on_track: 'روی برنامه', at_risk: 'در معرض ریسک', off_track: 'خارج از برنامه' };
const healthClass = { on_track: 'success', at_risk: 'warning', off_track: 'danger' };

function MetricCard({ label, value, detail, icon: Icon, tone = 'primary' }) {
  return (
    <article className={`monitor-metric tone-${tone}`}>
      <span className="monitor-metric-icon"><Icon size={21} /></span>
      <div><span>{label}</span><strong>{value ?? 0}</strong><small>{detail}</small></div>
    </article>
  );
}

function Panel({ title, subtitle, action, children, className = '' }) {
  return (
    <section className={`monitor-panel ${className}`}>
      <header className="monitor-panel-head">
        <div><h2>{title}</h2>{subtitle && <p>{subtitle}</p>}</div>
        {action}
      </header>
      {children}
    </section>
  );
}

export default function Dashboard() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [error, setError] = useState('');
  const [projectFilter, setProjectFilter] = useState('all');

  const loadMonitoring = useCallback(async (silent = false) => {
    if (silent) setRefreshing(true); else setLoading(true);
    setError('');
    try {
      const response = await api.get('/dashboard/monitoring');
      setData(response.data.data);
    } catch {
      setError('دریافت اطلاعات مانیتورینگ ناموفق بود.');
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }, []);

  useEffect(() => {
    loadMonitoring();
    const timer = window.setInterval(() => loadMonitoring(true), 120000);
    return () => window.clearInterval(timer);
  }, [loadMonitoring]);

  const projects = useMemo(() => {
    if (projectFilter === 'all') return data?.projects || [];
    return (data?.projects || []).filter((project) => String(project.id) === projectFilter);
  }, [data, projectFilter]);

  if (loading) {
    return <div className="page-container monitor-page"><div className="monitor-loading">{Array.from({ length: 10 }).map((_, index) => <div key={index} className="skeleton" />)}</div></div>;
  }

  if (error && !data) {
    return (
      <div className="page-container monitor-page">
        <div className="monitor-error"><ShieldAlert size={34} /><h2>{error}</h2><button className="btn btn-primary" onClick={() => loadMonitoring()}>تلاش دوباره</button></div>
      </div>
    );
  }

  const summary = data?.summary || {};

  return (
    <div className="page-container monitor-page">
      <div className="monitor-toolbar">
        <div>
          <div className="monitor-live"><i /> مانیتورینگ عملیاتی</div>
          <p>وضعیت پروژه‌ها، Sprintها و جریان کار در یک نمای قابل اقدام</p>
        </div>
        <div className="monitor-toolbar-actions">
          <select className="form-select" value={projectFilter} onChange={(event) => setProjectFilter(event.target.value)} aria-label="فیلتر پروژه">
            <option value="all">همه پروژه‌ها</option>
            {(data?.projects || []).map((project) => <option key={project.id} value={project.id}>{project.title}</option>)}
          </select>
          <span className="monitor-updated">آخرین بروزرسانی: {formatJalaliDateTime(data?.generated_at)}</span>
          <button type="button" className="btn btn-outline" onClick={() => loadMonitoring(true)} disabled={refreshing}>
            <RefreshCw size={16} className={refreshing ? 'spin' : ''} /> بروزرسانی
          </button>
        </div>
      </div>

      <div className="monitor-metrics">
        <MetricCard label="پروژه فعال" value={summary.active_projects} detail={`${summary.projects_at_risk || 0} مورد نیازمند توجه`} icon={FolderKanban} />
        <MetricCard label="تسک باز" value={summary.open_tasks} detail={`${summary.overdue_tasks || 0} عقب‌افتاده`} icon={Activity} tone="info" />
        <MetricCard label="تسک مسدود" value={summary.blocked_tasks} detail="نیازمند رفع مانع" icon={Ban} tone="danger" />
        <MetricCard label="Sprint فعال" value={summary.active_sprints} detail="در حال اجرا" icon={TimerReset} tone="success" />
        <MetricCard label="جلسه امروز" value={summary.meetings_today} detail="برنامه امروز تیم" icon={CalendarDays} tone="secondary" />
        <MetricCard label="اقدام معوق" value={summary.overdue_action_items} detail={`${summary.open_blockers || 0} مانع باز`} icon={Clock3} tone="warning" />
      </div>

      <div className="monitor-primary-grid">
        <Panel title="روند جریان کار" subtitle="تسک‌های ایجادشده در برابر تکمیل‌شده در شش ماه اخیر" className="monitor-trend">
          {(data?.trends || []).length === 0 ? <div className="monitor-empty">داده کافی برای نمایش روند وجود ندارد.</div> : (
            <>
              <div className="monitor-chart" role="img" aria-label="نمودار روند ایجاد و تکمیل تسک‌ها">
                <ResponsiveContainer width="100%" height="100%">
                  <AreaChart data={data.trends}>
                    <defs>
                      <linearGradient id="createdGradient" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="var(--info)" stopOpacity={0.28} /><stop offset="95%" stopColor="var(--info)" stopOpacity={0} /></linearGradient>
                      <linearGradient id="completedGradient" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="var(--success)" stopOpacity={0.22} /><stop offset="95%" stopColor="var(--success)" stopOpacity={0} /></linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" stroke="var(--gray-200)" vertical={false} />
                    <XAxis dataKey="month" tick={{ fill: 'var(--gray-500)', fontSize: 11 }} axisLine={false} tickLine={false} />
                    <YAxis tick={{ fill: 'var(--gray-500)', fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
                    <Tooltip contentStyle={{ background: 'var(--surface-elevated)', border: '1px solid var(--gray-200)', borderRadius: 10 }} />
                    <Area type="monotone" dataKey="created" name="ایجادشده" stroke="var(--info)" strokeWidth={2} fill="url(#createdGradient)" />
                    <Area type="monotone" dataKey="completed" name="تکمیل‌شده" stroke="var(--success)" strokeWidth={2} fill="url(#completedGradient)" />
                  </AreaChart>
                </ResponsiveContainer>
              </div>
              <table className="sr-only-table">
                <caption>داده‌های روند جریان کار</caption>
                <thead><tr><th>ماه</th><th>ایجادشده</th><th>تکمیل‌شده</th></tr></thead>
                <tbody>{data.trends.map((row) => <tr key={row.month}><td>{row.month}</td><td>{row.created}</td><td>{row.completed}</td></tr>)}</tbody>
              </table>
            </>
          )}
        </Panel>

        <Panel title="نیازمند توجه" subtitle="مواردی که اقدام سریع می‌خواهند" className="monitor-attention">
          {(data?.attention || []).length === 0 ? (
            <div className="monitor-empty success"><CheckCircle2 size={24} /> مورد بحرانی فعالی وجود ندارد.</div>
          ) : (
            <div className="attention-list">
              {data.attention.map((item) => (
                <Link key={item.id} to={item.target_url || '#'} className={`attention-item ${item.type}`}>
                  <span><AlertTriangle size={17} /></span>
                  <div><strong>{item.title}</strong><small>{item.context || 'بدون پروژه'} · {formatJalaliDate(item.date)}</small></div>
                </Link>
              ))}
            </div>
          )}
        </Panel>
      </div>

      <Panel title="سلامت پروژه‌ها" subtitle="ترکیب ریسک، پیشرفت، تسک‌های معوق و موانع">
        {projects.length === 0 ? <div className="monitor-empty">پروژه‌ای برای نمایش وجود ندارد.</div> : (
          <div className="project-health-table">
            <div className="project-health-head"><span>پروژه</span><span>سلامت</span><span>پیشرفت</span><span>معوق</span><span>مسدود</span></div>
            {projects.map((project) => (
              <Link to={`/projects/${project.id}`} className="project-health-row" key={project.id}>
                <div><strong>{project.title}</strong><small>{project.completed_tasks} از {project.total_tasks} تسک تکمیل شده</small></div>
                <span className={`health-chip ${healthClass[project.health]}`}>{healthLabels[project.health]}</span>
                <div className="health-progress"><span><i style={{ width: `${project.progress || 0}%` }} /></span><strong>{project.progress || 0}%</strong></div>
                <strong className={project.overdue_tasks ? 'text-danger' : ''}>{project.overdue_tasks}</strong>
                <strong className={project.blocked_tasks ? 'text-danger' : ''}>{project.blocked_tasks}</strong>
              </Link>
            ))}
          </div>
        )}
      </Panel>

      <div className="monitor-secondary-grid">
        <Panel title="سلامت Sprintها" subtitle="پیشرفت واقعی در برابر پیشرفت مورد انتظار">
          <div className="sprint-health-list">
            {(data?.sprints || []).length === 0 ? <div className="monitor-empty">Sprint فعالی وجود ندارد.</div> : data.sprints.map((sprint) => (
              <Link to={`/sprints/${sprint.id}/workspace`} key={sprint.id} className="sprint-health-card">
                <div><strong>{sprint.title}</strong><small>{sprint.project}</small></div>
                <span className={`health-chip ${healthClass[sprint.health]}`}>{healthLabels[sprint.health]}</span>
                <div className="sprint-health-bars">
                  <label>واقعی <span><i style={{ width: `${sprint.progress}%` }} /></span><b>{sprint.progress}%</b></label>
                  <label>انتظار <span><i className="expected" style={{ width: `${sprint.expected_progress}%` }} /></span><b>{sprint.expected_progress}%</b></label>
                </div>
                <small>{sprint.remaining_days} روز باقی‌مانده · {sprint.blocked_tasks} مسدود</small>
              </Link>
            ))}
          </div>
        </Panel>

        <Panel title="بار کاری تیم" subtitle="تعداد تسک‌های باز و عقب‌افتاده">
          <div className="workload-list">
            {(data?.workload || []).length === 0 ? <div className="monitor-empty">اطلاعات بار کاری موجود نیست.</div> : data.workload.map((member) => (
              <div className="workload-row" key={member.id}>
                <span className="avatar avatar-sm">{member.name?.[0]}</span>
                <div><strong>{member.name}</strong><span><i className={member.load} style={{ width: `${Math.min(100, member.open_tasks * 8)}%` }} /></span></div>
                <b>{member.open_tasks}</b>
                {member.overdue_tasks > 0 && <small>{member.overdue_tasks} معوق</small>}
              </div>
            ))}
          </div>
        </Panel>

        <Panel title="جلسات پیش‌رو" subtitle="نزدیک‌ترین نشست‌های برنامه‌ریزی‌شده">
          <div className="upcoming-meeting-list">
            {(data?.upcoming_meetings || []).length === 0 ? <div className="monitor-empty">جلسه‌ای برنامه‌ریزی نشده است.</div> : data.upcoming_meetings.map((meeting) => (
              <Link to={meeting.target_url} key={meeting.id}>
                <span className="meeting-date"><b>{formatJalaliDate(meeting.date)}</b><small>{meeting.time || 'تمام روز'}</small></span>
                <div><strong>{meeting.title}</strong><small>{meeting.sprint || meeting.project || 'جلسه عمومی'}</small></div>
              </Link>
            ))}
          </div>
        </Panel>
      </div>
    </div>
  );
}
