import Link from "next/link"
import { notFound } from "next/navigation"
import { fetchQuery } from "convex/nextjs"
import { ArrowLeft, ExternalLink, Phone } from "lucide-react"
import { api } from "@/convex/_generated/api"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  formatPhoneCallDuration,
  formatPhoneCallTimestamp,
  normalizePhoneFromIdentity,
} from "@/lib/phone-calls"

type PageProps = {
  params: Promise<{
    id: string
  }>
}

export default async function AdminCallDetailPage({ params }: PageProps) {
  const { id } = await params
  const detail = await fetchQuery(api.voiceSessions.getAdminPhoneCallDetail, {
    callId: id,
  })

  if (!detail) {
    notFound()
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="space-y-8">
        <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
          <div className="space-y-2">
            <Link
              href="/admin/calls"
              className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
            >
              <ArrowLeft className="h-4 w-4" />
              Back to calls
            </Link>
            <h1 className="text-4xl font-bold tracking-tight text-balance">
              Phone Call Detail
            </h1>
            <p className="text-muted-foreground">
              {normalizePhoneFromIdentity(detail.call.participantIdentity) ||
                detail.call.participantIdentity}
            </p>
          </div>
        </div>

        <div className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Phone className="h-5 w-5" />
                Call Status
              </CardTitle>
              <CardDescription>
                Operational detail for this direct phone session.
              </CardDescription>
            </CardHeader>
            <CardContent className="grid gap-4 md:grid-cols-2">
              <div>
                <p className="text-xs uppercase tracking-wide text-muted-foreground">
                  Started
                </p>
                <p className="font-medium">
                  {formatPhoneCallTimestamp(detail.call.startedAt)}
                </p>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wide text-muted-foreground">
                  Room
                </p>
                <p className="font-medium break-all">{detail.call.roomName}</p>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wide text-muted-foreground">
                  Duration
                </p>
                <p className="font-medium">
                  {formatPhoneCallDuration(detail.call.durationMs)}
                </p>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wide text-muted-foreground">
                  Participant Identity
                </p>
                <p className="font-medium break-all">
                  {detail.call.participantIdentity || "Unknown"}
                </p>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wide text-muted-foreground">
                  Call Status
                </p>
                <Badge
                  className="mt-1"
                  variant={
                    detail.call.callStatus === "failed"
                      ? "destructive"
                      : detail.call.callStatus === "started"
                        ? "secondary"
                        : "default"
                  }
                >
                  {detail.call.callStatus}
                </Badge>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wide text-muted-foreground">
                  Jessica Answered
                </p>
                <p className="font-medium">
                  {detail.call.answered ? "Yes" : "No"}
                </p>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wide text-muted-foreground">
                  Lead Outcome
                </p>
                <p className="font-medium">{detail.call.leadOutcome}</p>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wide text-muted-foreground">
                  Email Summary
                </p>
                <p className="font-medium">{detail.call.notificationStatus}</p>
              </div>
              <div className="md:col-span-2">
                <p className="text-xs uppercase tracking-wide text-muted-foreground">
                  Summary
                </p>
                <p className="text-sm whitespace-pre-wrap">
                  {detail.call.summaryText || "No summary available yet."}
                </p>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wide text-muted-foreground">
                  Recording Status
                </p>
                <p className="font-medium">
                  {detail.call.recordingStatus || "Unavailable"}
                </p>
              </div>
              <div>
                <p className="text-xs uppercase tracking-wide text-muted-foreground">
                  Transcript Turns
                </p>
                <p className="font-medium">{detail.call.transcriptTurnCount}</p>
              </div>
              {detail.call.recordingUrl ? (
                <div className="md:col-span-2">
                  <Link
                    href={detail.call.recordingUrl}
                    target="_blank"
                    className="inline-flex items-center gap-2 text-sm text-primary hover:underline"
                  >
                    Open recording
                    <ExternalLink className="h-4 w-4" />
                  </Link>
                </div>
              ) : null}
              {detail.call.notificationError ? (
                <div className="md:col-span-2">
                  <p className="text-xs uppercase tracking-wide text-muted-foreground">
                    Email Error
                  </p>
                  <p className="text-sm text-destructive">
                    {detail.call.notificationError}
                  </p>
                </div>
              ) : null}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Linked Lead</CardTitle>
              <CardDescription>
                {detail.linkedLead
                  ? "Lead created from this phone call."
                  : "No lead was created from this call."}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              {detail.linkedLead ? (
                <>
                  <div>
                    <p className="text-xs uppercase tracking-wide text-muted-foreground">
                      Contact
                    </p>
                    <p className="font-medium">
                      {detail.linkedLead.firstName} {detail.linkedLead.lastName}
                    </p>
                  </div>
                  <div>
                    <p className="text-xs uppercase tracking-wide text-muted-foreground">
                      Lead Type
                    </p>
                    <p className="font-medium">{detail.linkedLead.type}</p>
                  </div>
                  <div>
                    <p className="text-xs uppercase tracking-wide text-muted-foreground">
                      Email
                    </p>
                    <p className="font-medium break-all">
                      {detail.linkedLead.email}
                    </p>
                  </div>
                  <div>
                    <p className="text-xs uppercase tracking-wide text-muted-foreground">
                      Phone
                    </p>
                    <p className="font-medium">{detail.linkedLead.phone}</p>
                  </div>
                  <div>
                    <p className="text-xs uppercase tracking-wide text-muted-foreground">
                      Message
                    </p>
                    <p className="text-sm whitespace-pre-wrap">
                      {detail.linkedLead.message || "—"}
                    </p>
                  </div>
                </>
              ) : (
                <p className="text-sm text-muted-foreground">
                  Jessica handled the call, but it did not result in a submitted
                  lead.
                </p>
              )}
            </CardContent>
          </Card>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Transcript</CardTitle>
            <CardDescription>
              Complete mirrored transcript for this phone call.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            {detail.turns.length === 0 ? (
              <p className="text-sm text-muted-foreground">
                No transcript turns were captured for this call.
              </p>
            ) : (
              detail.turns.map((turn: any) => (
                <div key={turn.id} className="rounded-lg border p-3">
                  <div className="mb-1 flex items-center justify-between gap-3 text-xs text-muted-foreground">
                    <span className="uppercase tracking-wide">{turn.role}</span>
                    <span>{formatPhoneCallTimestamp(turn.createdAt)}</span>
                  </div>
                  <p className="whitespace-pre-wrap text-sm">{turn.text}</p>
                </div>
              ))
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export const metadata = {
  title: "Phone Call Detail | Admin",
  description:
    "Review a mirrored direct phone call transcript and linked lead details",
}