"use client"

import { useState } from "react"
import Image from "next/image"
import { CalculatorForm } from "@/components/calculator/calculator-form"
import { CalculationDetailsView } from "@/components/calculator/calculation-details"
import { Button } from "@/components/ui/button"
import type { CalculationDetails } from "@/lib/calculations"
import { formatEstimate } from "@/lib/calculations"
import { Send, Eye, EyeOff } from "lucide-react"

export default function AdminPage() {
  const [calculationResult, setCalculationResult] = useState<CalculationDetails | null>(null)
  const [showAdminMode, setShowAdminMode] = useState(true)
  const [isRequestingQuote, setIsRequestingQuote] = useState(false)
  const [customerInfo, setCustomerInfo] = useState<any>(null)
  const [distanceSource, setDistanceSource] = useState<"openrouteservice" | "table" | null>(null)

  const handleCalculation = (
    result: CalculationDetails,
    formData?: any,
    source?: "openrouteservice" | "table"
  ) => {
    setCalculationResult(result)
    if (formData) {
      setCustomerInfo(formData)
    }
    if (source) {
      setDistanceSource(source)
    }
  }

  const handleQuoteRequest = async () => {
    if (!calculationResult || !customerInfo) return

    setIsRequestingQuote(true)
    try {
      await new Promise((resolve) => setTimeout(resolve, 500))
      console.log("Quote request (test mode):", {
        customerInfo,
        calculationDetails: calculationResult,
      })
      alert("TEST MODE: Tilbudsanmodning ville blive sendt til info@foamking.dk")
    } catch (error) {
      alert("Der opstod en fejl. Prøv igen senere.")
    } finally {
      setIsRequestingQuote(false)
    }
  }

  return (
    <main className="min-h-screen bg-gradient-to-b from-background to-muted/20">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-8 text-center">
          <div className="mb-4 flex justify-center">
            <Image
              src="/foam-king-logo.png"
              alt="Foam King Gulve"
              width={200}
              height={80}
              priority
              className="h-20 w-auto"
            />
          </div>
          <h1 className="text-3xl font-bold">Foam King Gulve - Admin</h1>
          <p className="mt-2 text-lg text-muted-foreground">
            Detaljeret prisberegning til internt brug
          </p>
        </div>

        {/* Admin Mode Toggle */}
        <div className="mb-4 flex justify-center">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setShowAdminMode(!showAdminMode)}
            className="gap-2"
          >
            {showAdminMode ? (
              <>
                <EyeOff className="h-4 w-4" />
                Skjul detaljer
              </>
            ) : (
              <>
                <Eye className="h-4 w-4" />
                Vis detaljer
              </>
            )}
          </Button>
        </div>

        {/* Calculator */}
        <div className="mx-auto max-w-6xl">
          <div className="grid gap-8 lg:grid-cols-2">
            <div className="flex justify-center">
              <CalculatorForm onCalculation={handleCalculation} showDetails={showAdminMode} />
            </div>

            {/* Results */}
            <div className="space-y-6">
              {!showAdminMode ? (
                <div className="rounded-xl bg-card p-8 text-center shadow">
                  <h2 className="mb-4 text-xl font-semibold">Dit prisoverslag</h2>
                  {calculationResult ? (
                    <>
                      <p className="text-4xl font-bold text-primary">
                        {formatEstimate(calculationResult.totalInclVat)}
                      </p>
                      <p className="mt-2 text-sm text-muted-foreground">inkl. moms</p>
                      <p className="mt-4 text-sm text-muted-foreground">
                        *Prisen er vejledende og kan variere med ±10.000 kr afhængigt af konkrete
                        forhold
                      </p>
                      <Button
                        onClick={handleQuoteRequest}
                        size="lg"
                        className="mt-6 gap-2"
                        disabled={isRequestingQuote}
                      >
                        <Send className="h-4 w-4" />
                        Anmod om bindende tilbud
                      </Button>
                    </>
                  ) : (
                    <p className="text-2xl text-muted-foreground">
                      Udfyld formularen og klik &quot;Beregn pris&quot;
                    </p>
                  )}
                </div>
              ) : calculationResult ? (
                <CalculationDetailsView
                  details={calculationResult}
                  distanceSource={distanceSource}
                />
              ) : (
                <div className="rounded-xl bg-card p-8 text-center shadow">
                  <h2 className="mb-4 text-xl font-semibold">Detaljeret prisberegning</h2>
                  <p className="text-muted-foreground">
                    Udfyld formularen og klik &quot;Beregn pris&quot;
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Footer */}
        <footer className="mt-16 border-t pt-8 text-center text-sm text-muted-foreground">
          <p>Foam King Gulve · Asnæs · CVR: 44 48 54 51</p>
          <p className="mt-1">Vi dækker Sjælland, Lolland-Falster og Fyn</p>
        </footer>
      </div>
    </main>
  )
}