import { AILabel, DialogTrigger, Popover, Dialog, Button } from "@hashti/react";

import { AILabel } from "@hashti/react";

export function DefaultAILabelExample() {
  return (
    <div className="flex items-center gap-4">
      <div className="p-4 border border-subtle rounded-lg bg-layer-1 max-w-md">
        <div className="flex items-center justify-between mb-2">
          <h4 className="font-semibold text-sm">Summary Recommendation</h4>
          <AILabel />
        </div>
        <p className="text-sm text-subtle">
          Cluster load spikes predictably every Thursday at 14:00 UTC. We suggest pre-scaling 2
          additional worker nodes.
        </p>
      </div>
    </div>
  );
}

import { AILabel } from "@hashti/react";

export function CustomTextExample() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <AILabel label="AI" />
      <AILabel label="AI Generated" />
      <AILabel label="Copilot Insight" />
      <AILabel label="هوش مصنوعی" />
    </div>
  );
}

import { useState } from "react";
import { AILabel, TextField } from "@hashti/react";

export function RevertExample() {
  const originalAI = "Optimize database query cache for high read throughput.";
  const [text, setText] = useState("Custom user modification here...");
  const isModified = text !== originalAI;

  return (
    <div className="max-w-md space-y-3">
      <div className="flex items-center justify-between">
        <label className="text-sm font-medium">Architecture Note</label>
        <AILabel
          label="AI Suggested"
          revertActive={isModified}
          onRevert={() => setText(originalAI)}
          revertLabel="Revert to original AI recommendation"
        />
      </div>

      <input
        className="w-full px-3 py-2 border border-subtle rounded bg-layer-1 text-sm"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />

      {isModified && (
        <p className="text-xs text-subtle">
          Content was edited. Click the AI label to restore the original suggestion.
        </p>
      )}
    </div>
  );
}

import { AILabel, DialogTrigger, Button, Popover, Dialog, Icon } from "@hashti/react";

export function AttributionPopoverExample() {
  return (
    <DialogTrigger>
      <Button
        variant="ghost"
        className="p-0 h-auto border-none hover:bg-transparent"
        aria-label="View AI generation details"
      >
        <AILabel label="AI Explained" />
      </Button>

      <Popover className="max-w-xs p-4 space-y-3">
        <Dialog>
          <div className="space-y-3">
            <div className="flex items-center gap-2 text-primary font-semibold text-sm">
              <Icon name="sparkle" size={16} />
              <span>AI Generation Transparency</span>
            </div>

            <p className="text-xs text-subtle">
              Generated using <strong>Gemini 2.5 Flash</strong> with temperature 0.2 across 4
              architecture documents.
            </p>

            <div className="text-xs space-y-1 border-t border-subtle pt-2">
              <div className="flex justify-between">
                <span className="text-subtle">Model Confidence:</span>
                <span className="font-semibold text-success">98.4%</span>
              </div>
              <div className="flex justify-between">
                <span className="text-subtle">Grounding Citations:</span>
                <span className="font-semibold">3 Sources</span>
              </div>
            </div>

            <div className="flex gap-2 pt-1 border-t border-subtle">
              <Button size="sm" variant="secondary" className="flex-1">
                Was this helpful?
              </Button>
            </div>
          </div>
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
}