"use client";

import { useState } from "react";
import { HelpCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { AssetGallery } from "@/components/asset-gallery";
import { PostizPushModal } from "@/components/postiz-push-modal";

export default function GlobalAssetsPage() {
  const [pushModalIds, setPushModalIds] = useState<string[] | null>(null);
  const [helpOpen, setHelpOpen] = useState(false);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold">Asset Library</h1>
        <Button variant="outline" size="sm" onClick={() => setHelpOpen(true)}>
          <HelpCircle className="mr-2 h-4 w-4" />
          How This Works
        </Button>
      </div>
      <AssetGallery onPushToPostiz={(ids) => setPushModalIds(ids)} />
      {pushModalIds && (
        <PostizPushModal
          assetIds={pushModalIds}
          onClose={() => setPushModalIds(null)}
        />
      )}

      <Dialog open={helpOpen} onOpenChange={setHelpOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>Asset Library Guide</DialogTitle>
            <DialogDescription>
              Everything you can do with your generated assets.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 text-sm">
            <section>
              <h3 className="font-semibold mb-1">Review &amp; Approve</h3>
              <p className="text-muted-foreground">
                Every asset starts as a draft. Use <strong>Approve</strong> or <strong>Reject</strong> to
                triage. Select multiple assets with checkboxes for bulk actions.
              </p>
            </section>

            <section>
              <h3 className="font-semibold mb-1">Repurpose</h3>
              <p className="text-muted-foreground">
                Take any image and instantly resize it for other platforms — Instagram Feed, Stories,
                TikTok, Nextdoor. Sharp handles the crop locally (no AI cost). If the platform changes,
                the caption is automatically re-toned to match the new platform&apos;s voice.
              </p>
            </section>

            <section>
              <h3 className="font-semibold mb-1">Spawn Variations</h3>
              <p className="text-muted-foreground">
                Pick a winning image and generate N new ads that keep the same visual style and CTA
                but explore different hook angles. The AI uses the original as a reference image for
                visual consistency. Great for A/B testing — find what resonates, then make more of it.
              </p>
            </section>

            <section>
              <h3 className="font-semibold mb-1">Push to Postiz</h3>
              <p className="text-muted-foreground">
                Select approved assets and schedule them for publishing via Postiz. Pick a date/time
                and they&apos;ll be queued to the right platform channel automatically.
              </p>
            </section>

            <section>
              <h3 className="font-semibold mb-1">Filter &amp; Sort</h3>
              <p className="text-muted-foreground">
                Use the dropdowns to filter by platform, type (image/video/copy), or status.
                Sort by newest, oldest, name, platform, or type. Use the search box to find
                assets by filename or metadata.
              </p>
            </section>

            <section>
              <h3 className="font-semibold mb-1">Asset Lineage</h3>
              <p className="text-muted-foreground">
                Repurposed and variation assets show &quot;Derived from: original_file.png&quot; so you
                can always trace back to the source. This builds a family tree of your best-performing content.
              </p>
            </section>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}