import { redirect } from 'next/navigation';
import { Anchor, FileText, Receipt } from 'lucide-react';
import type { Metadata } from 'next';

import { getPortalSession } from '@/lib/portal/auth';
import { getPortalDashboard } from '@/lib/services/portal.service';
import { PortalCard } from '@/components/portal/portal-card';

export const metadata: Metadata = { title: 'Dashboard' };

export default async function PortalDashboardPage() {
  const session = await getPortalSession();
  if (!session) redirect('/portal/login');

  const dashboard = await getPortalDashboard(session.clientId, session.portId);
  if (!dashboard) redirect('/portal/login');

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold text-gray-900">
          Welcome back, {dashboard.client.fullName.split(' ')[0]}
        </h1>
        {dashboard.client.companyName && (
          <p className="text-gray-500 mt-0.5">{dashboard.client.companyName}</p>
        )}
        {dashboard.client.yachtName && (
          <p className="text-sm text-gray-400 mt-0.5">Vessel: {dashboard.client.yachtName}</p>
        )}
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <PortalCard
          title="Berth Interests"
          value={dashboard.counts.interests}
          description="Your berth enquiries and applications"
          icon={Anchor}
          href="/portal/interests"
        />
        <PortalCard
          title="Documents"
          value={dashboard.counts.documents}
          description="Contracts, EOIs and signed agreements"
          icon={FileText}
          href="/portal/documents"
        />
        <PortalCard
          title="Invoices"
          value={dashboard.counts.invoices}
          description="Billing statements and payment history"
          icon={Receipt}
          href="/portal/invoices"
        />
      </div>

      <div className="bg-white rounded-lg border p-6">
        <h2 className="text-sm font-medium text-gray-700 mb-1">Need assistance?</h2>
        <p className="text-sm text-gray-500">
          Contact the {dashboard.port.name} team directly. This portal provides a read-only view
          of your account. All changes must be made through your port contact.
        </p>
      </div>
    </div>
  );
}