import { notFound } from "next/navigation"
import Image from "next/image"
import Link from "next/link"
import { getQuoteBySlug } from "@/lib/db"
import { calculatePrice, formatEstimate } from "@/lib/calculations"
import { getDistance } from "@/lib/distance"
import { CalculationDetailsView } from "@/components/calculator/calculation-details"
import { ArrowLeft, CheckCircle2, Calendar } from "lucide-react"
import { FLOORING_TYPES } from "@/lib/constants"

interface PageProps {
  params: Promise<{ slug: string }>
}

export default async function TilbudPage({ params }: PageProps) {
  const { slug } = await params
  const quote = getQuoteBySlug(slug)

  if (!quote) {
    notFound()
  }

  // Recalculate the price based on stored inputs
  const distance = getDistance(quote.postalCode)
  const calculation = calculatePrice({
    area: quote.area,
    height: quote.height,
    postalCode: quote.postalCode,
    distance,
    includeInsulation: true,
    includeFloorHeating: quote.includeFloorHeating,
    includeCompound: true,
    flooringType: quote.flooringType as keyof typeof FLOORING_TYPES,
  })

  const createdDate = new Date(quote.createdAt).toLocaleDateString("da-DK", {
    day: "numeric",
    month: "long",
    year: "numeric",
  })

  return (
    <main className="min-h-screen bg-muted/30">
      {/* Header */}
      <header className="border-b bg-white">
        <div className="container mx-auto flex items-center justify-between px-4 py-4">
          <Link href="/" className="flex items-center gap-2">
            <Image
              src="/foam-king-logo.png"
              alt="Foam King"
              width={140}
              height={56}
              className="h-12 w-auto"
            />
          </Link>
          <div className="text-sm text-muted-foreground">Tilbud #{quote.id}</div>
        </div>
      </header>

      <div className="container mx-auto max-w-4xl px-4 py-8">
        <Link
          href="/"
          className="mb-6 inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
        >
          <ArrowLeft className="h-4 w-4" />
          Tilbage til forsiden
        </Link>

        {/* Quote Header */}
        <div className="mb-6 rounded-2xl bg-white p-8 shadow-lg">
          <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div>
              <h1 className="text-2xl font-bold">Prisoverslag</h1>
              <p className="mt-1 flex items-center gap-2 text-muted-foreground">
                <Calendar className="h-4 w-4" />
                Oprettet {createdDate}
              </p>
            </div>
          </div>

          {/* Customer Info */}
          <div className="mb-6 rounded-xl bg-muted/50 p-4">
            <h3 className="mb-3 font-semibold">Kundeoplysninger</h3>
            <dl className="grid gap-x-6 gap-y-2 text-sm md:grid-cols-2">
              <div className="flex justify-between md:block">
                <dt className="text-muted-foreground">Navn:</dt>
                <dd className="font-medium">{quote.customerName}</dd>
              </div>
              <div className="flex justify-between md:block">
                <dt className="text-muted-foreground">Email:</dt>
                <dd className="font-medium">
                  <a
                    href={`mailto:${quote.customerEmail}`}
                    className="text-primary hover:underline"
                  >
                    {quote.customerEmail}
                  </a>
                </dd>
              </div>
              <div className="flex justify-between md:block">
                <dt className="text-muted-foreground">Telefon:</dt>
                <dd className="font-medium">
                  <a href={`tel:${quote.customerPhone}`} className="text-primary hover:underline">
                    {quote.customerPhone}
                  </a>
                </dd>
              </div>
              <div className="flex justify-between md:block">
                <dt className="text-muted-foreground">Adresse:</dt>
                <dd className="font-medium">
                  {quote.postalCode}
                  {quote.address ? `, ${quote.address}` : ""}
                </dd>
              </div>
            </dl>
            {quote.remarks && (
              <div className="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3">
                <div className="text-sm font-medium text-amber-800">Bemærkninger:</div>
                <p className="mt-1 text-sm text-amber-700">{quote.remarks}</p>
              </div>
            )}
          </div>

          {/* Price Box */}
          <div className="mb-6 rounded-xl bg-gradient-to-br from-primary/10 to-secondary/10 p-6 text-center">
            <p className="mb-2 text-5xl font-bold text-primary">
              {formatEstimate(calculation.totalInclVat)}
            </p>
            <p className="text-muted-foreground">inkl. moms</p>
          </div>

          {/* Project Details */}
          <div className="grid gap-6 md:grid-cols-2">
            <div>
              <h3 className="mb-3 font-semibold">Projektdetaljer</h3>
              <dl className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <dt className="text-muted-foreground">Areal:</dt>
                  <dd className="font-medium">{quote.area} m²</dd>
                </div>
                <div className="flex justify-between">
                  <dt className="text-muted-foreground">Gulvhøjde:</dt>
                  <dd className="font-medium">{quote.height} cm</dd>
                </div>
                <div className="flex justify-between">
                  <dt className="text-muted-foreground">Placering:</dt>
                  <dd className="font-medium">
                    {quote.postalCode}
                    {quote.address ? `, ${quote.address}` : ""}
                  </dd>
                </div>
                <div className="flex justify-between">
                  <dt className="text-muted-foreground">Gulvbelægning:</dt>
                  <dd className="font-medium">
                    {FLOORING_TYPES[quote.flooringType as keyof typeof FLOORING_TYPES]?.name ||
                      quote.flooringType}
                  </dd>
                </div>
              </dl>
            </div>

            <div>
              <h3 className="mb-3 font-semibold">Inkluderet i prisen</h3>
              <ul className="space-y-2 text-sm">
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="h-4 w-4 text-green-600" />
                  Isolering ({calculation.insulationThickness} cm)
                </li>
                {quote.includeFloorHeating && (
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 text-green-600" />
                    Gulvvarme syntetisk net + Ø16 PEX (excl. tilslutning)
                  </li>
                )}
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="h-4 w-4 text-green-600" />
                  Flydespartel (støbning)
                </li>
                <li className="flex items-center gap-2">
                  <CheckCircle2 className="h-4 w-4 text-green-600" />
                  Transport
                </li>
              </ul>
            </div>
          </div>

          <p className="mt-6 text-center text-xs text-muted-foreground">
            *Prisen er vejledende og kan variere med ±10.000 kr afhængigt af konkrete forhold
          </p>
        </div>

        {/* Detailed Calculation */}
        <div className="mb-6 rounded-2xl bg-white p-8 shadow-lg">
          <h2 className="mb-4 text-xl font-bold">Detaljeret prisberegning</h2>
          <CalculationDetailsView details={calculation} />
        </div>
      </div>

      {/* Footer */}
      <footer className="mt-8 border-t bg-white py-8">
        <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
          <p>Foam King ApS · Søgårdsvej 7, 4550 Asnæs · CVR: 44 48 54 51</p>
        </div>
      </footer>
    </main>
  )
}