clienthub/src/app/client/[token]/page.tsx

import { cache } from "react";
import { notFound } from "next/navigation";
import {
  getClientWithProjectsByToken,
  getProjectView,
  type ProjectView,
  type ClientView,
  type ClientProjectSummary,
} from "@/lib/client-view";
import { getClientGate } from "@/lib/client-gate";
import { ClientDashboard } from "@/components/client-dashboard";
import { OtpGate } from "@/components/client/OtpGate";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import type { Comment } from "@/db/schema";

export const revalidate = 0;

const getCachedClientData = cache(getClientWithProjectsByToken);

// Adapter: converts ProjectView + client info into ClientView shape for ClientDashboard reuse
function projectViewToClientView(
  client: ClientProjectSummary["client"],
  view: ProjectView
): ClientView {
  return {
    client: {
      id: view.project.client_id,
      name: client.name,
      brand_name: client.brand_name,
      brief: "",
      accepted_total: view.project.accepted_total,
    },
    phases: view.phases.map((phase) => ({
      id: phase.id,
      title: phase.title,
      status: phase.status as "upcoming" | "active" | "done",
      sort_order: phase.sort_order,
      tasks: phase.tasks.map((task) => ({
        id: task.id,
        title: task.title,
        description: task.description,
        status: task.status as "todo" | "in_progress" | "done",
        sort_order: task.sort_order,
        deliverables: task.deliverables.map((d) => ({
          id: d.id,
          title: d.title,
          url: d.url,
          status: d.status as "pending" | "submitted" | "approved",
          // approved_at is immutable once set — CLAUDE.md constraint LOCKED
          approved_at: d.approved_at instanceof Date ? d.approved_at.toISOString() : null,
        })),
      })),
      progress_pct: phase.progress_pct,
    })),
    payments: view.payments.map((p) => ({
      id: p.id,
      label: p.label,
      status: p.status as "da_saldare" | "inviata" | "saldato",
    })),
    documents: view.documents.map((d) => ({
      id: d.id,
      label: d.label,
      url: d.url,
    })),
    notes: view.notes.map((n) => ({
      id: n.id,
      body: n.body,
      created_at: n.created_at instanceof Date ? n.created_at.toISOString() : String(n.created_at),
    })),
    global_progress_pct: view.global_progress_pct,
    activeOffers: view.activeOffers,
    transcripts: view.transcripts.map((t) => ({
      id: t.id,
      title: t.title,
      call_date: t.call_date,
      content: t.content,
      created_at: t.created_at instanceof Date ? t.created_at.toISOString() : String(t.created_at),
    })),
  };
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ token: string }>;
}) {
  const { token } = await params;
  console.log("[generateMetadata] token:", token);
  const clientData = await getCachedClientData(token);
  if (!clientData) return { title: "Not Found" };
  return {
    title: `${clientData.client.brand_name} — Stato Progetto | iamcavalli`,
    description: "Dashboard stato progetto",
  };
}

export default async function ClientPage({
  params,
}: {
  params: Promise<{ token: string }>;
}) {
  const { token } = await params;

  // ⚠️ Il gate va PRIMA di ogni query sui dati del progetto: se si interroga il
  // DB e poi si decide di mostrare il form, i dati sono già nel payload RSC
  // dell'HTML anche se non compaiono a schermo. Vedi src/lib/client-gate.ts.
  const { client: identity, session } = await getClientGate(token);
  if (identity && !session) {
    return <OtpGate token={token} brandName={identity.brand_name} />;
  }

  const clientData = await getCachedClientData(token);
  if (!clientData) notFound();

  const { client, projects } = clientData;

  if (projects.length === 0) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-xl font-bold text-foreground">{client.name}</h1>
          <p className="text-sm text-muted-foreground mt-2">Nessun progetto disponibile al momento.</p>
        </div>
      </div>
    );
  }

  if (projects.length === 1) {
    // D-09: single project → direct view without selector
    const view = await getProjectView(projects[0].id);
    if (!view) notFound();
    return (
      <ClientDashboard
        view={projectViewToClientView(client, view)}
        token={client.token}
        comments={view.comments as unknown as Comment[]}
      />
    );
  }

  // D-10: 2+ projects → tabs with project names
  const projectViews = await Promise.all(projects.map((p) => getProjectView(p.id)));

  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 flex flex-col items-center gap-4 border-b border-border-light bg-card px-6 py-5 shadow-card md:flex-row md:justify-between md:px-8">
        <div className="flex w-full items-center gap-3 md:w-auto">
          <span className="text-xs font-bold uppercase tracking-widest text-muted-foreground">iamcavalli</span>
          <span className="text-border">|</span>
          <span className="text-xs font-medium text-muted-foreground">Client Portal</span>
        </div>
        <div className="text-center">
          <h1 className="text-xl font-bold tracking-tight text-foreground">{client.brand_name}</h1>
        </div>
        <div className="hidden items-center gap-2 rounded-full border border-emerald-100 bg-emerald-50 px-3 py-1 text-[11px] text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-400 md:flex">
          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500" />
          Area Riservata Protetta
        </div>
      </header>

      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 py-8">
        <Tabs defaultValue={projects[0].id} className="w-full">
          <TabsList className="mb-6">
            {projects.map((p) => (
              <TabsTrigger key={p.id} value={p.id}>
                {p.name}
              </TabsTrigger>
            ))}
          </TabsList>

          {projects.map((p, i) => {
            const view = projectViews[i];
            return (
              <TabsContent key={p.id} value={p.id}>
                {view ? (
                  <ClientDashboard
                    view={projectViewToClientView(client, view)}
                    token={client.token}
                    comments={view.comments as unknown as Comment[]}
                    embedded
                  />
                ) : (
                  <p className="text-sm text-muted-foreground">Progetto non disponibile.</p>
                )}
              </TabsContent>
            );
          })}
        </Tabs>
      </div>

      <footer className="mt-10 py-10 text-center text-xs text-muted-foreground">
        Questa è la tua dashboard privata — non condividere il link.
      </footer>
    </div>
  );
}