/**
 * WorthDoing.ai
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File: src/app/page.tsx
 * Description: Discover page — launch an investigation; top-ranked opportunities and recent activity.
 */
import Link from "next/link";
import { desc, eq } from "drizzle-orm";
import { db } from "@/lib/db/client";
import { investigations, opportunities } from "@/lib/db/schema";
import { ObjectiveForm } from "@/components/wd/ObjectiveForm";
import { OpportunityCard } from "@/components/wd/OpportunityCard";
import { InvestigationStatusBadge } from "@/components/wd/badges";

export const dynamic = "force-dynamic";

export default async function DiscoverPage() {
  const [topOpportunities, recent] = await Promise.all([
    db
      .select({
        id: opportunities.id,
        title: opportunities.title,
        summary: opportunities.summary,
        worthScore: opportunities.worthScore,
        evidenceConfidence: opportunities.evidenceConfidence,
        objective: investigations.objective,
        reportMd: opportunities.reportMd,
      })
      .from(opportunities)
      .innerJoin(investigations, eq(investigations.id, opportunities.investigationId))
      .orderBy(desc(opportunities.worthScore))
      .limit(6),
    db
      .select({
        id: investigations.id,
        objective: investigations.objective,
        status: investigations.status,
        createdAt: investigations.createdAt,
      })
      .from(investigations)
      .orderBy(desc(investigations.createdAt))
      .limit(5),
  ]);

  return (
    <div className="mx-auto w-full max-w-6xl px-4 sm:px-6">
      <section className="py-14 sm:py-20">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-verdict">
          autonomous opportunity intelligence
        </p>
        <h1 className="mt-4 max-w-3xl font-heading text-4xl font-semibold leading-[1.08] tracking-tight text-ink sm:text-6xl">
          Google finds what exists.
          <br />
          <span className="italic text-verdict">WorthDoing</span> finds what should.
        </h1>
        <p className="mt-5 max-w-2xl text-base leading-relaxed text-ink-soft sm:text-lg">
          Give the agent a domain. It searches, reads, forms falsifiable hypotheses, hunts for
          counterevidence, and ranks what survives — every conclusion traced to real sources.
        </p>
        <div className="mt-8 max-w-3xl">
          <ObjectiveForm />
        </div>
      </section>

      {topOpportunities.length > 0 && (
        <section className="pb-12">
          <div className="mb-4 flex items-baseline justify-between">
            <h2 className="font-heading text-2xl font-semibold text-ink">Worth doing</h2>
            <Link href="/explore" className="font-mono text-xs uppercase tracking-wider text-tele hover:underline">
              explore all →
            </Link>
          </div>
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {topOpportunities.map((o) => (
              <OpportunityCard
                key={o.id}
                id={o.id}
                title={o.title}
                summary={o.summary}
                worthScore={o.worthScore}
                evidenceConfidence={o.evidenceConfidence}
                objective={o.objective}
                hasReport={!!o.reportMd}
              />
            ))}
          </div>
        </section>
      )}

      {recent.length > 0 && (
        <section className="pb-16">
          <h2 className="mb-4 font-heading text-2xl font-semibold text-ink">Recent investigations</h2>
          <ul className="divide-y divide-line rounded-xl border border-line bg-card">
            {recent.map((r) => (
              <li key={r.id}>
                <Link
                  href={`/investigate/${r.id}`}
                  className="flex min-h-[44px] items-center justify-between gap-3 px-4 py-3 transition-colors hover:bg-secondary/50"
                >
                  <span className="min-w-0 truncate text-sm text-ink">{r.objective}</span>
                  <InvestigationStatusBadge status={r.status} live />
                </Link>
              </li>
            ))}
          </ul>
        </section>
      )}
    </div>
  );
}