import { useState, useMemo } from "react"
import { apiFetch } from '@/utils/api';
import { useQuery } from "@tanstack/react-query"
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, 
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from "@/components/ui/table"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Skeleton } from "@/components/ui/skeleton"
import { History, ChevronDown, ChevronRight, ChevronLeft, ExternalLink } from "lucide-react"
import config from "@/config"

function useCampaignData(open: boolean) {
  const campaigns = useQuery<CampaignsResponse>({
    queryKey: ["newsletter-campaigns"],
    queryFn: async () => {
      const res = await apiFetch(`${config.apiUrl}/newsletter/campaigns`)
      if (!res.ok) throw new Error("Failed to fetch campaigns")
      return res.json()
    },
    enabled: open,
    staleTime: 5 * 60_000,
  })

  const products = useQuery<{ products: ProductAggregate[] }>({
    queryKey: ["newsletter-campaigns-products"],
    queryFn: async () => {
      const res = await apiFetch(`${config.apiUrl}/newsletter/campaigns/products`)
      if (!res.ok) throw new Error("Failed to fetch")
      return res.json()
    },
    enabled: open,
    staleTime: 5 * 60_000,
  })

  const links = useQuery<{ links: LinkAggregate[] }>({
    queryKey: ["newsletter-campaigns-links"],
    queryFn: async () => {
      const res = await apiFetch(`${config.apiUrl}/newsletter/campaigns/links`)
      if (!res.ok) throw new Error("Failed to fetch")
      return res.json()
    },
    enabled: open,
    staleTime: 5 * 60_000,
  })

  const brands = useQuery<{ brands: BrandAggregate[] }>({
    queryKey: ["newsletter-campaigns-brands"],
    queryFn: async () => {
      const res = await apiFetch(`${config.apiUrl}/newsletter/campaigns/brands`)
      if (!res.ok) throw new Error("Failed to fetch")
      return res.json()
    },
    enabled: open,
    staleTime: 5 * 60_000,
  })

  return { campaigns, products, brands, links }
}

// ── Types ────────────────────────────────────────────

interface CampaignProduct {
  pid: number
  title: string
  sku: string
  brand: string | null
  line: string | null
  image: string | null
  product_url: string | null
}

interface CampaignLink {
  link_url: string
  link_type: string
}

interface Campaign {
  campaign_id: string
  campaign_name: string
  sent_at: string
  product_count: number
  products: CampaignProduct[]
  links: CampaignLink[]
}

interface CampaignSummary {
  total_campaigns: number
  total_unique_products: number
  avg_products_per_campaign: number
}

interface CampaignsResponse {
  campaigns: Campaign[]
  summary: CampaignSummary
}

interface ProductAggregate {
  pid: number
  title: string
  sku: string
  brand: string
  image: string | null
  permalink: string | null
  times_featured: number
  first_featured_at: string
  last_featured_at: string
  days_since_featured: number
  featured_span_days: number
  avg_days_between_features: number | null
  campaigns: { campaign_id: string; campaign_name: string; sent_at: string }[]
}

interface BrandAggregate {
  brand: string
  product_count: number
  times_featured: number
  first_featured_at: string
  last_featured_at: string
  days_since_featured: number
  avg_days_between_features: number | null
  campaigns: { campaign_id: string; campaign_name: string; sent_at: string }[]
}

interface LinkAggregate {
  link_url: string
  link_type: string
  times_used: number
  first_used_at: string
  last_used_at: string
  days_since_used: number
  campaign_names: string[]
}

// ── Campaign Row (expandable) ────────────────────────

function CampaignRow({ campaign }: { campaign: Campaign }) {
  const [expanded, setExpanded] = useState(false)

  return (
    <>
      <TableRow
        className="cursor-pointer hover:bg-muted/50"
        onClick={() => setExpanded(!expanded)}
      >
        <TableCell className="w-[30px]">
          {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
        </TableCell>
        <TableCell className="font-medium text-sm">{campaign.campaign_name || campaign.campaign_id}</TableCell>
        <TableCell className="text-sm text-muted-foreground">
          {campaign.sent_at ? new Date(campaign.sent_at).toLocaleDateString() : "—"}
        </TableCell>
        <TableCell className="text-right text-sm">{campaign.product_count}</TableCell>
        <TableCell className="text-right text-sm">{campaign.links.length}</TableCell>
      </TableRow>
      {expanded && (
        <TableRow>
          <TableCell colSpan={5} className="p-0">
            <div className="bg-muted/30 p-3 space-y-3">
              <div>
                <p className="text-xs font-semibold mb-1.5">Products ({campaign.products.length})</p>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-1.5" style={{ gridAutoFlow: "column", gridTemplateRows: `repeat(${Math.ceil(campaign.products.length / 2)}, minmax(0, auto))` }}>
                  {campaign.products.map((p) => (
                    <div key={p.pid} className="flex items-center gap-2 text-xs bg-background rounded px-2 py-1">
                      {p.image ? (
                        <img src={p.image} alt="" className="w-6 h-6 object-cover rounded shrink-0" />
                      ) : (
                        <div className="w-6 h-6 bg-muted rounded shrink-0" />
                      )}
                      <span className="truncate flex-1">{p.title}</span>
                      <span className="text-muted-foreground shrink-0">{p.pid}</span>
                      {p.product_url && (
                        <a href={p.product_url} target="_blank" rel="noopener noreferrer"
                           className="text-muted-foreground hover:text-foreground shrink-0"
                           onClick={(e) => e.stopPropagation()}>
                          <ExternalLink className="h-3 w-3" />
                        </a>
                      )}
                    </div>
                  ))}
                </div>
              </div>
              {campaign.links.length > 0 && (
                <div>
                  <p className="text-xs font-semibold mb-1.5">Links ({campaign.links.length})</p>
                  <div className="space-y-1">
                    {campaign.links.map((l, i) => (
                      <div key={i} className="flex items-center gap-2 text-xs">
                        <Badge variant="outline" className="text-[10px] px-1.5 py-0">{l.link_type || "other"}</Badge>
                        <a href={l.link_url} target="_blank" rel="noopener noreferrer"
                           className="text-blue-500 hover:underline truncate"
                           onClick={(e) => e.stopPropagation()}>
                          {l.link_url}
                        </a>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </TableCell>
        </TableRow>
      )}
    </>
  )
}

// ── Product Row (expandable campaign list) ───────────

function ProductRow({ product }: { product: ProductAggregate }) {
  const [expanded, setExpanded] = useState(false)

  return (
    <>
      <TableRow
        className="cursor-pointer hover:bg-muted/50"
        onClick={() => setExpanded(!expanded)}
      >
        <TableCell className="w-[30px]">
          {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
        </TableCell>
        <TableCell>
          <div className="flex items-center gap-2 max-w-[400px]">
            {product.image ? (
              <img src={product.image} alt="" className="w-7 h-7 object-cover rounded shrink-0" />
            ) : (
              <div className="w-7 h-7 bg-muted rounded shrink-0" />
            )}
            <div className="min-w-0">
              <p className="text-sm font-medium truncate">{product.title}</p>
              <p className="text-xs text-muted-foreground">{product.sku}</p>
            </div>
          </div>
        </TableCell>
        <TableCell className="text-sm">{product.brand}</TableCell>
        <TableCell className="text-right text-sm font-medium">{product.times_featured}×</TableCell>
        <TableCell className="text-sm text-muted-foreground">
          {product.first_featured_at ? new Date(product.first_featured_at).toLocaleDateString() : "—"}
        </TableCell>
        <TableCell className="text-sm text-muted-foreground">
          {product.days_since_featured === 0 ? "Today" : `${product.days_since_featured}d ago`}
        </TableCell>
        <TableCell className="text-sm text-muted-foreground text-right">
          {product.avg_days_between_features != null ? `${product.avg_days_between_features}d` : "—"}
        </TableCell>
        <TableCell className="w-[30px]">
          {product.permalink && (
            <a href={product.permalink} target="_blank" rel="noopener noreferrer"
               className="text-muted-foreground hover:text-foreground"
               onClick={(e) => e.stopPropagation()}>
              <ExternalLink className="h-3.5 w-3.5" />
            </a>
          )}
        </TableCell>
      </TableRow>
      {expanded && (
        <TableRow>
          <TableCell colSpan={8} className="p-0">
            <div className="bg-muted/30 p-3">
              <p className="text-xs font-semibold mb-1.5">Campaigns ({product.campaigns.length})</p>
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-1">
                {product.campaigns.map((c) => (
                  <div key={c.campaign_id} className="flex items-center gap-2 text-xs bg-background rounded px-2 py-1">
                    <span className="text-muted-foreground shrink-0">
                      {c.sent_at ? new Date(c.sent_at).toLocaleDateString() : "—"}
                    </span>
                    <span className="truncate">{c.campaign_name || c.campaign_id}</span>
                  </div>
                ))}
              </div>
            </div>
          </TableCell>
        </TableRow>
      )}
    </>
  )
}

// ── Skeleton loader ──────────────────────────────────

function TableSkeleton({ rows = 8 }: { rows?: number }) {
  return (
    <div className="p-4 space-y-3">
      {Array.from({ length: rows }).map((_, i) => <Skeleton key={i} className="h-8 w-full" />)}
    </div>
  )
}

// ── Tab: Campaigns ───────────────────────────────────

function CampaignsTab({ data, isLoading }: { data: CampaignsResponse | undefined; isLoading: boolean }) {
  return (
    <div className="space-y-4">
      {isLoading ? (
        <div className="grid grid-cols-3 gap-4">
          {Array.from({ length: 3 }).map((_, i) => (
            <Card key={i}><CardContent className="p-3"><Skeleton className="h-3 w-24 mb-1" /><Skeleton className="h-7 w-12" /></CardContent></Card>
          ))}
        </div>
      ) : data?.summary ? (
        <div className="grid grid-cols-3 gap-4">
          <Card>
            <CardContent className="p-3">
              <p className="text-xs text-muted-foreground">Total Campaigns</p>
              <p className="text-xl font-bold">{Number(data.summary.total_campaigns).toLocaleString()}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-3">
              <p className="text-xs text-muted-foreground">Unique Products Featured</p>
              <p className="text-xl font-bold">{Number(data.summary.total_unique_products).toLocaleString()}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-3">
              <p className="text-xs text-muted-foreground">Avg Products / Campaign</p>
              <p className="text-xl font-bold">{data.summary.avg_products_per_campaign}</p>
            </CardContent>
          </Card>
        </div>
      ) : null}

      <div className="flex-1 overflow-auto rounded-md border max-h-[50vh]">
        {isLoading ? <TableSkeleton /> : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[30px]"></TableHead>
                <TableHead>Campaign</TableHead>
                <TableHead>Sent</TableHead>
                <TableHead className="text-right">Products</TableHead>
                <TableHead className="text-right">Links</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {data?.campaigns.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">No campaigns found</TableCell>
                </TableRow>
              ) : (
                data?.campaigns.map((c) => <CampaignRow key={c.campaign_id} campaign={c} />)
              )}
            </TableBody>
          </Table>
        )}
      </div>
    </div>
  )
}

// ── Tab: Products ────────────────────────────────────

const PRODUCTS_PAGE_SIZE = 500

function ProductsTab({ data, isLoading }: { data: { products: ProductAggregate[] } | undefined; isLoading: boolean }) {
  const [page, setPage] = useState(1)
  const allProducts = data?.products ?? []
  const totalPages = Math.ceil(allProducts.length / PRODUCTS_PAGE_SIZE)
  const pageProducts = useMemo(
    () => allProducts.slice((page - 1) * PRODUCTS_PAGE_SIZE, page * PRODUCTS_PAGE_SIZE),
    [allProducts, page]
  )

  return (
    <div className="space-y-2">
      <div className="flex-1 overflow-auto rounded-md border max-h-[55vh]">
        {isLoading ? <TableSkeleton /> : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[30px]"></TableHead>
                <TableHead>Product</TableHead>
                <TableHead>Brand</TableHead>
                <TableHead className="text-right">Featured</TableHead>
                <TableHead>First</TableHead>
                <TableHead>Last</TableHead>
                <TableHead className="text-right">Avg Gap</TableHead>
                <TableHead className="w-[30px]"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {pageProducts.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={8} className="text-center py-8 text-muted-foreground">No products found</TableCell>
                </TableRow>
              ) : (
                pageProducts.map((p) => <ProductRow key={p.pid} product={p} />)
              )}
            </TableBody>
          </Table>
        )}
      </div>
      {totalPages > 1 && (
        <div className="flex items-center justify-between">
          <p className="text-sm text-muted-foreground">
            {allProducts.length.toLocaleString()} products
          </p>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage(page - 1)}>
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <span className="text-sm">Page {page} of {totalPages}</span>
            <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage(page + 1)}>
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      )}
    </div>
  )
}

// ── Brand Row (expandable campaign list) ─────────────

function BrandRow({ brand }: { brand: BrandAggregate }) {
  const [expanded, setExpanded] = useState(false)

  return (
    <>
      <TableRow
        className="cursor-pointer hover:bg-muted/50"
        onClick={() => setExpanded(!expanded)}
      >
        <TableCell className="w-[30px]">
          {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
        </TableCell>
        <TableCell className="text-sm font-medium">{brand.brand}</TableCell>
        <TableCell className="text-right text-sm">{brand.product_count}</TableCell>
        <TableCell className="text-right text-sm font-medium">{brand.times_featured}×</TableCell>
        <TableCell className="text-sm text-muted-foreground">
          {brand.first_featured_at ? new Date(brand.first_featured_at).toLocaleDateString() : "—"}
        </TableCell>
        <TableCell className="text-sm text-muted-foreground">
          {brand.days_since_featured === 0 ? "Today" : `${brand.days_since_featured}d ago`}
        </TableCell>
        <TableCell className="text-sm text-muted-foreground text-right">
          {brand.avg_days_between_features != null ? `${brand.avg_days_between_features}d` : "—"}
        </TableCell>
      </TableRow>
      {expanded && (
        <TableRow>
          <TableCell colSpan={7} className="p-0">
            <div className="bg-muted/30 p-3">
              <p className="text-xs font-semibold mb-1.5">Campaigns ({brand.campaigns.length})</p>
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-1">
                {brand.campaigns.map((c) => (
                  <div key={c.campaign_id} className="flex items-center gap-2 text-xs bg-background rounded px-2 py-1">
                    <span className="text-muted-foreground shrink-0">
                      {c.sent_at ? new Date(c.sent_at).toLocaleDateString() : "—"}
                    </span>
                    <span className="truncate">{c.campaign_name || c.campaign_id}</span>
                  </div>
                ))}
              </div>
            </div>
          </TableCell>
        </TableRow>
      )}
    </>
  )
}

// ── Tab: Brands ──────────────────────────────────────

function BrandsTab({ data, isLoading }: { data: { brands: BrandAggregate[] } | undefined; isLoading: boolean }) {
  return (
    <div className="flex-1 overflow-auto rounded-md border max-h-[55vh]">
      {isLoading ? <TableSkeleton /> : (
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[30px]"></TableHead>
              <TableHead>Brand</TableHead>
              <TableHead className="text-right">Products</TableHead>
              <TableHead className="text-right">Featured</TableHead>
              <TableHead>First</TableHead>
              <TableHead>Last</TableHead>
              <TableHead className="text-right">Avg Gap</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data?.brands.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">No brands found</TableCell>
              </TableRow>
            ) : (
              data?.brands.map((b) => <BrandRow key={b.brand} brand={b} />)
            )}
          </TableBody>
        </Table>
      )}
    </div>
  )
}

// ── Tab: Links ───────────────────────────────────────

function LinksTab({ data, isLoading }: { data: { links: LinkAggregate[] } | undefined; isLoading: boolean }) {
  return (
    <div className="flex-1 overflow-auto rounded-md border max-h-[60vh]">
      {isLoading ? <TableSkeleton /> : (
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Link</TableHead>
              <TableHead>Type</TableHead>
              <TableHead className="text-right">Used</TableHead>
              <TableHead>First</TableHead>
              <TableHead>Last</TableHead>
              <TableHead className="text-right">Campaigns</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data?.links.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">No links found</TableCell>
              </TableRow>
            ) : (
              data?.links.map((l, i) => (
                <TableRow key={i}>
                  <TableCell className="max-w-[500px]">
                    <a href={l.link_url} target="_blank" rel="noopener noreferrer"
                       className="text-sm text-blue-500 hover:underline truncate block">
                      {l.link_url}
                    </a>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline" className="text-[10px] px-1.5 py-0">{l.link_type || "other"}</Badge>
                  </TableCell>
                  <TableCell className="text-right text-sm font-medium">{l.times_used}×</TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {l.first_used_at ? new Date(l.first_used_at).toLocaleDateString() : "—"}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {l.days_since_used === 0 ? "Today" : `${l.days_since_used}d ago`}
                  </TableCell>
                  <TableCell className="text-right text-sm text-muted-foreground">
                    {l.campaign_names?.length ?? 0}
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      )}
    </div>
  )
}

// ── Main Dialog ──────────────────────────────────────

export function CampaignHistoryDialog() {
  const [open, setOpen] = useState(false)
  const { campaigns, products, brands, links } = useCampaignData(open)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm">
          <History className="h-4 w-4 mr-2" />
          Campaign History
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-5xl max-h-[85vh] flex flex-col">
        <DialogHeader>
          <DialogTitle>Newsletter Campaign History</DialogTitle>
        </DialogHeader>

        <Tabs defaultValue="campaigns" className="">
          <TabsList>
            <TabsTrigger value="campaigns">Campaigns</TabsTrigger>
            <TabsTrigger value="products">Products</TabsTrigger>
            <TabsTrigger value="brands">Brands</TabsTrigger>
            <TabsTrigger value="links">Links</TabsTrigger>
          </TabsList>

          <TabsContent value="campaigns" forceMount className="flex-1 min-h-0 data-[state=inactive]:hidden">
            <CampaignsTab data={campaigns.data} isLoading={campaigns.isLoading} />
          </TabsContent>
          <TabsContent value="products" forceMount className="flex-1 min-h-0 data-[state=inactive]:hidden">
            <ProductsTab data={products.data} isLoading={products.isLoading} />
          </TabsContent>
          <TabsContent value="brands" forceMount className="flex-1 min-h-0 data-[state=inactive]:hidden">
            <BrandsTab data={brands.data} isLoading={brands.isLoading} />
          </TabsContent>
          <TabsContent value="links" forceMount className="flex-1 min-h-0 data-[state=inactive]:hidden">
            <LinksTab data={links.data} isLoading={links.isLoading} />
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  )
}
