import { useState, useEffect, useMemo } from "react"
import { useLanguage } from "@/contexts/LanguageContext"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { 
  Table, 
  TableBody, 
  TableCell, 
  TableHead, 
  TableHeader, 
  TableRow 
} from "@/components/ui/table"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Plus, Search, Edit, Trash2, Wallet, Filter, X } from "lucide-react"
import { Label } from "@/components/ui/label"
import axios from "axios"
import { toast } from "sonner"
import { WalletDialog } from "@/components/dialogs/WalletDialog"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

interface Wallet {
  id: string
  name: string
  kind: "money" | "asset"
  currency?: string | null
  unit?: string | null
  deletedAt?: string | null
  createdAt: string
  updatedAt: string
}

const API = "/api"

export function Wallets() {
  const { t } = useLanguage()
  const [wallets, setWallets] = useState<Wallet[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [kindFilter, setKindFilter] = useState<string>("all")
  const [currencyFilter, setCurrencyFilter] = useState<string>("all")
  const [showFilters, setShowFilters] = useState(false)
  const [walletDialogOpen, setWalletDialogOpen] = useState(false)
  const [editingWallet, setEditingWallet] = useState<Wallet | null>(null)

  useEffect(() => {
    loadWallets()
  }, [])

  const loadWallets = async () => {
    try {
      setLoading(true)
      const response = await axios.get(`${API}/wallets`)
      setWallets(response.data.filter((w: Wallet) => !w.deletedAt))
    } catch (error) {
      console.error('Failed to load wallets:', error)
    } finally {
      setLoading(false)
    }
  }

  const deleteWallet = async (id: string) => {
    try {
      await axios.delete(`${API}/wallets/${id}`)
      toast.success('Wallet berhasil dihapus')
      await loadWallets()
    } catch (error) {
      console.error('Failed to delete wallet:', error)
      toast.error('Gagal menghapus wallet')
    }
  }

  const handleEditWallet = (wallet: Wallet) => {
    setEditingWallet(wallet)
    setWalletDialogOpen(true)
  }

  const handleDialogClose = () => {
    setWalletDialogOpen(false)
    setEditingWallet(null)
  }

  const clearFilters = () => {
    setSearchTerm("")
    setKindFilter("all")
    setCurrencyFilter("all")
  }

  // Filter wallets
  const filteredWallets = useMemo(() => {
    return wallets.filter(wallet => {
      const matchesSearch = wallet.name.toLowerCase().includes(searchTerm.toLowerCase())
      const matchesKind = kindFilter === "all" || wallet.kind === kindFilter
      const matchesCurrency = currencyFilter === "all" || wallet.currency === currencyFilter || wallet.unit === currencyFilter
      return matchesSearch && matchesKind && matchesCurrency
    })
  }, [wallets, searchTerm, kindFilter, currencyFilter])

  // Get unique currencies for filter
  const availableCurrencies = useMemo(() => {
    const currencies = new Set(wallets.map(w => w.currency).filter(Boolean) as string[])
    return Array.from(currencies).sort()
  }, [wallets])

  // Calculate stats
  const stats = useMemo(() => {
    const totalWallets = filteredWallets.length
    const moneyWallets = filteredWallets.filter(w => w.kind === 'money').length
    const assetWallets = filteredWallets.filter(w => w.kind === 'asset').length
    const currencyCount = new Set(filteredWallets.map(w => w.currency).filter(Boolean)).size

    return { totalWallets, moneyWallets, assetWallets, currencyCount }
  }, [filteredWallets])

  if (loading) {
    return (
      <div className="space-y-6">
        <div className="h-8 w-48 bg-gray-200 rounded animate-pulse" />
        <div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
          {[...Array(4)].map((_, i) => (
            <Card key={i}>
              <CardHeader>
                <div className="h-4 w-20 bg-gray-200 rounded animate-pulse" />
              </CardHeader>
              <CardContent>
                <div className="h-8 w-16 bg-gray-200 rounded animate-pulse" />
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="space-y-4">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Wallets</h1>
            <p className="text-muted-foreground">
              Manage your wallets and accounts
            </p>
          </div>
          <div className="flex gap-2 sm:flex-shrink-0">
            <Button variant="outline" onClick={() => setShowFilters(!showFilters)}>
              <Filter className="mr-2 h-4 w-4" />
              {showFilters ? 'Hide Filters' : 'Show Filters'}
            </Button>
            <Button onClick={() => setWalletDialogOpen(true)}>
              <Plus className="mr-2 h-4 w-4" />
              {t.wallets.addWallet}
            </Button>
          </div>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t.wallets.title}</CardTitle>
            <Wallet className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.totalWallets}</div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t.wallets.moneyWallets}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.moneyWallets}</div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t.wallets.assetWallets}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.assetWallets}</div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t.wallets.currency}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.currencyCount}</div>
          </CardContent>
        </Card>
      </div>

      {/* Filters */}
      {showFilters && (
        <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between">
            <CardTitle className="text-base">{t.common.filter}</CardTitle>
            <Button
              variant="ghost"
              size="sm"
              onClick={clearFilters}
              className="h-7 px-2"
            >
              <X className="h-3 w-3 mr-1" />
              Clear All
            </Button>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Row 1: Search, Type, Currency */}
          <div className="grid gap-3 md:grid-cols-3">
            {/* Search */}
            <div className="space-y-2">
              <Label className="text-xs font-medium text-muted-foreground">{t.common.search}</Label>
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder={t.wallets.searchPlaceholder}
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-9 h-9"
                />
              </div>
            </div>

            {/* Type Filter */}
            <div className="space-y-2">
              <Label className="text-xs font-medium text-muted-foreground">{t.wallets.type}</Label>
              <Select value={kindFilter} onValueChange={setKindFilter}>
                <SelectTrigger className="h-9">
                  <SelectValue placeholder={t.common.all} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">{t.common.all}</SelectItem>
                  <SelectItem value="money">{t.wallets.money}</SelectItem>
                  <SelectItem value="asset">{t.wallets.asset}</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Currency Filter */}
            <div className="space-y-2">
              <Label className="text-xs font-medium text-muted-foreground">{t.wallets.currency}/{t.wallets.unit}</Label>
              <Select value={currencyFilter} onValueChange={setCurrencyFilter}>
                <SelectTrigger className="h-9">
                  <SelectValue placeholder={t.common.all} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">{t.common.all}</SelectItem>
                  {availableCurrencies.map(currency => (
                    <SelectItem key={currency} value={currency}>
                      {currency}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
        </Card>
      )}

      {/* Active Filters Badge */}
      {(searchTerm || kindFilter !== "all" || currencyFilter !== "all") && (
        <div className="flex flex-wrap gap-2">
          {searchTerm && (
            <div className="inline-flex items-center gap-1 px-2.5 py-1 bg-primary/10 text-primary rounded-md text-xs">
              <Search className="h-3 w-3" />
              {searchTerm}
              <button onClick={() => setSearchTerm("")} className="ml-1 hover:bg-primary/20 rounded-full p-0.5">
                <X className="h-3 w-3" />
              </button>
            </div>
          )}
          {kindFilter !== "all" && (
            <div className="inline-flex items-center gap-1 px-2.5 py-1 bg-primary/10 text-primary rounded-md text-xs">
              Type: {kindFilter === "money" ? "Money" : "Asset"}
              <button onClick={() => setKindFilter("all")} className="ml-1 hover:bg-primary/20 rounded-full p-0.5">
                <X className="h-3 w-3" />
              </button>
            </div>
          )}
          {currencyFilter !== "all" && (
            <div className="inline-flex items-center gap-1 px-2.5 py-1 bg-primary/10 text-primary rounded-md text-xs">
              Currency: {currencyFilter}
              <button onClick={() => setCurrencyFilter("all")} className="ml-1 hover:bg-primary/20 rounded-full p-0.5">
                <X className="h-3 w-3" />
              </button>
            </div>
          )}
        </div>
      )}

      {/* Wallets Table */}
      <Card>
        <CardHeader>
          <CardTitle>{t.wallets.title} ({filteredWallets.length})</CardTitle>
          <CardDescription>
            {filteredWallets.length !== wallets.length
              ? `Filtered from ${wallets.length} total wallets`
              : "All your wallets"
            }
          </CardDescription>
        </CardHeader>
        <CardContent className="px-0">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>{t.wallets.name}</TableHead>
                  <TableHead>{t.wallets.currency}/{t.wallets.unit}</TableHead>
                  <TableHead>{t.wallets.type}</TableHead>
                  <TableHead>{t.common.date}</TableHead>
                  <TableHead className="text-right">{t.common.actions}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredWallets.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center py-8">
                      {filteredWallets.length !== wallets.length
                        ? t.wallets.noWallets
                        : t.wallets.createFirst
                      }
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredWallets.map((wallet) => (
                    <TableRow key={wallet.id}>
                      <TableCell className="font-medium text-nowrap">{wallet.name}</TableCell>
                      <TableCell>
                        {wallet.kind === 'money' ? (
                          <Badge variant="outline" className="text-nowrap">{wallet.currency}</Badge>
                        ) : (
                          <Badge variant="outline" className="text-nowrap">{wallet.unit}</Badge>
                        )}
                      </TableCell>
                      <TableCell>
                        <Badge 
                          variant="outline"
                          className={`text-nowrap ${wallet.kind === 'money' ? 'bg-[var(--chart-1)]/20 text-[var(--chart-1)] ring-1 ring-[var(--chart-1)]' : 'bg-[var(--chart-2)]/20 text-[var(--chart-2)] ring-1 ring-[var(--chart-2)]'}`}
                        >
                          {wallet.kind}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        {new Date(wallet.createdAt).toLocaleDateString()}
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button variant="ghost" size="sm" onClick={() => handleEditWallet(wallet)}>
                            <Edit className="h-4 w-4" />
                          </Button>
                          <AlertDialog>
                            <AlertDialogTrigger asChild>
                              <Button variant="ghost" size="sm">
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </AlertDialogTrigger>
                            <AlertDialogContent>
                              <AlertDialogHeader>
                                <AlertDialogTitle>{t.common.delete} {t.wallets.title}</AlertDialogTitle>
                                <AlertDialogDescription>
                                  {t.wallets.deleteConfirm}
                                </AlertDialogDescription>
                              </AlertDialogHeader>
                              <AlertDialogFooter>
                                <AlertDialogCancel>{t.common.cancel}</AlertDialogCancel>
                                <AlertDialogAction onClick={() => deleteWallet(wallet.id)}>
                                  {t.common.delete}
                                </AlertDialogAction>
                              </AlertDialogFooter>
                            </AlertDialogContent>
                          </AlertDialog>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
        </CardContent>
      </Card>

      {/* Dialog */}
      <WalletDialog
        open={walletDialogOpen}
        onOpenChange={handleDialogClose}
        wallet={editingWallet}
        onSuccess={loadWallets}
      />
    </div>
  )
}