import { useCallback, useEffect, useState } from 'react';
import api from '../services/api';
import PriorityBadge from '../components/PriorityBadge';
import Modal from '../components/Modal';
import ConfirmDialog from '../components/ConfirmDialog';
import EmptyState from '../components/EmptyState';
import PersianDateInput from '../components/PersianDateInput';
import { TableSkeleton } from '../components/LoadingSkeleton';
import toast from 'react-hot-toast';
import { Archive, ArrowLeft, Edit3, Inbox, ListTodo, Trash2, UserCheck } from 'lucide-react';
import { formatJalaliDate } from '../utils/date';

const emptyForm = {
  title: '', description: '', type: 'feature', project_id: '', priority: 'medium', estimated_effort: '',
};

const emptyConversion = {
  assignee_id: '', priority: 'medium', start_date: '', due_date: '', estimated_time: '',
};

function errorMessage(error, fallback = 'خطایی رخ داد') {
  const errors = error.response?.data?.errors;
  const firstError = errors && Object.values(errors).flat()[0];
  return firstError || error.response?.data?.message || fallback;
}

export default function Backlog() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filters, setFilters] = useState({ type: '', project_id: '' });
  const [archiveView, setArchiveView] = useState('active');
  const [projects, setProjects] = useState([]);
  const [users, setUsers] = useState([]);
  const [conversionUsers, setConversionUsers] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const [editing, setEditing] = useState(null);
  const [deleting, setDeleting] = useState(null);
  const [converting, setConverting] = useState(null);
  const [saving, setSaving] = useState(false);
  const [convertingTask, setConvertingTask] = useState(false);
  const [form, setForm] = useState(emptyForm);
  const [conversion, setConversion] = useState(emptyConversion);

  const fetchItems = useCallback(() => {
    setLoading(true);
    const params = { archive_state: archiveView };
    Object.entries(filters).forEach(([key, value]) => { if (value) params[key] = value; });
    api.get('/backlog-items', { params })
      .then(({ data }) => setItems(data.data || []))
      .catch(() => toast.error('خطا در دریافت بک‌لاگ‌ها'))
      .finally(() => setLoading(false));
  }, [archiveView, filters]);

  useEffect(() => { fetchItems(); }, [fetchItems]);
  useEffect(() => {
    api.get('/projects', { params: { per_page: 100 } }).then(({ data }) => setProjects(data.data || [])).catch(() => {});
    api.get('/users', { params: { per_page: 200 } }).then(({ data }) => setUsers(data.data || [])).catch(() => {});
  }, []);

  const openCreate = () => {
    setEditing(null);
    setForm(emptyForm);
    setShowModal(true);
  };

  const openEdit = (item) => {
    setEditing(item);
    setForm({
      title: item.title,
      description: item.description || '',
      type: item.type,
      project_id: item.project_id || '',
      priority: item.priority,
      estimated_effort: item.estimated_effort || '',
    });
    setShowModal(true);
  };

  const handleSave = async (event) => {
    event.preventDefault();
    if (!form.title.trim()) { toast.error('عنوان الزامی است'); return; }
    setSaving(true);
    try {
      if (editing) {
        await api.put(`/backlog-items/${editing.id}`, form);
        toast.success('بک‌لاگ به‌روزرسانی شد');
      } else {
        await api.post('/backlog-items', form);
        toast.success('بک‌لاگ ایجاد شد');
      }
      setShowModal(false);
      fetchItems();
    } catch (error) {
      toast.error(errorMessage(error));
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    try {
      await api.delete(`/backlog-items/${deleting.id}`);
      toast.success('بک‌لاگ حذف شد');
      setDeleting(null);
      fetchItems();
    } catch {
      toast.error('خطا در حذف بک‌لاگ');
    }
  };

  const openConvert = async (item) => {
    if (!item.project_id) {
      toast.error('پیش از تبدیل، یک پروژه برای بک‌لاگ انتخاب کنید');
      return;
    }

    setConverting(item);
    setConversion({ ...emptyConversion, priority: item.priority || 'medium' });
    setConversionUsers([]);
    try {
      const { data } = await api.get(`/projects/${item.project_id}`);
      const project = data.data;
      const candidates = [...(project.members || []), project.project_manager].filter(Boolean);
      const uniqueCandidates = [...new Map(candidates.map((candidate) => [candidate.id, candidate])).values()];
      setConversionUsers(uniqueCandidates.length ? uniqueCandidates : users);
    } catch {
      setConversionUsers(users);
    }
  };

  const convertToTask = async (event) => {
    event.preventDefault();
    if (!conversion.assignee_id) { toast.error('انتخاب مسئول تسک الزامی است'); return; }
    if (conversion.start_date && conversion.due_date && conversion.due_date < conversion.start_date) {
      toast.error('تاریخ پایان نمی‌تواند قبل از تاریخ شروع باشد');
      return;
    }

    setConvertingTask(true);
    try {
      await api.post(`/backlog-items/${converting.id}/convert-to-task`, conversion);
      toast.success('تسک تخصیص داده شد و بک‌لاگ آرشیو شد');
      setConverting(null);
      fetchItems();
    } catch (error) {
      toast.error(errorMessage(error, 'خطا در تبدیل بک‌لاگ'));
    } finally {
      setConvertingTask(false);
    }
  };

  const typeBadge = (type) => {
    const colors = { idea: 'badge-info', feature: 'badge-primary', bug: 'badge-danger', improvement: 'badge-warning', task: 'badge-success' };
    const labels = { idea: 'ایده', feature: 'فیچر', bug: 'باگ', improvement: 'بهبود', task: 'تسک' };
    return <span className={`badge ${colors[type] || 'badge-gray'}`}>{labels[type] || type}</span>;
  };

  return (
    <div className="page-container">
      <div className="page-header backlog-page-header">
        <div className="backlog-view-switch" role="tablist" aria-label="وضعیت بک‌لاگ‌ها">
          <button type="button" role="tab" aria-selected={archiveView === 'active'} className={archiveView === 'active' ? 'active' : ''} onClick={() => setArchiveView('active')}><ListTodo size={17} /> فعال</button>
          <button type="button" role="tab" aria-selected={archiveView === 'archived'} className={archiveView === 'archived' ? 'active' : ''} onClick={() => setArchiveView('archived')}><Archive size={17} /> آرشیوشده</button>
        </div>
        {archiveView === 'active' && <button className="btn btn-primary" onClick={openCreate}>+ آیتم جدید</button>}
      </div>

      <div className="filter-bar">
        <select className="form-select" aria-label="فیلتر نوع بک‌لاگ" value={filters.type} onChange={(event) => setFilters({ ...filters, type: event.target.value })}>
          <option value="">همه انواع</option><option value="idea">ایده</option><option value="feature">فیچر</option><option value="bug">باگ</option><option value="improvement">بهبود</option><option value="task">تسک</option>
        </select>
        <select className="form-select" aria-label="فیلتر پروژه" value={filters.project_id} onChange={(event) => setFilters({ ...filters, project_id: event.target.value })}>
          <option value="">همه پروژه‌ها</option>{projects.map((project) => <option key={project.id} value={project.id}>{project.title}</option>)}
        </select>
      </div>

      {loading ? <TableSkeleton rows={6} cols={7} /> : items.length === 0 ? (
        <EmptyState icon={archiveView === 'active' ? Inbox : Archive} title={archiveView === 'active' ? 'بک‌لاگ فعالی وجود ندارد' : 'بک‌لاگ آرشیوشده‌ای وجود ندارد'} description={archiveView === 'active' ? 'هنوز آیتم فعالی به بک‌لاگ اضافه نشده است' : 'پس از تبدیل بک‌لاگ به تسک، در این بخش نمایش داده می‌شود'} action={archiveView === 'active' ? <button className="btn btn-primary" onClick={openCreate}>ایجاد آیتم جدید</button> : null} />
      ) : (
        <div className="card table-card">
          <div className="table-container">
            <table>
              <thead><tr><th>عنوان</th><th>نوع</th><th>اولویت</th><th>وضعیت</th><th>پروژه</th><th>{archiveView === 'active' ? 'تلاش' : 'تسک تخصیص‌یافته'}</th><th>عملیات</th></tr></thead>
              <tbody>{items.map((item) => (
                <tr key={item.id}>
                  <td><div className="backlog-title-cell"><strong>{item.title}</strong>{item.description && <small>{item.description}</small>}</div></td>
                  <td>{typeBadge(item.type)}</td>
                  <td><PriorityBadge priority={item.priority} /></td>
                  <td><span className={`badge ${item.is_archived ? 'badge-gray' : 'badge-success'}`}>{item.is_archived ? 'تبدیل‌شده و آرشیوشده' : 'فعال و تبدیل‌نشده'}</span></td>
                  <td className="muted-cell">{item.project?.title || '—'}</td>
                  <td>{item.is_archived ? <div className="backlog-task-cell"><strong>{item.converted_task?.title || 'تسک ایجادشده'}</strong><small><UserCheck size={13} /> {item.converted_task?.assignee?.name || 'بدون مسئول'} · {formatJalaliDate(item.archived_at)}</small></div> : (item.estimated_effort || '—')}</td>
                  <td><div className="table-actions">
                    {!item.is_archived && <button className="btn btn-sm btn-success" onClick={() => openConvert(item)} title="تبدیل و تخصیص به تسک" aria-label={`تبدیل ${item.title} به تسک`}><ArrowLeft size={15} /></button>}
                    {!item.is_archived && <button className="btn btn-sm btn-secondary" onClick={() => openEdit(item)} title="ویرایش" aria-label={`ویرایش ${item.title}`}><Edit3 size={15} /></button>}
                    <button className="btn btn-sm btn-danger" onClick={() => setDeleting(item)} title="حذف" aria-label={`حذف ${item.title}`}><Trash2 size={15} /></button>
                  </div></td>
                </tr>
              ))}</tbody>
            </table>
          </div>
        </div>
      )}

      {showModal && (
        <Modal title={editing ? 'ویرایش بک‌لاگ' : 'بک‌لاگ جدید'} onClose={() => setShowModal(false)} size="xl" footer={<><button className="btn btn-secondary" onClick={() => setShowModal(false)}>انصراف</button><button className="btn btn-primary" onClick={handleSave} disabled={saving}>{saving ? 'در حال ذخیره...' : 'ذخیره'}</button></>}>
          <form onSubmit={handleSave} className="compact-modal-form"><div className="compact-modal-grid">
            <div className="form-group"><label className="form-label" htmlFor="backlog-title">عنوان *</label><input id="backlog-title" className="form-input" value={form.title} onChange={(event) => setForm({ ...form, title: event.target.value })} /></div>
            <div className="form-group wide"><label className="form-label" htmlFor="backlog-description">توضیحات</label><textarea id="backlog-description" className="form-textarea" value={form.description} onChange={(event) => setForm({ ...form, description: event.target.value })} /></div>
            <div className="form-group"><label className="form-label" htmlFor="backlog-type">نوع</label><select id="backlog-type" className="form-select" value={form.type} onChange={(event) => setForm({ ...form, type: event.target.value })}><option value="idea">ایده</option><option value="feature">فیچر</option><option value="bug">باگ</option><option value="improvement">بهبود</option><option value="task">تسک</option></select></div>
            <div className="form-group"><label className="form-label" htmlFor="backlog-project">پروژه</label><select id="backlog-project" className="form-select" value={form.project_id} onChange={(event) => setForm({ ...form, project_id: event.target.value })}><option value="">انتخاب کنید</option>{projects.map((project) => <option key={project.id} value={project.id}>{project.title}</option>)}</select></div>
            <div className="form-group"><label className="form-label" htmlFor="backlog-priority">اولویت</label><select id="backlog-priority" className="form-select" value={form.priority} onChange={(event) => setForm({ ...form, priority: event.target.value })}><option value="low">کم</option><option value="medium">متوسط</option><option value="high">زیاد</option><option value="urgent">فوری</option></select></div>
            <div className="form-group"><label className="form-label" htmlFor="backlog-effort">تلاش تخمینی</label><select id="backlog-effort" className="form-select" value={form.estimated_effort} onChange={(event) => setForm({ ...form, estimated_effort: event.target.value })}><option value="">انتخاب کنید</option><option value="1">۱</option><option value="2">۲</option><option value="3">۳</option><option value="5">۵</option><option value="8">۸</option><option value="13">۱۳</option><option value="21">۲۱</option></select></div>
          </div></form>
        </Modal>
      )}

      {converting && (
        <Modal title="تبدیل بک‌لاگ به تسک" onClose={() => !convertingTask && setConverting(null)} size="lg" footer={<><button className="btn btn-secondary" onClick={() => setConverting(null)} disabled={convertingTask}>انصراف</button><button className="btn btn-success" onClick={convertToTask} disabled={convertingTask}>{convertingTask ? 'در حال تبدیل...' : 'ایجاد و تخصیص تسک'}</button></>}>
          <form onSubmit={convertToTask} className="conversion-form">
            <div className="conversion-summary"><ListTodo size={20} /><div><strong>{converting.title}</strong><span>{converting.project?.title}</span></div></div>
            <p className="form-helper">پس از ایجاد موفق تسک، این بک‌لاگ به‌صورت خودکار آرشیو می‌شود و در فهرست آرشیوی باقی می‌ماند.</p>
            <div className="compact-modal-grid">
              <div className="form-group wide"><label className="form-label" htmlFor="task-assignee">مسئول تسک *</label><select id="task-assignee" className="form-select" value={conversion.assignee_id} onChange={(event) => setConversion({ ...conversion, assignee_id: event.target.value })}><option value="">انتخاب مسئول</option>{conversionUsers.map((user) => <option key={user.id} value={user.id}>{user.name}{user.job_title ? ` — ${user.job_title}` : ''}</option>)}</select>{conversionUsers.length === 0 && <span className="form-helper">در حال دریافت اعضای پروژه...</span>}</div>
              <div className="form-group"><label className="form-label" htmlFor="task-priority">اولویت</label><select id="task-priority" className="form-select" value={conversion.priority} onChange={(event) => setConversion({ ...conversion, priority: event.target.value })}><option value="low">کم</option><option value="medium">متوسط</option><option value="high">زیاد</option><option value="urgent">فوری</option></select></div>
              <div className="form-group"><label className="form-label" htmlFor="task-estimate">زمان تخمینی (ساعت)</label><input id="task-estimate" type="number" min="0" step="0.5" className="form-input" value={conversion.estimated_time} onChange={(event) => setConversion({ ...conversion, estimated_time: event.target.value })} /></div>
              <div className="form-group"><label className="form-label">تاریخ شروع</label><PersianDateInput value={conversion.start_date} onChange={(value) => setConversion({ ...conversion, start_date: value })} /></div>
              <div className="form-group"><label className="form-label">تاریخ پایان</label><PersianDateInput value={conversion.due_date} onChange={(value) => setConversion({ ...conversion, due_date: value })} /></div>
            </div>
          </form>
        </Modal>
      )}

      {deleting && <ConfirmDialog title="حذف بک‌لاگ" message={`آیا از حذف «${deleting.title}» اطمینان دارید؟`} onConfirm={handleDelete} onCancel={() => setDeleting(null)} danger />}
    </div>
  );
}
