'use client';

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

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

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

  const handleCopy = (label: string, code: string) => {
    navigator.clipboard.writeText(code);
    toast.success(`${label} Copied!`);
  };

  if (isLoading) {
    return <div className="p-4 text-xs animate-pulse text-muted-foreground">Loading institute 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">
            <GraduationCap className="h-4 w-4 text-primary" /> Direct Institute — Coupon Inventory
          </h3>
          <p className="text-[11px] text-muted-foreground mt-0.5">
            Coupons purchased into your own Institute, including Kit bundles with exam sub-codes — fully separate
            from your Territory and Reseller pools.
          </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} Coupons
        </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} {coupon.group?.type === 'KIT' && '· KIT'}
                </span>
                <span className="text-[10px] font-mono text-muted-foreground">
                  {new Date(coupon.createdAt).toLocaleDateString()}
                </span>
              </div>

              <p className="text-xs font-mono font-bold text-foreground">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: {coupon.isHidden ? '••••-••••-••••' : coupon.officialCode}
                </span>
                <Button size="sm" variant="ghost" onClick={() => handleCopy('Official Code', coupon.officialCode)} className="h-6 w-6 p-0">
                  <Copy className="h-3 w-3" />
                </Button>
              </div>

              {coupon.group?.type === 'KIT' && coupon.examCode && (
                <div className="flex items-center justify-between bg-amber-500/5 border border-amber-500/20 p-1.5 rounded">
                  <span className="text-[11px] font-mono font-semibold text-amber-600 flex items-center gap-1">
                    <KeyRound className="h-3 w-3" /> Exam: {coupon.examOfficialCode || coupon.examCode}
                  </span>
                  <Button size="sm" variant="ghost" onClick={() => handleCopy('Exam Code', coupon.examOfficialCode || coupon.examCode!)} className="h-6 w-6 p-0">
                    <Copy className="h-3 w-3" />
                  </Button>
                </div>
              )}
            </div>
          ))}
        </div>
      ) : (
        <div className="p-8 text-center text-xs text-muted-foreground border border-dashed border-border/40 rounded-xl">
          No coupons in your Institute inventory yet. Raise a Purchase Order as your Institute persona to stock it.
        </div>
      )}
    </div>
  );
}