'use client';

import { useMemo, useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { apiFetch } from '../../../lib/api';
import { useSession } from '../../../components/session-provider';

interface Goal { id: string; title: string; description: string | null; status: string; progress: number | null; tags: string[]; targetDate: string | null; createdAt: string; }
interface Task { id: string; title: string; status: string; tags: string[]; createdAt: string; }

const PROJECT_TAGS = ['proiect','project','initiative','program'];
const STATUS_COLORS: Record<string, string> = {
  active:'text-signal-ok', completed:'text-ink-faint', cancelled:'text-signal-danger', paused:'text-warn', archived:'text-ink-faint',
};

export default function ProjectsPage() {
  const { activeTenant } = useSession();
  const tenantId = activeTenant?.tenantId ?? '';
  const qc = useQueryClient();
  const [showAdd, setShowAdd] = useState(false);
  const [expanded, setExpanded] = useState<string | null>(null);
  const [form, setForm] = useState({ title: '', description: '', targetDate: '' });

  const { data: goals = [], isLoading: loadG } = useQuery({
    queryKey: ['projects-goals', tenantId],
    queryFn: () => apiFetch<Goal[]>('/v1/goals?limit=200', { tenantId }),
    enabled: Boolean(tenantId), staleTime: 60_000,
  });

  const { data: tasks = [], isLoading: loadT } = useQuery({
    queryKey: ['projects-tasks', tenantId],
    queryFn: () => apiFetch<Task[]>('/v1/tasks?limit=500', { tenantId }),
    enabled: Boolean(tenantId), staleTime: 60_000,
  });

  const projects = useMemo(() =>
    goals.filter((g) => g.tags.some((t) => PROJECT_TAGS.includes(t.toLowerCase()))),
  [goals]);

  function projectTasks(projectId: string): Task[] {
    return tasks.filter((t) => t.tags.includes(`project-${projectId}`) || t.tags.includes(`goal-${projectId}`));
  }

  function computeProgress(p: Goal): number {
    if (p.progress !== null) return p.progress;
    const pts = projectTasks(p.id);
    if (pts.length === 0) return 0;
    return Math.round((pts.filter((t) => t.status === 'completed').length / pts.length) * 100);
  }

  const patchMut = useMutation({
    mutationFn: ({ id, status }: { id: string; status: string }) =>
      apiFetch(`/v1/goals/${id}`, { tenantId, method: 'PATCH', body: { status } }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['projects-goals', tenantId] }),
  });

  const addMut = useMutation({
    mutationFn: () => apiFetch('/v1/goals', { tenantId, method: 'POST', body: {
      title: form.title,
      description: form.description || undefined,
      tags: ['proiect', 'project'],
      status: 'active',
      progress: 0,
      targetDate: form.targetDate || undefined,
    }}),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['projects-goals', tenantId] });
      setShowAdd(false);
      setForm({ title: '', description: '', targetDate: '' });
    },
  });

  const byStatus = useMemo(() => {
    const map: Record<string, Goal[]> = {};
    for (const p of projects) {
      const s = p.status ?? 'active';
      map[s] = [...(map[s] ?? []), p];
    }
    return map;
  }, [projects]);

  return (
    <div className="max-w-4xl space-y-6 p-6">
      <div className="flex items-start justify-between flex-wrap gap-3">
        <div>
          <h1 className="font-display text-2xl font-semibold text-ink">Project Tracker</h1>
          <p className="text-sm text-ink-faint mt-1">
            {projects.filter((p) => p.status === 'active').length} active · {projects.filter((p) => p.status === 'completed').length} finalizate
          </p>
        </div>
        <button onClick={() => setShowAdd(true)}
          className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90">
          + Proiect
        </button>
      </div>

      {showAdd && (
        <div className="card p-5 space-y-3">
          <p className="text-sm font-semibold text-ink">Proiect nou</p>
          <input placeholder="Nume proiect*" value={form.title}
            onChange={(e) => setForm((p) => ({ ...p, title: e.target.value }))}
            className="w-full rounded-lg border bg-background px-3 py-2 text-sm text-ink focus:outline-none focus:ring-2 focus:ring-ring" />
          <textarea placeholder="Descriere / scop (opțional)" value={form.description}
            onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
            rows={2} className="w-full rounded-lg border bg-background px-3 py-2 text-sm text-ink resize-none focus:outline-none focus:ring-2 focus:ring-ring" />
          <input type="date" value={form.targetDate}
            onChange={(e) => setForm((p) => ({ ...p, targetDate: e.target.value }))}
            className="w-48 rounded-lg border bg-background px-3 py-2 text-sm text-ink focus:outline-none focus:ring-2 focus:ring-ring" />
          <div className="flex gap-2">
            <button onClick={() => addMut.mutate()} disabled={!form.title || addMut.isPending}
              className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white disabled:opacity-50">
              {addMut.isPending ? '…' : 'Creează proiect'}
            </button>
            <button onClick={() => setShowAdd(false)} className="rounded-lg border px-4 py-2 text-sm text-ink">Anulează</button>
          </div>
          <p className="text-[10px] text-ink-faint">
            Proiectele sunt goals cu tag „proiect". Asociază tasks la proiect adăugând tag-ul <code>project-{'{id}'}</code>.
          </p>
        </div>
      )}

      {loadG || loadT ? (
        <div className="text-center text-sm text-ink-faint py-8">Se încarcă…</div>
      ) : projects.length === 0 ? (
        <div className="card p-8 text-center space-y-2">
          <p className="text-3xl">🗂️</p>
          <p className="text-sm text-ink-faint">Niciun proiect. Adaugă sau marchează goals existente cu tag „proiect".</p>
        </div>
      ) : (
        <div className="space-y-3">
          {['active', 'paused', 'completed', 'cancelled'].map((statusGroup) => {
            const groupProjects = byStatus[statusGroup] ?? [];
            if (groupProjects.length === 0) return null;
            return (
              <div key={statusGroup}>
                <p className="text-xs font-semibold text-ink-faint uppercase tracking-wide mb-2 capitalize">{statusGroup} ({groupProjects.length})</p>
                <div className="space-y-2">
                  {groupProjects.map((p) => {
                    const pts    = projectTasks(p.id);
                    const prog   = computeProgress(p);
                    const done   = pts.filter((t) => t.status === 'completed').length;
                    const isOpen = expanded === p.id;
                    return (
                      <div key={p.id} className="card overflow-hidden">
                        <button className="w-full flex items-center gap-3 p-4 text-left"
                          onClick={() => setExpanded(isOpen ? null : p.id)}>
                          <span className="text-lg shrink-0">🗂️</span>
                          <div className="flex-1 min-w-0">
                            <p className="text-sm font-semibold text-ink truncate">{p.title}</p>
                            {p.description && <p className="text-xs text-ink-faint truncate">{p.description}</p>}
                          </div>
                          <div className="text-right shrink-0 space-y-0.5">
                            <p className={`text-xs font-medium capitalize ${STATUS_COLORS[p.status] ?? 'text-ink-faint'}`}>{p.status}</p>
                            <p className="text-xs text-ink-faint">{prog}% · {done}/{pts.length} tasks</p>
                          </div>
                          <span className="text-ink-faint ml-1">{isOpen ? '▲' : '▼'}</span>
                        </button>
                        <div className="mx-4 mb-1 h-1.5 rounded-full bg-muted overflow-hidden">
                          <div className={`h-full rounded-full ${prog >= 100 ? 'bg-signal-ok' : prog > 0 ? 'bg-primary' : 'bg-muted'}`}
                            style={{ width: `${prog}%` }} />
                        </div>
                        {isOpen && (
                          <div className="border-t border-border/50 p-4 space-y-3">
                            {p.targetDate && (
                              <p className="text-xs text-ink-faint">🎯 Deadline: {new Date(p.targetDate).toLocaleDateString('ro-RO')}</p>
                            )}
                            {pts.length > 0 ? (
                              <div className="space-y-1.5">
                                {pts.slice(0, 8).map((t) => (
                                  <div key={t.id} className="flex items-center gap-2">
                                    <span className={`text-xs ${t.status === 'completed' ? 'text-signal-ok' : 'text-ink-faint'}`}>
                                      {t.status === 'completed' ? '✓' : '○'}
                                    </span>
                                    <span className={`text-xs ${t.status === 'completed' ? 'line-through text-ink-faint' : 'text-ink'}`}>{t.title}</span>
                                  </div>
                                ))}
                                {pts.length > 8 && <p className="text-xs text-ink-faint">+{pts.length - 8} mai multe…</p>}
                              </div>
                            ) : (
                              <p className="text-xs text-ink-faint">Niciun task asociat. Adaugă tag <code>project-{p.id}</code> la tasks.</p>
                            )}
                            <div className="flex gap-2 pt-1">
                              {p.status === 'active' && (
                                <>
                                  <button onClick={() => patchMut.mutate({ id: p.id, status: 'paused' })}
                                    className="rounded border px-2.5 py-1 text-xs text-ink hover:border-warn/50">⏸ Pauză</button>
                                  <button onClick={() => patchMut.mutate({ id: p.id, status: 'completed' })}
                                    className="rounded border px-2.5 py-1 text-xs text-signal-ok border-signal-ok/30 hover:bg-signal-ok/10">✓ Finalizat</button>
                                </>
                              )}
                              {p.status === 'paused' && (
                                <button onClick={() => patchMut.mutate({ id: p.id, status: 'active' })}
                                  className="rounded border px-2.5 py-1 text-xs text-primary border-primary/30 hover:bg-primary/10">▶ Reactivează</button>
                              )}
                            </div>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}