'use client'

import React, { useState, useMemo } from 'react'
import Link from 'next/link'
import { Download, ExternalLink, ShoppingBag, ArrowLeft, Package, Search, ChevronLeft, ChevronRight } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import type { Order } from '@/lib/types'

const statusLabel: Record<string, string> = {
  pending: 'Eingegangen',
  active: 'In Bearbeitung',
  completed: 'Abgeschlossen',
  cancelled: 'Storniert',
  rejected: 'Abgelehnt',
}

const statusClass: Record<string, string> = {
  pending: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
  active: 'bg-green-500/20 text-green-400 border-green-500/30',
  completed: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
  cancelled: 'bg-red-500/20 text-red-400 border-red-500/30',
  rejected: 'bg-rose-500/20 text-rose-400 border-rose-500/30',
}

interface MyOrdersClientProps {
  orders: Order[]
  error: string | null
}

export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
  const [searchTerm, setSearchTerm] = useState('')
  const [currentPage, setCurrentPage] = useState(1)
  const pageSize = 10

  // Volltextsuche filtern
  const filteredOrders = useMemo(() => {
    const term = searchTerm.toLowerCase().trim()
    if (!term) return orders

    return orders.filter(o => {
      // Order number
      if (o.order_number?.toString().toLowerCase().includes(term)) return true
      
      // Status label or raw status
      const label = statusLabel[o.status] || o.status
      if (label.toLowerCase().includes(term) || o.status.toLowerCase().includes(term)) return true

      // Date
      const dateStr = new Date(o.created_at).toLocaleDateString('de-DE')
      if (dateStr.includes(term)) return true

      // Order items (device name, product name, module name)
      const items = o.order_data?.items ?? []
      for (const item of items) {
        if (item.device_name?.toLowerCase().includes(term)) return true
        if (item.product_name?.toLowerCase().includes(term)) return true
        if (item.license_number?.toLowerCase().includes(term)) return true

        for (const mod of item.selected_modules ?? []) {
          if (mod.module_name?.toLowerCase().includes(term)) return true
        }
      }

      return false
    })
  }, [orders, searchTerm])

  // Paginierung berechnen
  const totalPages = Math.ceil(filteredOrders.length / pageSize) || 1
  const paginatedOrders = useMemo(() => {
    const start = (currentPage - 1) * pageSize
    return filteredOrders.slice(start, start + pageSize)
  }, [filteredOrders, currentPage, pageSize])

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value)
    setCurrentPage(1)
  }

  return (
    <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
      <div className="max-w-4xl mx-auto space-y-8">
        {/* Header */}
        <div className="flex items-center gap-4">
          <Link href="/">
            <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
              <ArrowLeft className="w-4 h-4 mr-2" /> Startseite
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
              <ShoppingBag className="w-8 h-8 text-primary" />
              Meine Anfragen
            </h1>
            <p className="text-slate-400 text-sm mt-1">
              Alle Ihre Anfragen auf einen Blick – inkl. aktuellem Status.
            </p>
          </div>
        </div>

        {/* Suche & Statistik */}
        <div className="flex flex-col sm:flex-row gap-4 justify-between items-stretch sm:items-center">
          <div className="relative flex-1">
            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
            <Input
              type="text"
              placeholder="Volltextsuche nach Anfragenr., Produkt, Kasse, Status..."
              value={searchTerm}
              onChange={handleSearchChange}
              className="pl-10 bg-slate-900/80 border-white/10 text-white placeholder:text-slate-500 rounded-xl h-11 text-sm focus:border-primary"
            />
          </div>
          <div className="text-xs text-slate-400 bg-slate-900/50 px-3 py-2.5 rounded-xl border border-white/5 shrink-0 text-center">
            Gefunden: <span className="text-white font-bold">{filteredOrders.length}</span> von <span className="text-white font-bold">{orders.length}</span> Anfragen
          </div>
        </div>

        {/* Fehler */}
        {error && (
          <div className="bg-red-500/10 border border-red-500/20 text-red-400 rounded-xl p-4 text-sm">
            Fehler beim Laden der Anfragen: {error}
          </div>
        )}

        {/* Keine Anfragen (aus DB) */}
        {!error && orders.length === 0 && (
          <Card className="glass-dark border-white/10">
            <CardContent className="flex flex-col items-center justify-center py-16 gap-4">
              <Package className="w-12 h-12 text-slate-600" />
              <p className="text-slate-400 text-lg">Sie haben noch keine Anfragen aufgegeben.</p>
              <Link href="/order">
                <Button>Jetzt konfigurieren</Button>
              </Link>
            </CardContent>
          </Card>
        )}

        {/* Keine Treffer nach Suche */}
        {!error && orders.length > 0 && filteredOrders.length === 0 && (
          <Card className="glass-dark border-white/10">
            <CardContent className="flex flex-col items-center justify-center py-12 gap-3 text-center">
              <Search className="w-10 h-10 text-slate-600" />
              <p className="text-slate-300 font-medium">Keine Anfragen für &quot;{searchTerm}&quot; gefunden.</p>
              <Button variant="outline" size="sm" onClick={() => setSearchTerm('')} className="border-white/10 text-xs">
                Filter zurücksetzen
              </Button>
            </CardContent>
          </Card>
        )}

        {/* Anfragenliste */}
        {paginatedOrders.length > 0 && (
          <div className="space-y-4">
            {paginatedOrders.map((o) => {
              const items = o.order_data?.items ?? []
              return (
                <Card key={o.id} className="glass-dark border-white/10 hover:border-white/20 transition-colors">
                  <CardContent className="p-6 space-y-4">
                    {/* Kopfzeile */}
                    <div className="flex items-start justify-between gap-4 flex-wrap">
                      <div className="space-y-1">
                        <p className="text-xs text-slate-500 uppercase tracking-wider">Anfragenummer</p>
                        <p className="font-mono font-bold text-primary text-lg">#{o.order_number}</p>
                      </div>
                      <div className="space-y-1 text-right">
                        <p className="text-xs text-slate-500 uppercase tracking-wider">Datum</p>
                        <p className="text-white text-sm">
                          {new Date(o.created_at).toLocaleDateString('de-DE', {
                            day: '2-digit', month: '2-digit', year: 'numeric',
                          })}
                        </p>
                      </div>
                      <div className="space-y-1">
                        <p className="text-xs text-slate-500 uppercase tracking-wider">Status</p>
                        <Badge className={statusClass[o.status] ?? 'bg-slate-500/20 text-slate-300'}>
                          {statusLabel[o.status] ?? o.status}
                        </Badge>
                      </div>
                      <div className="space-y-1 text-right">
                        <p className="text-xs text-slate-500 uppercase tracking-wider">Gesamt</p>
                        <p className="font-bold text-white text-lg">
                          {new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(o.total_price)}
                        </p>
                      </div>
                    </div>

                    {/* Produkte kurz */}
                    {items.length > 0 && (
                      <div className="flex flex-wrap gap-2 pt-1">
                        {items.map((item, idx) => (
                          <span
                            key={idx}
                            className="text-xs bg-white/5 border border-white/10 rounded-xl px-3 py-1.5 text-slate-300"
                          >
                            <span className="font-semibold text-white mr-1">{item.device_name || 'Kasse'}:</span>
                            {item.product_name}
                            {item.selected_modules.length > 0 && (
                              <span className="text-slate-500 ml-1">
                                (+{item.selected_modules.length} {item.selected_modules.length === 1 ? 'Modul' : 'Module'})
                              </span>
                            )}
                          </span>
                        ))}
                      </div>
                    )}

                    {/* Aktionen */}
                    <div className="flex gap-2 flex-wrap pt-1">
                      <Link href={`/order/success?id=${o.id}`}>
                        <Button variant="outline" size="sm" className="border-white/10 hover:bg-white/10 text-xs">
                          Details ansehen
                        </Button>
                      </Link>
                      {o.status !== 'completed' && (
                        <Link href={`/order?id=${o.id}`}>
                          <Button variant="outline" size="sm" className="border-amber-500/20 hover:bg-amber-500/10 hover:border-amber-500/40 text-amber-400 text-xs">
                            Bearbeiten
                          </Button>
                        </Link>
                      )}
                      {o.pdf_url && (
                        <>
                          <Button variant="ghost" size="sm" asChild className="text-xs text-slate-400 hover:text-white">
                            <a href={`/api/orders/${o.id}/download?inline=true`} target="_blank" rel="noopener noreferrer">
                              <ExternalLink className="w-3 h-3 mr-1" /> Anfrage ansehen
                            </a>
                          </Button>
                          <Button variant="ghost" size="sm" asChild className="text-xs text-slate-400 hover:text-white">
                            <a href={`/api/orders/${o.id}/download`} download>
                              <Download className="w-3 h-3 mr-1" /> PDF
                            </a>
                          </Button>
                        </>
                      )}
                    </div>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        )}

        {/* Paginierung (10 pro Seite) */}
        {totalPages > 1 && (
          <div className="flex items-center justify-between pt-4 border-t border-white/10">
            <span className="text-xs text-slate-400">
              Seite <span className="text-white font-bold">{currentPage}</span> von <span className="text-white font-bold">{totalPages}</span>
            </span>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                disabled={currentPage === 1}
                className="border-white/10 text-xs gap-1"
              >
                <ChevronLeft className="w-4 h-4" /> Vorherige
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                disabled={currentPage === totalPages}
                className="border-white/10 text-xs gap-1"
              >
                Nächste <ChevronRight className="w-4 h-4" />
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}