import { SearchableSelect } from '../components/SearchableSelect';
import { useEffect, useMemo, useState } from 'react';
import type { FormEvent } from 'react';
import { Link, useNavigate, useParams } from 'react-router';
import { useAuth } from '../auth/AuthContext';
import { Alert, EmptyState, LoadingBlock, errorMessage } from '../components/Feedback';
import { Icon } from '../components/Icon';
import {
  SURVEY_TARGET_STATUSES,
  surveyCampaignStatusLabel,
  surveyStatusClass,
  surveyTargetStatusLabel,
} from '../features/surveys/surveyPresentation';
import {
  addSurveyTarget,
  assignSurveyTarget,
  createSurveyCampaign,
  getSurveyCampaign,
  listAssets,
  listSurveyAssignees,
  updateSurveyCampaign,
  updateSurveyCampaignStatus,
  updateSurveyTarget,
  updateSurveyTargetStatus,
} from '../lib/api';
import type {
  AssetListItem,
  SurveyCampaign,
  SurveyCampaignStatus,
  SurveyPerson,
  SurveyTarget,
  SurveyTargetStatus,
} from '../lib/api';
import { formatDate } from '../lib/format';

interface CampaignForm {
  code: string;
  name: string;
  description: string;
  plannedStartAt: string;
  plannedEndAt: string;
  scopeAssetId: string;
  coordinatorUserId: string;
}

interface TargetDraft { dueAt: string; instructions: string }

const emptyCampaign: CampaignForm = {
  code: '', name: '', description: '', plannedStartAt: '', plannedEndAt: '',
  scopeAssetId: '', coordinatorUserId: '',
};

function localDateTime(value: string | null): string {
  if (!value) return '';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '';
  const local = new Date(date.getTime() - date.getTimezoneOffset() * 60_000);
  return local.toISOString().slice(0, 16);
}

function isoOrNull(value: string): string | null {
  return value ? new Date(value).toISOString() : null;
}

function targetDrafts(targets: SurveyTarget[]): Record<string, TargetDraft> {
  return Object.fromEntries(targets.map((target) => [target.id, {
    dueAt: localDateTime(target.dueAt),
    instructions: target.instructions ?? '',
  }]));
}

function personName(person: SurveyPerson): string {
  return `${person.firstName} ${person.lastName}`;
}

export function SurveyCampaignEditorPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const { user, hasPermission } = useAuth();
  const isNew = !id;
  const canManage = hasPermission('surveys.manage');
  const canAssign = hasPermission('surveys.assign');
  const canExecute = hasPermission('surveys.execute');
  const canReadReports = hasPermission('surveys.read_reports');
  const [campaign, setCampaign] = useState<SurveyCampaign | null>(null);
  const [form, setForm] = useState<CampaignForm>(emptyCampaign);
  const [assets, setAssets] = useState<AssetListItem[]>([]);
  const [assignees, setAssignees] = useState<SurveyPerson[]>([]);
  const [assetSearch, setAssetSearch] = useState('');
  const [targetAssetId, setTargetAssetId] = useState('');
  const [targetAssigneeId, setTargetAssigneeId] = useState('');
  const [targetDueAt, setTargetDueAt] = useState('');
  const [targetInstructions, setTargetInstructions] = useState('');
  const [drafts, setDrafts] = useState<Record<string, TargetDraft>>({});
  const [loading, setLoading] = useState(!isNew);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  const applyCampaign = (value: SurveyCampaign, syncForm = true) => {
    setCampaign(value);
    setDrafts(targetDrafts(value.targets));
    if (syncForm) setForm({
      code: value.code,
      name: value.name,
      description: value.description ?? '',
      plannedStartAt: localDateTime(value.plannedStartAt),
      plannedEndAt: localDateTime(value.plannedEndAt),
      scopeAssetId: value.scopeAsset?.id ?? '',
      coordinatorUserId: value.coordinator?.id ?? '',
    });
  };

  useEffect(() => {
    if (!id) return;
    setLoading(true);
    getSurveyCampaign(id)
      .then((value) => applyCampaign(value))
      .catch((requestError) => setError(errorMessage(requestError)))
      .finally(() => setLoading(false));
  }, [id]);

  useEffect(() => {
    const timer = window.setTimeout(() => {
      listAssets({ pageSize: 100, search: assetSearch.trim() })
        .then((response) => setAssets(response.data))
        .catch(() => undefined);
    }, 220);
    return () => window.clearTimeout(timer);
  }, [assetSearch]);

  useEffect(() => {
    if (!canAssign) return;
    listSurveyAssignees().then(setAssignees).catch(() => undefined);
  }, [canAssign]);

  const closed = campaign?.status === 'COMPLETED' || campaign?.status === 'CANCELLED';
  const targetIds = useMemo(() => new Set(campaign?.targets.map((target) => target.asset.id) ?? []), [campaign]);
  const candidateAssets = assets.filter((asset) => !targetIds.has(asset.id));

  const saveCampaign = async (event: FormEvent) => {
    event.preventDefault();
    setBusy(true); setError(''); setSuccess('');
    const input = {
      code: form.code,
      name: form.name,
      description: form.description || null,
      plannedStartAt: isoOrNull(form.plannedStartAt),
      plannedEndAt: isoOrNull(form.plannedEndAt),
      scopeAssetId: form.scopeAssetId || null,
      coordinatorUserId: form.coordinatorUserId || null,
    };
    try {
      if (isNew) {
        const created = await createSurveyCampaign(input);
        navigate(`/relevamiento/${created.id}`, { replace: true });
      } else if (id) {
        applyCampaign(await updateSurveyCampaign(id, input));
        setSuccess('Planificación actualizada.');
      }
    } catch (requestError) {
      setError(errorMessage(requestError));
    } finally {
      setBusy(false);
    }
  };

  const changeCampaignStatus = async (status: SurveyCampaignStatus) => {
    if (!id) return;
    setBusy(true); setError(''); setSuccess('');
    try {
      applyCampaign(await updateSurveyCampaignStatus(id, status));
      setSuccess(`Campaña ${surveyCampaignStatusLabel(status).toLocaleLowerCase('es-AR')}.`);
    } catch (requestError) {
      setError(errorMessage(requestError));
    } finally {
      setBusy(false);
    }
  };

  const addTarget = async (event: FormEvent) => {
    event.preventDefault();
    if (!id || !targetAssetId) return;
    setBusy(true); setError(''); setSuccess('');
    try {
      applyCampaign(await addSurveyTarget(id, {
        assetId: targetAssetId,
        assignedUserId: targetAssigneeId || null,
        dueAt: isoOrNull(targetDueAt),
        instructions: targetInstructions || null,
      }), false);
      setTargetAssetId(''); setTargetAssigneeId(''); setTargetDueAt(''); setTargetInstructions('');
      setSuccess('Registro agregado a la campaña.');
    } catch (requestError) {
      setError(errorMessage(requestError));
    } finally {
      setBusy(false);
    }
  };

  const saveTargetPlan = async (target: SurveyTarget) => {
    const draft = drafts[target.id];
    if (!draft) return;
    setBusy(true); setError(''); setSuccess('');
    try {
      applyCampaign(await updateSurveyTarget(target.id, {
        dueAt: isoOrNull(draft.dueAt),
        instructions: draft.instructions || null,
      }), false);
      setSuccess(`Plan de ${target.asset.code} actualizado.`);
    } catch (requestError) {
      setError(errorMessage(requestError));
    } finally {
      setBusy(false);
    }
  };

  const assignTarget = async (target: SurveyTarget, assignedUserId: string) => {
    setBusy(true); setError(''); setSuccess('');
    try {
      applyCampaign(await assignSurveyTarget(target.id, assignedUserId || null), false);
      setSuccess(`Responsable de ${target.asset.code} actualizado.`);
    } catch (requestError) {
      setError(errorMessage(requestError));
    } finally {
      setBusy(false);
    }
  };

  const changeTargetStatus = async (target: SurveyTarget, status: SurveyTargetStatus) => {
    setBusy(true); setError(''); setSuccess('');
    try {
      applyCampaign(await updateSurveyTargetStatus(target.id, status), false);
      setSuccess(`Avance de ${target.asset.code} actualizado.`);
    } catch (requestError) {
      setError(errorMessage(requestError));
    } finally {
      setBusy(false);
    }
  };

  const campaignActions = campaign?.status === 'DRAFT'
    ? [{ status: 'PLANNED' as const, label: 'Confirmar planificación' }, { status: 'CANCELLED' as const, label: 'Cancelar' }]
    : campaign?.status === 'PLANNED'
      ? [{ status: 'IN_PROGRESS' as const, label: 'Iniciar campaña' }, { status: 'DRAFT' as const, label: 'Volver a borrador' }, { status: 'CANCELLED' as const, label: 'Cancelar' }]
      : campaign?.status === 'IN_PROGRESS'
        ? [{ status: 'COMPLETED' as const, label: 'Completar campaña' }, { status: 'CANCELLED' as const, label: 'Cancelar' }]
        : [];

  if (loading) return <LoadingBlock label="Cargando campaña…" />;

  return <section className="survey-editor">
    <div className="breadcrumb"><Link to="/relevamiento">Relevamientos</Link><span>/</span><span>{isNew ? 'Nueva campaña' : campaign?.code ?? 'Detalle'}</span></div>
    <div className="page-heading survey-editor-heading">
      <div><span className="eyebrow">PLANIFICACIÓN DE CAMPO</span><h1>{isNew ? 'Nueva campaña' : campaign?.name ?? 'Campaña'}</h1><p>{isNew ? 'Definí alcance, fechas y coordinación inicial.' : `${campaign?.code} · ${campaign?.targetCount ?? 0} objetivos`}</p></div>
      {campaign && <span className={`status-badge large ${surveyStatusClass(campaign.status)}`}>{surveyCampaignStatusLabel(campaign.status)}</span>}
    </div>
    {error && <Alert>{error}</Alert>}
    {success && <Alert type="success">{success}</Alert>}

    <form className="panel form-panel" onSubmit={saveCampaign}>
      <div className="panel-heading"><div><span className="eyebrow">DATOS GENERALES</span><h2>Plan de relevamiento</h2></div>{campaign && <small className="muted">Actualizado {formatDate(campaign.updatedAt)}</small>}</div>
      <div className="form-grid">
        <label className="field"><span>Código</span><input value={form.code} onChange={(event) => setForm((current) => ({ ...current, code: event.target.value.toUpperCase() }))} required maxLength={80} disabled={!canManage || closed} /></label>
        <label className="field"><span>Nombre</span><input value={form.name} onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))} required maxLength={200} disabled={!canManage || closed} /></label>
        <label className="field"><span>Inicio previsto</span><input type="datetime-local" value={form.plannedStartAt} onChange={(event) => setForm((current) => ({ ...current, plannedStartAt: event.target.value }))} disabled={!canManage || closed} /></label>
        <label className="field"><span>Fin previsto</span><input type="datetime-local" value={form.plannedEndAt} onChange={(event) => setForm((current) => ({ ...current, plannedEndAt: event.target.value }))} disabled={!canManage || closed} /></label>
        <label className="field"><span>Alcance jerárquico</span><SearchableSelect value={form.scopeAssetId} onChange={(event) => setForm((current) => ({ ...current, scopeAssetId: event.target.value }))} disabled={!canManage || closed}><option value="">Todos los inventarios</option>{campaign?.scopeAsset && !assets.some((asset) => asset.id === campaign.scopeAsset?.id) && <option value={campaign.scopeAsset.id}>{campaign.scopeAsset.code} · {campaign.scopeAsset.name}</option>}{assets.map((asset) => <option key={asset.id} value={asset.id}>{asset.code} · {asset.name}</option>)}</SearchableSelect><small>El alcance puede ser cualquier registro raíz o rama configurada.</small></label>
        <label className="field"><span>Coordinación</span><SearchableSelect value={form.coordinatorUserId} onChange={(event) => setForm((current) => ({ ...current, coordinatorUserId: event.target.value }))} disabled={!canManage || closed}><option value="">Sin asignar</option>{campaign?.coordinator && !assignees.some((person) => person.id === campaign.coordinator?.id) && <option value={campaign.coordinator.id}>{personName(campaign.coordinator)}</option>}{assignees.map((person) => <option key={person.id} value={person.id}>{personName(person)} · {person.username}</option>)}</SearchableSelect></label>
      </div>
      <label className="field"><span>Descripción</span><textarea value={form.description} onChange={(event) => setForm((current) => ({ ...current, description: event.target.value }))} maxLength={4000} disabled={!canManage || closed} /></label>
      {canManage && !closed && <div className="form-actions"><Link className="button secondary" to="/relevamiento">Cancelar</Link><button className="button primary" disabled={busy}><Icon name="check" />{isNew ? 'Crear campaña' : 'Guardar planificación'}</button></div>}
    </form>

    {campaign && canManage && campaignActions.length > 0 && <div className="survey-status-actions panel"><div><strong>Flujo de campaña</strong><p>Los cambios de estado quedan registrados en auditoría.</p></div><div>{campaignActions.map((action) => <button key={action.status} type="button" className={`button ${action.status === 'CANCELLED' ? 'danger-outline' : 'secondary'}`} disabled={busy} onClick={() => changeCampaignStatus(action.status)}>{action.label}</button>)}</div></div>}

    {campaign && canManage && !closed && <form className="panel survey-add-target" onSubmit={addTarget}>
      <div className="panel-heading"><div><span className="eyebrow">OBJETIVOS</span><h2>Agregar registro existente</h2><p className="section-copy">El objetivo referencia al inventario; no copia sus datos.</p></div></div>
      <label className="field"><span>Buscar registro</span><input value={assetSearch} onChange={(event) => setAssetSearch(event.target.value)} placeholder="Código o nombre" /></label>
      <div className="form-grid">
        <label className="field"><span>Registro</span><SearchableSelect value={targetAssetId} onChange={(event) => setTargetAssetId(event.target.value)} required><option value="">Seleccionar…</option>{candidateAssets.map((asset) => <option key={asset.id} value={asset.id}>{asset.code} · {asset.name} · {asset.type.name}</option>)}</SearchableSelect></label>
        {canAssign && <label className="field"><span>Responsable</span><SearchableSelect value={targetAssigneeId} onChange={(event) => setTargetAssigneeId(event.target.value)}><option value="">Sin asignar</option>{assignees.map((person) => <option key={person.id} value={person.id}>{personName(person)}</option>)}</SearchableSelect></label>}
        <label className="field"><span>Vencimiento</span><input type="datetime-local" value={targetDueAt} onChange={(event) => setTargetDueAt(event.target.value)} /></label>
        <label className="field"><span>Instrucciones</span><input value={targetInstructions} onChange={(event) => setTargetInstructions(event.target.value)} maxLength={4000} placeholder="Trabajo previsto" /></label>
      </div>
      <div className="form-actions"><button className="button primary" disabled={busy || !targetAssetId}><Icon name="plus" />Agregar objetivo</button></div>
    </form>}

    {campaign && <div className="table-panel survey-targets"><div className="table-summary"><strong>{campaign.targetCount} objetivo{campaign.targetCount === 1 ? '' : 's'}</strong><span>{campaign.completedCount} completados · {campaign.submittedCount} en revisión · {campaign.inProgressCount} en ejecución · {campaign.pendingCount} pendientes · {campaign.skippedCount} omitidos</span></div>{campaign.targets.length === 0 ? <EmptyState title="Sin objetivos" text="Agregá registros del inventario para completar la planificación." /> : <div className="table-scroll"><table><thead><tr><th>Registro</th><th>Estado</th><th>Responsable</th><th>Vencimiento</th><th>Instrucciones</th><th /></tr></thead><tbody>{campaign.targets.map((target) => {
      const canAct = canExecute && (canManage || target.assignedUser?.id === user?.id);
      const planLocked = target.status === 'SUBMITTED' || target.status === 'COMPLETED';
      const availableStatuses = campaign.status === 'IN_PROGRESS'
          ? target.status === 'PENDING'
            ? ['IN_PROGRESS', 'SKIPPED'] as SurveyTargetStatus[]
          : target.status === 'IN_PROGRESS'
            ? ['PENDING', 'SKIPPED'] as SurveyTargetStatus[]
            : []
        : canManage && (campaign.status === 'DRAFT' || campaign.status === 'PLANNED')
          ? target.status === 'PENDING'
            ? ['SKIPPED'] as SurveyTargetStatus[]
            : target.status === 'SKIPPED'
              ? ['PENDING'] as SurveyTargetStatus[]
              : []
          : [];
      const draft = drafts[target.id] ?? { dueAt: '', instructions: '' };
      return <tr key={target.id}><td><Link className="history-asset-link" to={`/inventarios/${target.asset.id}`}><strong>{target.asset.name}</strong><small>{target.asset.code} · {target.asset.typeName}</small></Link></td><td><span className={`status-badge ${surveyStatusClass(target.status)}`}>{surveyTargetStatusLabel(target.status)}</span>{canAct && availableStatuses.length > 0 && <SearchableSelect className="survey-inline-select" value="" disabled={busy} onChange={(event) => event.target.value && changeTargetStatus(target, event.target.value as SurveyTargetStatus)}><option value="">Cambiar…</option>{availableStatuses.map((status) => <option key={status} value={status}>{SURVEY_TARGET_STATUSES.find((item) => item.value === status)?.label}</option>)}</SearchableSelect>}</td><td>{canAssign && !closed && !planLocked ? <SearchableSelect className="survey-inline-select wide" value={target.assignedUser?.id ?? ''} disabled={busy} onChange={(event) => assignTarget(target, event.target.value)}><option value="">Sin asignar</option>{assignees.map((person) => <option key={person.id} value={person.id}>{personName(person)}</option>)}</SearchableSelect> : target.assignedUser ? personName(target.assignedUser) : 'Sin asignar'}</td><td>{canManage && !closed && !planLocked ? <input className="survey-inline-input" type="datetime-local" value={draft.dueAt} onChange={(event) => setDrafts((current) => ({ ...current, [target.id]: { ...draft, dueAt: event.target.value } }))} /> : formatDate(target.dueAt)}</td><td>{canManage && !closed && !planLocked ? <input className="survey-inline-input instructions" value={draft.instructions} onChange={(event) => setDrafts((current) => ({ ...current, [target.id]: { ...draft, instructions: event.target.value } }))} maxLength={4000} placeholder="Sin instrucciones" /> : target.instructions ?? '—'}</td><td><div className="survey-row-actions">{canManage && !closed && !planLocked && <button type="button" className="icon-button" title="Guardar planificación del objetivo" disabled={busy} onClick={() => saveTargetPlan(target)}><Icon name="check" /></button>}{canReadReports && <Link className="icon-button" title="Abrir informe de campo" to={`/relevamiento/objetivos/${target.id}`}><Icon name="clipboard" /></Link>}</div></td></tr>;
    })}</tbody></table></div>}</div>}
  </section>;
}