import { useEffect, useRef, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Plus, Save, Trash2, ArrowRightLeft, FolderUp, Archive, RotateCcw, Sparkles } from 'lucide-react';
import { useUi } from '../../context/ui-context.jsx';
import { useAuth } from '../../context/auth-context.jsx';
import { useAsync, useAction } from '../../hooks/useAsync.js';
import { useDebouncedValue } from '../../hooks/useDebouncedValue.js';
import { listActivitiesByProject, createActivity, getActivity, deleteActivity, reorderActivities, moveActivity, convertActivityToProject, listActivitiesTrash, restoreActivity } from '../../services/activities.js';
import { listProjectOptions } from '../../services/projects.js';
import { search as searchApi } from '../../services/search.js';
import { listCatalog } from '../../services/catalogs.js';
import { listUsers } from '../../services/users.js';
import { ListView } from '../../components/ListView.jsx';
import { SearchInput } from '../../components/SearchInput.jsx';
import { SearchResultsDropdown } from '../../components/SearchResultsDropdown.jsx';
import { Button } from '../../components/Button.jsx';
import { Field, FieldRow } from '../../components/Field.jsx';
import { ComboBox } from '../../components/ComboBox.jsx';
import { StatusBadge, ProgressBar, DueBadge } from '../../components/StatusBadge.jsx';
import { dueStatus } from '../../utils/dueStatus.js';
import { DetailPopup } from '../../components/DetailPopup.jsx';
import ActivityDetailPanel from './ActivityDetailPanel.jsx';
import { AiPlanDialog } from './AiPlanDialog.jsx';
import { getAiStatus } from '../../services/ai.js';
import { DraftNotice } from '../../components/DraftNotice.jsx';
import { DraftMark, useGuardedClose } from '../../components/NavigationGuard.jsx';
import { useDraftForm, useUserDrafts, hasDraftFor } from '../../hooks/useDraftForm.js';

const EMPTY_FORM = { name: '', description: '', responsibleUserId: '', priorityId: '', statusId: '', startDate: '', dueDate: '', isMilestone: false };

export default function ProjectActivitiesTab({ project, projectId }) {
  const { t, pushToast, openDialog } = useUi();
  const { user: currentUser } = useAuth();
  const navigate = useNavigate();
  const runAction = useAction();
  const { data: activities, reload } = useAsync(() => listActivitiesByProject(projectId), [projectId]);
  // Boton de IA solo si el superadmin configuro la clave; el backend valida permisos al usarlo.
  const { data: aiStatus } = useAsync(() => getAiStatus().catch(() => ({ enabled: false })), []);
  const [aiPlanOpen, setAiPlanOpen] = useState(false);
  const [trashOpen, setTrashOpen] = useState(false);
  const { data: trashed, reload: reloadTrash } = useAsync(
    () => (trashOpen ? listActivitiesTrash(projectId) : Promise.resolve([])),
    [trashOpen, projectId]
  );
  function restoreFromTrash(activity) {
    runAction(async () => {
      await restoreActivity(activity.id);
      await reloadTrash();
      reload();
      pushToast({ tone: 'success', message: t('common_saved') });
    });
  }
  const { data: priorities } = useAsync(() => listCatalog('priorities'), []);
  const { data: statuses } = useAsync(() => listCatalog('activity-statuses'), []);
  const { data: users } = useAsync(listUsers, []);
  const { data: allProjects } = useAsync(listProjectOptions, []);

  const [search, setSearch] = useState('');
  const [creating, setCreating] = useState(false);
  const [selected, setSelected] = useState(null);
  const [moving, setMoving] = useState(null);
  const [targetProjectId, setTargetProjectId] = useState('');
  const [converting, setConverting] = useState(null);
  const drafts = useUserDrafts();
  const guardedClose = useGuardedClose();

  // "Nueva actividad" con borrador (por proyecto); se reabre al volver si quedo a medio llenar.
  const draft = useDraftForm({ formId: 'activity-new', entityId: projectId, initial: EMPTY_FORM, label: `${project.code} — ${t('activity_new')}`, enabled: creating });
  const form = draft.values;
  const setForm = draft.setValues;
  const pendingNew = hasDraftFor(drafts, 'activity-new', projectId);
  useEffect(() => { if (pendingNew) setCreating(true); }, []); // eslint-disable-line react-hooks/exhaustive-deps

  // "Convertir en proyecto" con borrador (por actividad).
  const convertDraft = useDraftForm({
    formId: 'activity-convert', entityId: converting?.id,
    initial: { projectName: converting?.name || '', taskActivityName: converting?.name || '' },
    label: `${converting?.code || ''} — ${t('activity_convert_title')}`, enabled: !!converting,
  });
  const convertForm = convertDraft.values;
  const setConvertForm = convertDraft.setValues;

  // Actividad abierta y su pestaña viven en la URL (?activity=&activityTab=): F5, el retorno tras
  // el login y el aviso de cambios sin guardar (al cerrar el popup o cambiar de pestaña) usan eso.
  const [searchParams, setSearchParams] = useSearchParams();
  const selectedId = searchParams.get('activity') ? Number(searchParams.get('activity')) : null;
  const activityTab = searchParams.get('activityTab') || 'detail';
  const setActivityParams = (id, tab) => setSearchParams((prev) => {
    const next = new URLSearchParams(prev);
    if (id) {
      next.set('activity', id);
      if (tab && tab !== 'detail') next.set('activityTab', tab); else next.delete('activityTab');
    } else {
      next.delete('activity');
      next.delete('activityTab');
    }
    return next;
  }, { replace: true });
  useEffect(() => {
    if (!selectedId) { setSelected(null); return undefined; }
    let alive = true;
    // Si la actividad ya no existe o no hay acceso, no se abre (ni se restauran sus borradores).
    getActivity(selectedId)
      .then((a) => { if (alive) setSelected(a); })
      .catch(() => { if (alive) setActivityParams(null); });
    return () => { alive = false; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedId]);

  // Busca tambien tareas de esta actividad (no solo actividades, que ya filtra la tabla mas abajo
  // via getSearchHaystack) — resultados con su ruta "Actividad - Tarea" en un panel flotante.
  const debouncedSearch = useDebouncedValue(search, 300);
  const searchQuery = debouncedSearch.trim();
  const { data: searchResults } = useAsync(
    () => (searchQuery.length >= 2 ? searchApi(searchQuery, projectId) : Promise.resolve(null)),
    [searchQuery, projectId]
  );
  const searchItems = searchResults ? [
    ...searchResults.activities.map((a) => ({
      key: `a-${a.id}`,
      breadcrumb: [`${a.code} — ${a.name}`],
      onClick: () => { setSearch(''); openActivity({ id: a.id }); },
    })),
    ...searchResults.tasks.map((tk) => ({
      key: `t-${tk.id}`,
      breadcrumb: [`${tk.activity_code} — ${tk.activity_name}`, tk.name],
      onClick: () => { setSearch(''); openActivity({ id: tk.activity_id }, 'tasks'); },
    })),
  ] : null;

  // Al volver con un borrador de "Convertir en proyecto", se reabre sobre su actividad.
  useEffect(() => {
    if (!activities || converting) return;
    const pending = drafts.find((d) => d.formId === 'activity-convert');
    const row = pending && activities.find((a) => String(a.id) === String(pending.entityId));
    if (row) setConverting(row);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activities]);

  const priorityOptions = (priorities || []).map((p) => ({ value: p.id, label: p.name }));
  const statusOptions = (statuses || []).map((s) => ({ value: s.id, label: s.name }));
  const userOptions = (users || []).map((u) => ({ value: u.id, label: u.name }));
  const projectOptions = (allProjects || [])
    .filter((p) => p.id !== Number(projectId))
    .map((p) => ({ value: p.id, label: `${p.code} — ${p.name}` }));

  async function save() {
    if (!form.name.trim() || !form.priorityId || !form.statusId) return;
    await runAction(async () => {
      await createActivity(projectId, { ...form, responsibleUserId: form.responsibleUserId || null });
      draft.clear();
      setCreating(false);
      pushToast({ tone: 'success', message: t('common_saved') });
      await reload();
    });
  }

  function openActivity(row, initialTab) {
    setActivityParams(row.id, initialTab);
  }

  async function refreshAll() {
    await reload();
    if (selected) setSelected(await getActivity(selected.id));
  }

  async function handleReorder(ids) {
    await reorderActivities(projectId, ids);
    await reload();
  }

  function startMove(row) {
    setMoving(row);
    setTargetProjectId('');
  }

  function confirmMove() {
    const target = (allProjects || []).find((p) => p.id === Number(targetProjectId));
    if (!target) return;
    const message = t('activity_move_confirm_msg').replace('{activity}', moving.name).replace('{project}', target.name);
    openDialog({
      tone: 'warning',
      title: t('activity_move_title'),
      message,
      actions: [
        { label: t('common_cancel'), variant: 'standard' },
        {
          label: t('common_accept'), variant: 'accent',
          onClick: () => runAction(async () => {
            await moveActivity(moving.id, Number(targetProjectId));
            setMoving(null);
            await reload();
            pushToast({ tone: 'success', message: t('common_saved') });
          }),
        },
      ],
    });
  }

  function startConvert(row) {
    setConverting(row);
  }

  function confirmConvert() {
    const { projectName, taskActivityName } = convertForm;
    if (!projectName.trim() || !taskActivityName.trim()) return;
    const message = t('activity_convert_confirm_msg')
      .replace('{activity}', converting.name)
      .replace('{project}', projectName.trim())
      .replace('{newActivity}', taskActivityName.trim());
    openDialog({
      tone: 'warning',
      title: t('activity_convert_title'),
      message,
      actions: [
        { label: t('common_cancel'), variant: 'standard' },
        {
          label: t('common_accept'), variant: 'accent',
          onClick: () => runAction(async () => {
            const result = await convertActivityToProject(converting.id, projectName.trim(), taskActivityName.trim());
            convertDraft.clear();
            setConverting(null);
            pushToast({ tone: 'success', message: t('common_saved') });
            navigate(`/proyectos/${result.project.id}`);
          }),
        },
      ],
    });
  }

  function confirmDelete(row) {
    openDialog({
      tone: 'warning',
      title: t('common_confirm_delete_title'),
      message: t('common_confirm_delete_msg'),
      actions: [
        { label: t('common_cancel'), variant: 'standard' },
        {
          label: t('common_delete'), variant: 'danger',
          onClick: () => runAction(async () => {
            await deleteActivity(row.id);
            await reload();
            pushToast({ tone: 'success', message: t('common_saved') });
          }),
        },
      ],
    });
  }

  const columns = [
    { key: 'code', label: t('activity_code') },
    { key: 'name', label: t('common_name') },
    { key: 'responsible_name', label: t('common_responsible'), render: (r) => r.responsible_name || '—' },
    { key: 'status_name', label: t('common_status'), render: (r) => <StatusBadge name={r.status_name} color={r.status_color} /> },
    { key: 'priority_name', label: t('common_priority'), render: (r) => <StatusBadge name={r.priority_name} color={r.priority_color} /> },
    { key: 'due_date', label: t('activity_due_date'), render: (r) => (
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span>{r.due_date || '—'}</span>
        <DueBadge status={dueStatus(r.due_date, r.status_is_closed)} />
      </div>
    ) },
    { key: 'progress_pct', label: t('activity_progress'), render: (r) => <div style={{ width: 100 }}><ProgressBar value={Number(r.progress_pct)} /></div> },
    { key: 'updated_at', label: t('activity_updated_at'), render: (r) => <span style={{ whiteSpace: 'nowrap' }}>{String(r.updated_at).slice(0, 16)}</span> },
  ];

  if (!activities) return <div className="text-muted">{t('common_loading')}</div>;

  return (
    <div>
      <div className="toolbar">
        <div style={{ position: 'relative' }}>
          <SearchInput value={search} onChange={setSearch} />
          {searchQuery.length >= 2 && searchItems && (
            <SearchResultsDropdown items={searchItems} emptyLabel={t('common_search_no_results')} />
          )}
        </div>
        {project?.isOwner && (
          <Button variant="standard" icon={Archive} onClick={() => setTrashOpen(true)}>{t('activities_trash')}</Button>
        )}
        {aiStatus?.enabled && (
          <Button variant="standard" icon={Sparkles} onClick={() => setAiPlanOpen(true)}>{t('ai_plan_button')}</Button>
        )}
        <Button variant="accent" icon={Plus} onClick={() => setCreating(true)}>{t('activity_new')}{pendingNew && !creating && <DraftMark />}</Button>
      </div>

      <AiPlanDialog open={aiPlanOpen} projectId={projectId} onClose={() => setAiPlanOpen(false)} onCreated={reload} />

      <DetailPopup open={trashOpen} title={t('activities_trash')} onClose={() => setTrashOpen(false)} width={480} height={420}>
        {(trashed || []).length === 0 && <div className="text-muted" style={{ fontSize: '.82rem' }}>{t('activities_trash_empty')}</div>}
        {(trashed || []).map((a) => (
          <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', borderBottom: '1px solid rgb(var(--line))' }}>
            <span style={{ flex: 1, fontSize: '.82rem' }}>{a.code} — {a.name}</span>
            <Button variant="standard" icon={RotateCcw} onClick={() => restoreFromTrash(a)}>{t('common_restore')}</Button>
          </div>
        ))}
      </DetailPopup>

      <ListView
        columns={columns}
        rows={activities}
        searchValue={search}
        getSearchHaystack={(a) => `${a.code} ${a.name} ${a.responsible_name || ''}`}
        getRowKey={(a) => a.id}
        onRowClick={openActivity}
        onReorder={currentUser?.roleCode !== 'viewer' ? handleReorder : undefined}
        rowActions={currentUser?.roleCode !== 'viewer' ? (a) => [
          { label: t('activity_move'), icon: ArrowRightLeft, onClick: () => startMove(a) },
          { label: t('activity_convert'), icon: FolderUp, onClick: () => startConvert(a) },
          { label: t('common_delete'), icon: Trash2, danger: true, onClick: () => confirmDelete(a) },
        ] : undefined}
      />

      <DetailPopup open={!!moving} title={t('activity_move_title')} onClose={() => setMoving(null)} width={480} height={260}>
        {moving && (
          <>
            <Field label={t('activity_move_target')}>
              <ComboBox options={projectOptions} value={targetProjectId} onChange={setTargetProjectId} />
            </Field>
            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
              <Button variant="accent" icon={ArrowRightLeft} onClick={confirmMove} disabled={!targetProjectId}>{t('activity_move')}</Button>
              <Button variant="standard" onClick={() => setMoving(null)}>{t('common_cancel')}</Button>
            </div>
          </>
        )}
      </DetailPopup>

      <DetailPopup open={!!converting} title={t('activity_convert_title')} onClose={() => guardedClose(convertDraft, () => setConverting(null))} width={520} height={400}>
        {converting && (
          <>
            <DraftNotice draft={convertDraft} />
            <div className="text-muted" style={{ fontSize: '.78rem', marginBottom: 12 }}>{t('activity_convert_hint')}</div>
            <Field label={t('activity_convert_project_name')} dirty={convertDraft.isFieldDirty('projectName')}>
              <input
                className="input" value={convertForm.projectName} autoFocus
                onChange={(e) => setConvertForm((f) => ({ ...f, projectName: e.target.value }))}
              />
            </Field>
            <Field label={t('activity_convert_activity_name')} dirty={convertDraft.isFieldDirty('taskActivityName')}>
              <input
                className="input" value={convertForm.taskActivityName}
                onChange={(e) => setConvertForm((f) => ({ ...f, taskActivityName: e.target.value }))}
              />
            </Field>
            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
              <Button
                variant="accent" icon={FolderUp} onClick={confirmConvert}
                disabled={!convertForm.projectName.trim() || !convertForm.taskActivityName.trim()}
              >
                {t('activity_convert')}
              </Button>
              <Button variant="standard" onClick={() => { convertDraft.discard(); setConverting(null); }}>{t('common_cancel')}</Button>
            </div>
          </>
        )}
      </DetailPopup>

      <DetailPopup open={creating} title={t('activity_new')} onClose={() => guardedClose(draft, () => setCreating(false))} width={640} height={600}>
        <DraftNotice draft={draft} />
        <Field label={t('common_name')} dirty={draft.isFieldDirty('name')}>
          <input className="input" value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} autoFocus />
        </Field>
        <Field label={t('common_description')} dirty={draft.isFieldDirty('description')}>
          <textarea className="textarea" value={form.description} onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))} />
        </Field>
        <FieldRow>
          <Field label={t('common_responsible')} dirty={draft.isFieldDirty('responsibleUserId')}>
            <ComboBox options={[{ value: '', label: '—' }, ...userOptions]} value={form.responsibleUserId} onChange={(v) => setForm((f) => ({ ...f, responsibleUserId: v }))} />
          </Field>
          <Field label={t('common_priority')} dirty={draft.isFieldDirty('priorityId')}>
            <ComboBox options={priorityOptions} value={form.priorityId} onChange={(v) => setForm((f) => ({ ...f, priorityId: v }))} />
          </Field>
          <Field label={t('common_status')} dirty={draft.isFieldDirty('statusId')}>
            <ComboBox options={statusOptions} value={form.statusId} onChange={(v) => setForm((f) => ({ ...f, statusId: v }))} />
          </Field>
        </FieldRow>
        <FieldRow>
          <Field label={t('activity_start_date')} dirty={draft.isFieldDirty('startDate')}>
            <input className="input" type="date" value={form.startDate} onChange={(e) => setForm((f) => ({ ...f, startDate: e.target.value }))} />
          </Field>
          <Field label={t('activity_due_date')} dirty={draft.isFieldDirty('dueDate')}>
            <input className="input" type="date" value={form.dueDate} onChange={(e) => setForm((f) => ({ ...f, dueDate: e.target.value }))} />
          </Field>
          <Field label={t('activity_milestone')} dirty={draft.isFieldDirty('isMilestone')}>
            <label className="checkbox-row">
              <input type="checkbox" checked={form.isMilestone} onChange={(e) => setForm((f) => ({ ...f, isMilestone: e.target.checked }))} />
              {t('activity_milestone')}
            </label>
          </Field>
        </FieldRow>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button variant="accent" icon={Save} onClick={save}>{t('common_save')}</Button>
          <Button variant="standard" onClick={() => { draft.discard(); setCreating(false); }}>{t('common_cancel')}</Button>
        </div>
      </DetailPopup>

      <DetailPopup open={!!selected} title={selected ? `${selected.code} — ${selected.name}` : ''} onClose={() => setActivityParams(null)} width={720} height={680}>
        {selected && (
          <ActivityDetailPanel
            key={selected.id}
            activity={selected}
            projectId={projectId}
            siblingActivities={activities}
            onChanged={refreshAll}
            tab={activityTab}
            onTabChange={(key) => setActivityParams(selected.id, key)}
          />
        )}
      </DetailPopup>
    </div>
  );
}