import { defineRouteConfig } from "@medusajs/admin-sdk"
import { useEffect, useMemo, useState } from "react"

type QuoteItem = {
  line_id?: string | null
  product_title?: string | null
  variant_title?: string | null
  quantity?: number
  total?: number | null
  metadata?: Record<string, unknown> | null
}

type AdminQuote = {
  id: string
  reference?: string | null
  status?: string | null
  customer_id?: string | null
  customer_email?: string | null
  cart_id?: string | null
  currency_code?: string | null
  subtotal?: number | null
  shipping_total?: number | null
  total?: number | null
  event_date?: string | null
  created_at?: string | null
  items?: QuoteItem[]
  cart_snapshot?: Record<string, unknown> | null
}

function formatMoney(value?: number | null, currencyCode?: string | null) {
  const amount = typeof value === "number" ? value : 0
  const currency = (currencyCode || "EUR").toUpperCase()

  try {
    return new Intl.NumberFormat("fr-FR", {
      style: "currency",
      currency,
    }).format(amount / 100)
  } catch {
    return `${(amount / 100).toFixed(2)} ${currency}`
  }
}

function formatDate(value?: string | null) {
  if (!value) {
    return "-"
  }

  const date = new Date(value)
  if (Number.isNaN(date.getTime())) {
    return "-"
  }

  return new Intl.DateTimeFormat("fr-FR", {
    dateStyle: "medium",
    timeStyle: "short",
  }).format(date)
}

function getStatusColor(status?: string | null) {
  switch ((status || "").toLowerCase()) {
    case "saved":
      return "bg-orange-100 text-orange-700 border-orange-200"
    case "sent":
      return "bg-blue-100 text-blue-700 border-blue-200"
    case "accepted":
      return "bg-green-100 text-green-700 border-green-200"
    case "rejected":
      return "bg-red-100 text-red-700 border-red-200"
    default:
      return "bg-ui-bg-subtle text-ui-fg-subtle border-ui-border-base"
  }
}

const DevisPage = () => {
  const [quotes, setQuotes] = useState<AdminQuote[]>([])
  const [selectedQuoteId, setSelectedQuoteId] = useState<string>("")
  const [search, setSearch] = useState("")
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string>("")

  const loadQuotes = async () => {
    setLoading(true)
    setError("")

    try {
      const response = await fetch("/admin/custom/quotes", {
        credentials: "include",
      })

      if (!response.ok) {
        throw new Error("Impossible de charger les devis.")
      }

      const payload = (await response.json()) as { quotes?: AdminQuote[] }
      const nextQuotes = payload.quotes || []
      setQuotes(nextQuotes)

      if (nextQuotes.length > 0) {
        setSelectedQuoteId((current) => {
          if (current && nextQuotes.some((quote) => quote.id === current)) {
            return current
          }

          return nextQuotes[0].id
        })
      } else {
        setSelectedQuoteId("")
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : "Impossible de charger les devis.")
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    void loadQuotes()
  }, [])

  const filteredQuotes = useMemo(() => {
    const query = search.trim().toLowerCase()
    if (!query) {
      return quotes
    }

    return quotes.filter((quote) => {
      const haystack = [
        quote.reference,
        quote.customer_email,
        quote.customer_id,
        quote.cart_id,
      ]
        .filter(Boolean)
        .join(" ")
        .toLowerCase()

      return haystack.includes(query)
    })
  }, [quotes, search])

  const selectedQuote =
    filteredQuotes.find((quote) => quote.id === selectedQuoteId) ||
    quotes.find((quote) => quote.id === selectedQuoteId) ||
    filteredQuotes[0] ||
    null

  return (
    <div className="flex flex-col gap-y-6">
      <div className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
        <div>
          <h1 className="text-2xl font-semibold">Devis</h1>
          <p className="text-ui-fg-subtle mt-2 text-sm">
            Retrouvez les devis enregistres depuis le panier client.
          </p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <span className="bg-ui-bg-subtle border-ui-border-base inline-flex rounded-full border px-3 py-1 text-xs font-medium">
            {quotes.length} devis
          </span>
          <button
            type="button"
            onClick={() => void loadQuotes()}
            className="bg-ui-bg-base border-ui-border-base txt-compact-small-plus shadow-buttons-neutral inline-flex h-8 items-center rounded-md border px-3"
          >
            Rafraichir
          </button>
        </div>
      </div>

      <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
        <section className="border-ui-border-base overflow-hidden rounded-lg border">
          <div className="flex flex-col gap-3 px-6 py-4">
            <p className="text-sm font-semibold">Liste des devis</p>
            <input
              value={search}
              onChange={(event) => setSearch(event.target.value)}
              placeholder="Rechercher par reference, email, client ou panier"
              className="bg-ui-bg-field border-ui-border-base txt-compact-small h-10 rounded-md border px-3 outline-none"
            />
          </div>

          {loading ? (
            <div className="px-6 py-10">
              <p className="text-ui-fg-subtle text-sm">Chargement des devis...</p>
            </div>
          ) : error ? (
            <div className="px-6 py-10">
              <p className="text-ui-fg-error text-sm">{error}</p>
            </div>
          ) : filteredQuotes.length === 0 ? (
            <div className="px-6 py-10">
              <p className="text-ui-fg-subtle text-sm">Aucun devis trouve.</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full border-collapse text-sm">
                <thead>
                  <tr className="border-ui-border-base border-y bg-ui-bg-subtle">
                    <th className="px-6 py-3 text-left font-medium">Reference</th>
                    <th className="px-6 py-3 text-left font-medium">Client</th>
                    <th className="px-6 py-3 text-left font-medium">Date</th>
                    <th className="px-6 py-3 text-left font-medium">Total</th>
                    <th className="px-6 py-3 text-left font-medium">Statut</th>
                  </tr>
                </thead>
                <tbody>
                {filteredQuotes.map((quote) => {
                  const active = selectedQuote?.id === quote.id

                  return (
                    <tr
                      key={quote.id}
                      className={`border-ui-border-base border-b ${active ? "bg-ui-bg-subtle" : ""}`}
                    >
                      <td className="px-6 py-3 align-top">
                        <button
                          type="button"
                          onClick={() => setSelectedQuoteId(quote.id)}
                          className="text-left"
                        >
                          <p className="font-medium">{quote.reference || quote.id.slice(-6)}</p>
                          <p className="text-ui-fg-subtle text-xs">
                            {quote.cart_id || "-"}
                          </p>
                        </button>
                      </td>
                      <td className="px-6 py-3 align-top">{quote.customer_email || "-"}</td>
                      <td className="px-6 py-3 align-top">{formatDate(quote.created_at)}</td>
                      <td className="px-6 py-3 align-top">{formatMoney(quote.total, quote.currency_code)}</td>
                      <td className="px-6 py-3 align-top">
                        <span className={`inline-flex rounded-full border px-2 py-1 text-xs font-medium ${getStatusColor(quote.status)}`}>
                          {quote.status || "saved"}
                        </span>
                      </td>
                    </tr>
                  )
                })}
                </tbody>
              </table>
            </div>
          )}
        </section>

        <section className="border-ui-border-base overflow-hidden rounded-lg border">
          <div className="px-6 py-4">
            <p className="text-sm font-semibold">Detail du devis</p>
          </div>

          {!selectedQuote ? (
            <div className="px-6 py-10">
              <p className="text-ui-fg-subtle text-sm">Selectionnez un devis pour voir le detail.</p>
            </div>
          ) : (
            <>
              <div className="grid gap-4 px-6 py-4">
                <div className="flex items-center justify-between gap-3">
                  <h2 className="text-lg font-semibold">{selectedQuote.reference || selectedQuote.id.slice(-6)}</h2>
                  <span className={`inline-flex rounded-full border px-2 py-1 text-xs font-medium ${getStatusColor(selectedQuote.status)}`}>
                    {selectedQuote.status || "saved"}
                  </span>
                </div>
                <div className="grid gap-2">
                  <p className="text-sm"><span className="font-medium">Client:</span> {selectedQuote.customer_email || "-"}</p>
                  <p className="text-sm"><span className="font-medium">Customer ID:</span> {selectedQuote.customer_id || "-"}</p>
                  <p className="text-sm"><span className="font-medium">Panier:</span> {selectedQuote.cart_id || "-"}</p>
                  <p className="text-sm"><span className="font-medium">Date:</span> {formatDate(selectedQuote.created_at)}</p>
                  <p className="text-sm"><span className="font-medium">Evenement:</span> {selectedQuote.event_date || "-"}</p>
                </div>
              </div>

              <div className="grid gap-3 px-6 py-4">
                <p className="text-sm font-semibold">Totaux</p>
                <div className="grid gap-2">
                  <p className="text-sm"><span className="font-medium">Sous-total:</span> {formatMoney(selectedQuote.subtotal, selectedQuote.currency_code)}</p>
                  <p className="text-sm"><span className="font-medium">Livraison:</span> {formatMoney(selectedQuote.shipping_total, selectedQuote.currency_code)}</p>
                  <p className="text-sm"><span className="font-medium">Total:</span> {formatMoney(selectedQuote.total, selectedQuote.currency_code)}</p>
                </div>
              </div>

              <div className="grid gap-3 px-6 py-4">
                <p className="text-sm font-semibold">Articles</p>
                {!selectedQuote.items?.length ? (
                  <p className="text-ui-fg-subtle text-sm">Aucun article enregistre.</p>
                ) : (
                  <div className="grid gap-2">
                    {selectedQuote.items.map((item, index) => (
                      <div key={`${selectedQuote.id}-${item.line_id || index}`} className="bg-ui-bg-subtle rounded-md p-3">
                        <p className="text-sm font-medium">{item.product_title || "Produit"}</p>
                        <p className="text-ui-fg-subtle text-xs">
                          {item.variant_title || "-"} x {item.quantity || 1}
                        </p>
                        <p className="text-sm">{formatMoney(item.total, selectedQuote.currency_code)}</p>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              <div className="grid gap-3 px-6 py-4">
                <p className="text-sm font-semibold">Snapshot panier</p>
                <pre className="bg-ui-bg-subtle max-h-[360px] overflow-auto rounded-md p-3 text-xs">
                  {JSON.stringify(selectedQuote.cart_snapshot || {}, null, 2)}
                </pre>
              </div>
            </>
          )}
        </section>
      </div>
    </div>
  )
}

export const config = defineRouteConfig({
  label: "Devis",
})

export default DevisPage