starr-philproperties/src/modules/admin/pages/tiers/SystemBadges.jsx

import { useEffect, useState } from "react";
import { House, ShieldCheck, ImagePlus, X } from "lucide-react";
import { Button }    from "@/components/ui/button";
import { Input }     from "@/components/ui/input";
import { Textarea }  from "@/components/ui/textarea";
import { Separator } from "@/components/ui/separator";
import { Skeleton }  from "@/components/ui/skeleton";
import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
import { PageMeta }  from "@/contexts/MetadataContext";
import { AdminTierPoliciesProvider, useAdminTierPolicies } from "@/contexts/AdminTierPoliciesContext";
import { AssetPickerSheet } from "@/components/generic/AssetPickerSheet";
import { AssetsProvider }   from "@/contexts/AdminAssetsContext";

// ─── Badge editor card for a single system badge ──────────────────────────────

function SystemBadgeCard({ badge: initialBadge }) {
  const { saveSystemBadge, loading } = useAdminTierPolicies();

  const [badge,         setBadge]         = useState(initialBadge);
  // selectedAsset: newly chosen from picker (not yet saved)
  const [selectedAsset, setSelectedAsset] = useState(null);
  const [clearAsset,    setClearAsset]    = useState(false);
  const [pickerOpen,    setPickerOpen]    = useState(false);

  useEffect(() => {
    setBadge(initialBadge);
    setSelectedAsset(null);
    setClearAsset(false);
  }, [initialBadge]);

  const currentAsset = clearAsset ? null : (badge.asset ?? null);
  const displayAsset = selectedAsset ?? currentAsset;

  const handleSelect = (asset) => {
    setSelectedAsset(asset);
    setClearAsset(false);
  };

  const handleClear = () => {
    setSelectedAsset(null);
    setClearAsset(true);
  };

  const handleSave = async () => {
    const payload = {
      label:        badge.label        ?? "",
      description:  badge.description  ?? "",
      information:  badge.information  ?? "",
      active_from:  badge.active_from  ?? null,
      active_until: badge.active_until ?? null,
    };

    if (selectedAsset) {
      payload.asset_id = selectedAsset.asset_id;
    } else if (clearAsset) {
      payload.asset_id = null;
    }

    const saved = await saveSystemBadge(badge.key, payload);
    if (saved) {
      setBadge(saved);
      setSelectedAsset(null);
      setClearAsset(false);
    }
  };

  return (
    <div className="rounded-lg border bg-card p-5 space-y-4">
      <div className="flex items-center gap-2">
        <ShieldCheck className="h-4 w-4 text-muted-foreground" />
        <h2 className="text-sm font-semibold capitalize">{badge.label || badge.key}</h2>
        <span className="ml-auto text-xs text-muted-foreground font-mono">{badge.key}</span>
      </div>
      <Separator />

      {/* ── Image picker ── */}
      <div className="space-y-2">
        <div className="flex items-center gap-4">
          {displayAsset ? (
            <div className="w-16 h-16 rounded-lg border bg-muted flex items-center justify-center overflow-hidden">
              <img src={displayAsset.file_url} alt={displayAsset.display_name} className="w-12 h-12 object-contain" />
            </div>
          ) : (
            <div className="w-16 h-16 rounded-lg border bg-muted flex items-center justify-center text-muted-foreground">
              <ShieldCheck className="h-6 w-6" />
            </div>
          )}
          <div className="flex flex-col gap-1.5">
            <Button type="button" variant="outline" size="sm" onClick={() => setPickerOpen(true)}>
              <ImagePlus className="h-3.5 w-3.5 mr-1.5" />
              {displayAsset ? "Change image" : "Pick from files"}
            </Button>
            {displayAsset && (
              <Button type="button" variant="ghost" size="sm" className="text-destructive hover:text-destructive" onClick={handleClear}>
                <X className="h-3.5 w-3.5 mr-1.5" />
                Remove
              </Button>
            )}
          </div>
        </div>
        {displayAsset && (
          <p className="text-xs text-muted-foreground truncate max-w-xs">{displayAsset.display_name}</p>
        )}
        <AssetPickerSheet
          open={pickerOpen}
          onOpenChange={setPickerOpen}
          fileType="image"
          onSelect={handleSelect}
        />
      </div>

      {/* ── Label / Description / Information ── */}
      <div className="grid grid-cols-1 gap-3">
        <div>
          <label className="text-xs text-muted-foreground uppercase tracking-wide block mb-1">Label</label>
          <Input value={badge.label ?? ""} onChange={(e) => setBadge((p) => ({ ...p, label: e.target.value }))} />
        </div>
        <div>
          <label className="text-xs text-muted-foreground uppercase tracking-wide block mb-1">Description</label>
          <Input value={badge.description ?? ""} onChange={(e) => setBadge((p) => ({ ...p, description: e.target.value }))} />
        </div>
        <div>
          <label className="text-xs text-muted-foreground uppercase tracking-wide block mb-1">Information</label>
          <Textarea value={badge.information ?? ""} onChange={(e) => setBadge((p) => ({ ...p, information: e.target.value }))} rows={2} />
        </div>
      </div>

      {/* ── Active window ── */}
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="text-xs text-muted-foreground uppercase tracking-wide block mb-1">Active From</label>
          <Input
            type="date"
            value={badge.active_from ?? ""}
            onChange={(e) => setBadge((p) => ({ ...p, active_from: e.target.value || null }))}
          />
        </div>
        <div>
          <label className="text-xs text-muted-foreground uppercase tracking-wide block mb-1">Active Until</label>
          <Input
            type="date"
            value={badge.active_until ?? ""}
            onChange={(e) => setBadge((p) => ({ ...p, active_until: e.target.value || null }))}
          />
        </div>
      </div>

      <div className="flex justify-end">
        <Button size="sm" onClick={handleSave} disabled={loading}>
          {loading ? "Saving…" : "Save Badge"}
        </Button>
      </div>
    </div>
  );
}

// ─── Always show early_access even before DB row exists ───────────────────────

const DEFAULT_SYSTEM_BADGES = [
  { key: "early_access", label: "Early Access", description: "", information: "", asset: null, active_from: null, active_until: null },
];

// ─── Inner page ───────────────────────────────────────────────────────────────

function SystemBadgesInner() {
  const { fetchSystemBadges, systemBadges, loading } = useAdminTierPolicies();

  useEffect(() => { fetchSystemBadges(); }, []);

  const merged = DEFAULT_SYSTEM_BADGES.map((def) => {
    const fetched = systemBadges.find((b) => b.key === def.key);
    return fetched ?? def;
  });

  const breadcrumbItems = [
    { label: "Home",  icon: <House className="size-4" />, to: "/admin" },
    { label: "Plans", to: "/admin/tiers/plans" },
    { label: "System Badges" },
  ];

  return (
    <section className="bg-muted/60 min-h-full">
      <PageMeta title="System Badges - STARR" />
      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4 py-10">
        <div className="w-full max-w-2xl mx-auto">

          <div className="flex flex-col gap-2 mb-6">
            <AppBreadcrumb items={breadcrumbItems} />
          </div>

          <div className="mb-6">
            <h1 className="text-xl font-semibold">System Badges</h1>
            <p className="text-sm text-muted-foreground">Special badges awarded outside of subscription plans.</p>
          </div>

          {loading && systemBadges.length === 0 ? (
            <div className="space-y-4">
              {[1, 2].map((i) => <Skeleton key={i} className="h-64 w-full rounded-lg" />)}
            </div>
          ) : (
            <div className="space-y-5">
              {merged.map((badge) => (
                <SystemBadgeCard key={badge.key} badge={badge} />
              ))}
            </div>
          )}

        </div>
      </div>
    </section>
  );
}

export default function SystemBadges() {
  return (
    <AssetsProvider>
      <AdminTierPoliciesProvider>
        <SystemBadgesInner />
      </AdminTierPoliciesProvider>
    </AssetsProvider>
  );
}