'use client';

import React, { useState } from 'react';
import { Ticket, Copy } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useCoupons } from '@/services/coupons/queries';
import toast from 'react-hot-toast';

export default function DSOSelfCouponView() {
  const [page, setPage] = useState(1);

  // Strictly the Reseller pool — never mixes with Territory or Institute.
  const { data, isLoading } = useCoupons(page, '', '', 'mine', '', undefined, 'RESELLER');

  const handleCopy = (code: string) => {
    navigator.clipboard.writeText(code);
    toast.success('Official Coupon Code Copied!');
  };

  if (isLoading) {
    return <div className="p-4 text-xs animate-pulse text-muted-foreground">Loading self store inventory...</div>;
  }

  return (
    <div className="space-y-4 bg-surface border border-border/40 rounded-xl p-4 max-w-7xl mx-auto">
      <div className="flex items-center justify-between border-b border-border/20 pb-3">
        <div>
          <h3 className="text-xs font-bold uppercase tracking-wider text-foreground flex items-center gap-2">
            <Ticket className="h-4 w-4 text-primary" /> Direct Reseller Hub — Self Coupon Store
          </h3>
          <p className="text-[11px] text-muted-foreground mt-0.5">
            Coupons transferred or purchased directly for personal distribution — fully separate from your Territory pool.
          </p>
        </div>
        <span className="text-xs font-mono font-bold bg-primary/10 text-primary px-2.5 py-1 rounded-lg">
          {data?.total || 0} Self Coupons Available
        </span>
      </div>

      {data?.items && data.items.length > 0 ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          {data.items.map((coupon) => (
            <div key={coupon.id} className="p-3 border border-border/30 bg-muted/10 rounded-lg space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-[10px] font-bold uppercase bg-primary/10 text-primary px-2 py-0.5 rounded">
                  {coupon.group?.name}
                </span>
                <span className="text-[10px] font-mono text-muted-foreground">
                  {new Date(coupon.createdAt).toLocaleDateString()}
                </span>
              </div>

              <div className="space-y-1">
                <p className="text-xs font-mono font-bold text-foreground">Public Code: {coupon.code}</p>
                <div className="flex items-center justify-between bg-background p-1.5 rounded border border-border/30">
                  <span className="text-[11px] font-mono font-semibold text-emerald-600">
                    Official Code: {coupon.officialCode}
                  </span>
                  <Button size="sm" variant="ghost" onClick={() => handleCopy(coupon.officialCode)} className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground">
                    <Copy className="h-3 w-3" />
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="p-8 text-center text-xs text-muted-foreground border border-dashed border-border/40 rounded-xl">
          No self-store coupons yet. Raise a Purchase Order as your Reseller persona, or transfer coupons from
          your Territory Coupon Inventory.
        </div>
      )}
    </div>
  );
}