import type { ClientView } from '@/lib/client-view';
import type { Comment } from '@/db/schema';
import { Progress } from '@/components/ui/progress';
import { PhaseTimeline } from './phase-timeline';
import { PaymentStatus } from './payment-status';
import { DocumentsSection } from './documents-section';
import { NotesSection } from './notes-section';
import { PhaseViewToggle } from './client/kanban/PhaseViewToggle';
import { ChatSection } from './client/ChatSection';
import { OffersSection } from './client/OffersSection';

interface ClientDashboardProps {
  view: ClientView;
  token: string;
  comments: Comment[];
}

export function ClientDashboard({ view, token, comments }: ClientDashboardProps) {
  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="bg-white border-b border-[#e5e5e5] sticky top-0 z-10">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-5">
          <div className="flex items-center">
            <span className="text-xs font-semibold tracking-widest text-[#999999] uppercase w-28 shrink-0">
              iamcavalli
            </span>
            <h1 className="flex-1 text-center text-2xl sm:text-3xl font-bold text-[#1a1a1a] tracking-tight">
              {view.client.brand_name}
            </h1>
            <div className="w-28 shrink-0" />
          </div>
        </div>
      </header>

      {/* Barra progresso globale */}
      <section className="bg-[#f9f9f9] border-b border-[#e5e5e5]">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-4">
          <div className="flex items-center justify-between mb-2">
            <p className="text-sm font-semibold text-[#1a1a1a]">Avanzamento Progetto</p>
            <p className="text-sm font-bold text-[#1a1a1a]">{view.global_progress_pct}%</p>
          </div>
          <Progress value={view.global_progress_pct} className="h-2" />
        </div>
      </section>

      {/* Layout principale */}
      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
        <div className="flex flex-col lg:flex-row gap-8">

          {/* ── Sidebar sinistra ── */}
          <aside className="w-full lg:w-72 shrink-0 order-2 lg:order-1">
            <div className="lg:sticky lg:top-[89px] space-y-6">
              <div>
                <h2 className="text-xs font-bold text-[#71717a] uppercase tracking-wider mb-3">Pagamenti</h2>
                <PaymentStatus accepted_total={view.client.accepted_total} payments={view.payments} />
              </div>
              {view.activeOffers && view.activeOffers.length > 0 && (
                <div>
                  <h2 className="text-xs font-bold text-[#71717a] uppercase tracking-wider mb-3">Offerte Attive</h2>
                  <OffersSection offers={view.activeOffers} />
                </div>
              )}
              <div>
                <h2 className="text-xs font-bold text-[#71717a] uppercase tracking-wider mb-3">Documenti & File</h2>
                <DocumentsSection documents={view.documents} />
              </div>
              {view.notes.length > 0 && (
                <div>
                  <h2 className="text-xs font-bold text-[#71717a] uppercase tracking-wider mb-3">Note & Decisioni</h2>
                  <NotesSection notes={view.notes} />
                </div>
              )}
            </div>
          </aside>

          {/* ── Contenuto principale ── */}
          <main className="flex-1 min-w-0 order-1 lg:order-2 space-y-12">
            <PhaseViewToggle
              timelineView={<PhaseTimeline phases={view.phases} token={token} />}
              phases={view.phases}
              token={token}
            />

            {/* Chat revisioni */}
            <div>
              <h2 className="text-xl font-bold text-[#1a1a1a] mb-4">Messaggi & Revisioni</h2>
              <ChatSection
                clientId={view.client.id}
                phases={view.phases}
                token={token}
                comments={comments}
              />
            </div>
          </main>

        </div>
      </div>

      <footer className="border-t border-[#e5e5e5] bg-[#f9f9f9] mt-10">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-6">
          <p className="text-xs text-[#999999] text-center">
            Questa è la tua dashboard privata — non condividere il link.
          </p>
        </div>
      </footer>
    </div>
  );
}