import Link from "next/link";
import {
  CheckCircle,
  Clock,
  Infinity as InfinityIcon,
  MailOpen,
  ShieldCheck,
} from "lucide-react";
import { requireParticipantContext } from "@/lib/auth/require-participant";
import { getParticipantSummary } from "@/lib/queries/participant-queries";
import { PageHeader } from "@/components/shared/PageHeader";
import { StatCard } from "@/components/shared/StatCard";
import { EmptyState } from "@/components/shared/EmptyState";
import { Card, CardHeader, CardTitle } from "@/components/ui/Card";
import { FEATURES } from "@/config/features";
import { formatNumber } from "@/lib/utils/format";

export default async function SurveyCenterPage() {
  const { session, profile } = await requireParticipantContext();
  const summary = await getParticipantSummary(profile.id);
  const firstName = (session.user.name ?? "there").split(" ")[0];

  return (
    <>
      <PageHeader
        title="Survey Center"
        subtitle={`Welcome back, ${firstName}`}
      />

      <div className="flex-1 p-4 sm:p-[26px]">
        <div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
          <StatCard
            label="Questions answered"
            value={formatNumber(summary.answeredCount)}
            icon={<CheckCircle className="h-[15px] w-[15px]" />}
            iconClassName="bg-[#F0FDF4] text-success"
          />
          <StatCard
            label="Skipped"
            value={formatNumber(summary.skippedCount)}
            icon={<Clock className="h-[15px] w-[15px]" />}
            iconClassName="bg-[#FFFBEB] text-warning"
          />
          <StatCard
            label="Nonstop feed"
            value={summary.consentGranted ? "On" : "Off"}
            delta={
              summary.lastAnsweredAt
                ? `Last answer ${new Date(summary.lastAnsweredAt).toLocaleDateString()}`
                : "No answers yet"
            }
            icon={<ShieldCheck className="h-[15px] w-[15px]" />}
            iconClassName="bg-[#EFF6FF] text-primary"
          />
        </div>

        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
          {FEATURES.domesticFeed && (
            <Card className="overflow-hidden">
              <div className="bg-navy p-6 text-white">
                <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-accent text-navy">
                  <InfinityIcon className="h-5 w-5" />
                </div>
                <h2 className="text-lg font-extrabold">Nonstop questions</h2>
                <p className="mt-1 text-[13px] text-white/70">
                  Short questions that adapt to your answers. Answer a few at a
                  time — your place is always saved.
                </p>
                <Link
                  href="/participant/domestic"
                  className="mt-4 inline-flex items-center rounded-sm bg-accent px-4 py-2 text-sm font-semibold text-navy hover:bg-[#22b3ec]"
                >
                  {summary.answeredCount > 0 ? "Continue answering →" : "Start answering →"}
                </Link>
              </div>
            </Card>
          )}

          <Card>
            <CardHeader>
              <CardTitle>Survey invitations</CardTitle>
            </CardHeader>
            <EmptyState
              className="py-10"
              icon={<MailOpen className="h-8 w-8 text-muted" />}
              title="No invitations yet"
              description="When a survey creator invites you to their survey, it will show up here."
            />
          </Card>
        </div>
      </div>
    </>
  );
}