'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import type {
  FeatureFlag,
  FilterFlag,
  Package,
  PackagePlatform,
} from '@/network/apis/dashboard/packages/type';
import {
  RiEditLine,
  RiDeleteBinLine,
  RiMore2Line,
  RiCheckLine,
  RiCloseLine,
  RiTimeLine,
  RiStackLine,
  RiPriceTag3Line,
  RiArrowDownSLine,
  RiArrowUpSLine,
  RiUserLine,
  RiCalendarLine,
  RiGlobalLine,
} from '@remixicon/react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardHeader,
} from '@/components/ui/card';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import PackageDeleteDialog from '../PackageDeleteDialog/PackageDeleteDialog';

const platformIcons: Record<string, string> = {
  snapchat: '👻',
  tiktok: '🎵',
  instagram: '📸',
  youtube: '🎬',
  twitter: '𝕏',
  twitch: '🟣',
};

const platformIdNames: Record<number, string> = {
  1: 'Snapchat',
  2: 'TikTok',
  3: 'Instagram',
  4: 'YouTube',
  5: 'X (Twitter)',
  6: 'Twitch',
};

const Packages = ({ packages }: { packages: Package[] }) => {
  const router = useRouter();
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [packageSelected, setPackageSelected] = useState<Package | null>(null);
  const [expandedId, setExpandedId] = useState<number | null>(null);

  const handleDeletePackage = (pac: Package) => {
    setPackageSelected(pac);
    setDeleteDialogOpen(true);
  };

  const toggleExpand = (id: number) => {
    setExpandedId((prev) => (prev === id ? null : id));
  };

  const renderBool = (v?: boolean) =>
    v === false ? (
      <RiCloseLine className="size-3.5 text-red-400" />
    ) : (
      <RiCheckLine className="size-3.5 text-green-500" />
    );

  const formatDate = (d: string) => {
    if (!d) return '-';
    const parsed = new Date(d);
    if (isNaN(parsed.getTime())) return d;
    return parsed.toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    });
  };

  const pkgs = packages ?? [];

  return (
    <>
      {pkgs.length === 0 ? (
        <Card>
          <CardContent className="py-16 text-center">
            <RiPriceTag3Line className="size-12 text-muted-foreground/40 mx-auto mb-4" />
            <p className="font-medium text-muted-foreground">No packages found</p>
            <p className="text-sm text-muted-foreground/70 mt-1">Create your first package to get started.</p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
          {pkgs.map((pkg) => {
            const isExpanded = expandedId === pkg.id;
            const platformCount = pkg.platforms?.length ?? 0;
            const enabledPlatforms = pkg.platforms?.filter((p) => p.is_enabled !== false) ?? [];

            return (
              <Card key={pkg.id} className="relative overflow-hidden transition-shadow hover:shadow-md">
                <div className={`absolute top-0 left-0 right-0 h-1 ${pkg.is_active ? 'bg-green-500' : 'bg-amber-400'}`} />

                <CardHeader className="pb-3 pt-5">
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <h3 className="text-base font-semibold truncate">{pkg.name}</h3>
                        <Badge
                          variant={pkg.is_active ? 'success' : 'warning'}
                          appearance="outline"
                          className="text-[10px] px-1.5 py-0 shrink-0"
                        >
                          {pkg.is_active ? 'Active' : 'Inactive'}
                        </Badge>
                      </div>
                      {pkg.description && (
                        <p className="text-xs text-muted-foreground line-clamp-2">{pkg.description}</p>
                      )}
                    </div>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm" className="size-8 p-0 shrink-0">
                          <RiMore2Line className="size-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end" className="w-40">
                        <DropdownMenuItem onClick={() => router.push(`/packages/add/${pkg.id}`)}>
                          <RiEditLine className="size-4 mr-2" />
                          Edit
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                          className="text-destructive focus:text-destructive"
                          onClick={() => handleDeletePackage(pkg)}
                        >
                          <RiDeleteBinLine className="size-4 mr-2" />
                          Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </CardHeader>

                <CardContent className="pt-0 space-y-4">
                  <div className="flex items-baseline gap-1">
                    <span className="text-2xl font-bold">
                      {pkg.price ? `$${pkg.price}` : 'Free'}
                    </span>
                    {pkg.price > 0 && pkg.duration_in_days > 0 && (
                      <span className="text-xs text-muted-foreground">
                        / {pkg.duration_in_days} days
                      </span>
                    )}
                  </div>

                  <div className="grid grid-cols-2 gap-3">
                    <div className="flex items-center gap-2 text-sm">
                      <div className="size-8 rounded-lg bg-blue-50 dark:bg-blue-950/30 flex items-center justify-center">
                        <RiStackLine className="size-4 text-blue-500" />
                      </div>
                      <div>
                        <div className="text-xs text-muted-foreground">Requests</div>
                        <div className="font-medium text-sm">{pkg.number_of_requests ?? 0}</div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2 text-sm">
                      <div className="size-8 rounded-lg bg-purple-50 dark:bg-purple-950/30 flex items-center justify-center">
                        <RiTimeLine className="size-4 text-purple-500" />
                      </div>
                      <div>
                        <div className="text-xs text-muted-foreground">Duration</div>
                        <div className="font-medium text-sm">{pkg.duration_in_days ?? 0}d</div>
                      </div>
                    </div>
                  </div>

                  {(() => {
                    const balances = [
                      { label: 'Search', value: pkg.search_balance },
                      { label: 'Social Listening', value: pkg.social_listening_balance },
                      { label: 'Lookalike', value: pkg.lookalike_balance },
                      { label: 'Network', value: pkg.mynetwork_balance },
                      { label: 'Campaigns', value: pkg.campaign_balance },
                      { label: 'Competitor', value: pkg.competitor_analysis_balance },
                    ].filter((b) => b.value && b.value > 0);

                    if (balances.length === 0) return null;

                    return (
                      <div>
                        <div className="text-xs text-muted-foreground mb-1.5 font-medium">Balance Allocations</div>
                        <div className="grid grid-cols-2 gap-1">
                          {balances.map((b) => (
                            <div
                              key={b.label}
                              className="flex items-center justify-between text-xs bg-muted/50 rounded px-2 py-1"
                            >
                              <span className="text-muted-foreground">{b.label}</span>
                              <span className="font-medium">{b.value}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    );
                  })()}

                  {platformCount > 0 && (
                    <div>
                      <div className="text-xs text-muted-foreground mb-2 flex items-center gap-1">
                        <RiGlobalLine className="size-3" />
                        Platforms ({enabledPlatforms.length}/{platformCount})
                      </div>
                      <div className="flex flex-wrap gap-1.5">
                        <TooltipProvider delayDuration={200}>
                          {pkg.platforms?.map((p) => {
                            const name = p.platform_name ?? platformIdNames[p.platform_id] ?? `#${p.platform_id}`;
                            const emoji = platformIcons[name.toLowerCase()] ?? '🌐';
                            return (
                              <Tooltip key={p.id ?? p.platform_id}>
                                <TooltipTrigger asChild>
                                  <div
                                    className={`inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs border transition-colors ${
                                      p.is_enabled !== false
                                        ? 'bg-background border-border'
                                        : 'bg-muted/50 border-transparent text-muted-foreground opacity-60'
                                    }`}
                                  >
                                    <span>{emoji}</span>
                                    <span className="font-medium">{name}</span>
                                    <span className="text-muted-foreground">×{p.multiplier}</span>
                                  </div>
                                </TooltipTrigger>
                                <TooltipContent side="top" className="text-xs">
                                  <div className="space-y-1">
                                    <div className="font-medium">{name}</div>
                                    <div>Multiplier: {p.multiplier}x</div>
                                    <div>Status: {p.is_enabled !== false ? 'Enabled' : 'Disabled'}</div>
                                    {p.limits && Object.keys(p.limits).length > 0 && (
                                      <div>
                                        Limits: {Object.entries(p.limits).map(([k, v]) => `${k}: ${v}`).join(', ')}
                                      </div>
                                    )}
                                  </div>
                                </TooltipContent>
                              </Tooltip>
                            );
                          })}
                        </TooltipProvider>
                      </div>
                    </div>
                  )}

                  <div className="flex items-center gap-4 text-xs text-muted-foreground pt-1 border-t">
                    <div className="flex items-center gap-1">
                      <RiCalendarLine className="size-3" />
                      {formatDate(pkg.created_at)}
                    </div>
                    {pkg.created_by != null && (
                      <div className="flex items-center gap-1">
                        <RiUserLine className="size-3" />
                        ID: {pkg.created_by}
                      </div>
                    )}
                  </div>

                  {platformCount > 0 && (
                    <Button
                      variant="ghost"
                      size="sm"
                      className="w-full text-xs h-7"
                      onClick={() => toggleExpand(pkg.id)}
                    >
                      {isExpanded ? (
                        <>
                          <RiArrowUpSLine className="size-3.5 mr-1" />
                          Hide Details
                        </>
                      ) : (
                        <>
                          <RiArrowDownSLine className="size-3.5 mr-1" />
                          View Platform Details
                        </>
                      )}
                    </Button>
                  )}

                  {isExpanded && pkg.platforms && (
                    <div className="space-y-3 border-t pt-3">
                      {pkg.platforms.map((p: PackagePlatform) => {
                        const name = p.platform_name ?? platformIdNames[p.platform_id] ?? `Platform #${p.platform_id}`;
                        return (
                          <div key={p.id ?? p.platform_id} className="rounded-lg border bg-muted/20 p-3 space-y-2.5">
                            <div className="flex items-center justify-between">
                              <div className="flex items-center gap-2">
                                <span className="text-sm font-medium">{name}</span>
                                {renderBool(p.is_enabled !== false)}
                              </div>
                              <span className="text-xs text-muted-foreground">×{p.multiplier}</span>
                            </div>

                            {p.limits && Object.keys(p.limits).length > 0 && (
                              <div>
                                <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1 font-medium">Limits</div>
                                <div className="grid grid-cols-2 gap-1">
                                  {Object.entries(p.limits).map(([k, v]) => (
                                    <div key={k} className="flex items-center justify-between text-xs bg-background rounded px-2 py-1">
                                      <span className="text-muted-foreground capitalize">{k.replace(/_/g, ' ')}</span>
                                      <span className="font-medium">{String(v)}</span>
                                    </div>
                                  ))}
                                </div>
                              </div>
                            )}

                            {p.features && p.features.length > 0 && (
                              <div>
                                <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1 font-medium">Features</div>
                                <div className="flex flex-wrap gap-1">
                                  {p.features.map((f: FeatureFlag) => (
                                    <span
                                      key={f.feature_key}
                                      className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] ${
                                        f.is_enabled
                                          ? 'bg-green-50 dark:bg-green-950/30 text-green-700 dark:text-green-400'
                                          : 'bg-red-50 dark:bg-red-950/30 text-red-500 dark:text-red-400'
                                      }`}
                                    >
                                      {renderBool(f.is_enabled)}
                                      {f.feature_key.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/_/g, ' ')}
                                    </span>
                                  ))}
                                </div>
                              </div>
                            )}

                            {p.filters && p.filters.length > 0 && (
                              <div>
                                <div className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1 font-medium">Filters</div>
                                <div className="flex flex-wrap gap-1">
                                  {p.filters.map((f: FilterFlag) => (
                                    <span
                                      key={f.filter_key}
                                      className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] ${
                                        f.is_enabled
                                          ? 'bg-green-50 dark:bg-green-950/30 text-green-700 dark:text-green-400'
                                          : 'bg-red-50 dark:bg-red-950/30 text-red-500 dark:text-red-400'
                                      }`}
                                    >
                                      {renderBool(f.is_enabled)}
                                      {f.filter_key.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/_/g, ' ')}
                                    </span>
                                  ))}
                                </div>
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  )}
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}

      <PackageDeleteDialog
        open={deleteDialogOpen}
        closeDialog={() => setDeleteDialogOpen(false)}
        packageItem={packageSelected}
      />
    </>
  );
};

export { Packages };