import { notFound } from "next/navigation";
import Link from "next/link";
import { Mic2, Repeat } from "lucide-react";
import { requireAuth } from "@/lib/auth/guards";
import { prisma } from "@/lib/db";
import { PageHeader } from "@/components/app/page-header";
import { GenerationProgress } from "@/components/app/generation-progress";
import { ScriptEditor } from "@/components/app/script-editor";
import { AudioPlayer } from "@/components/app/audio-player";
import { EpisodeActions } from "@/components/app/episode-actions";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import type { StructuredScript } from "@/lib/ai/types";

export default async function EpisodePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const session = await requireAuth();

  const episode = await prisma.episode.findUnique({
    where: { id },
    include: { script: true, audioAsset: true, coverArt: true, speakers: true },
  });
  if (!episode) notFound();
  if (episode.userId !== session.user.id && session.user.role !== "admin") notFound();

  const inProgress = !["READY", "FAILED"].includes(episode.status);
  const speakerNames: Record<string, string> = {};
  for (const s of episode.speakers) speakerNames[s.speakerKey] = s.displayName;

  return (
    <>
      <PageHeader
        title={episode.title}
        description={`${episode.format.replace("_", "-").toLowerCase()} · ${episode.language.toUpperCase()} · ${episode.targetLengthMin} min`}
        action={
          !inProgress ? (
            <EpisodeActions episodeId={episode.id} initialShareId={episode.shareId} />
          ) : undefined
        }
      />

      {episode.status === "FAILED" || inProgress ? (
        <GenerationProgress
          episodeId={episode.id}
          initialStatus={episode.status}
          initialStage={episode.stage}
          initialError={episode.errorMessage}
        />
      ) : (
        <div className="grid gap-6 lg:grid-cols-3">
          <div className="space-y-6 lg:col-span-1">
            <Card className="overflow-hidden">
              <div className="aspect-square bg-muted">
                {episode.coverArt ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={`/api/assets/${episode.coverArt.storageKey}`}
                    alt={episode.title}
                    className="h-full w-full object-cover"
                  />
                ) : (
                  <div className="flex h-full w-full items-center justify-center text-muted-foreground">
                    <Mic2 className="h-10 w-10" />
                  </div>
                )}
              </div>
            </Card>

            {episode.audioAsset && (
              <Card>
                <CardContent className="pt-6">
                  <AudioPlayer
                    storageKey={episode.audioAsset.storageKey}
                    durationSec={episode.audioAsset.durationSec}
                    episodeId={episode.id}
                  />
                </CardContent>
              </Card>
            )}

            <Button asChild variant="outline" className="w-full">
              <Link href={`/episodes/${episode.id}/repurpose`}>
                <Repeat className="h-4 w-4" /> Repurpose content
              </Link>
            </Button>
          </div>

          <div className="lg:col-span-2">
            {episode.script ? (
              <ScriptEditor
                key={episode.script.version}
                episodeId={episode.id}
                script={episode.script.content as unknown as StructuredScript}
                speakerNames={speakerNames}
              />
            ) : (
              <Card>
                <CardContent className="py-12 text-center text-muted-foreground">
                  No script available.
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      )}
    </>
  );
}