import { useState, type ReactNode } from "react";
import { PageShell } from "@/components/page-shell";

export function TextGenTool({
  eyebrow, title, lead, placeholder, kind, tone,
}: {
  eyebrow: string; title: string; lead: string;
  placeholder: string;
  kind: "document" | "creative" | "biography";
  tone?: string;
}) {
  const [prompt, setPrompt] = useState("");
  const [result, setResult] = useState<string>("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const run = async () => {
    if (!prompt.trim()) return;
    setLoading(true); setError(null); setResult("");
    try {
      const { generateText } = await import("@/lib/ai.functions");
      const res = await generateText({ data: { kind, prompt, tone } });
      setResult(res.text);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Generation failed");
    } finally { setLoading(false); }
  };

  return (
    <PageShell eyebrow={eyebrow} title={title} lead={lead}>
      <div className="grid gap-6 lg:grid-cols-2">
        <div className="glow-card rounded-2xl p-5">
          <label className="mb-2 block text-sm font-medium">Your prompt</label>
          <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} rows={12}
            placeholder={placeholder}
            className="w-full resize-none rounded-lg border border-border bg-input px-4 py-3 text-sm outline-none focus:border-primary" />
          <button onClick={run} disabled={loading || !prompt.trim()}
            className="mt-3 w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground disabled:opacity-50">
            {loading ? "Generating…" : "Generate"}
          </button>
          {error && <div className="mt-3 rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive">{error}</div>}
        </div>
        <div className="glow-card rounded-2xl p-5">
          <div className="mb-2 text-sm font-medium">Result</div>
          <div className="min-h-[300px] whitespace-pre-wrap rounded-lg border border-border bg-background/40 p-4 text-sm text-foreground">
            {result || <span className="text-muted-foreground">Your generated text will appear here.</span>}
          </div>
          {result && (
            <button onClick={() => navigator.clipboard.writeText(result)}
              className="mt-3 rounded-lg border border-border px-4 py-2 text-sm hover:bg-card">Copy to clipboard</button>
          )}
        </div>
      </div>
    </PageShell>
  );
}

export function ComingSoon({ title, eyebrow, lead, note }: { title: string; eyebrow: string; lead: string; note?: ReactNode }) {
  return (
    <PageShell eyebrow={eyebrow} title={title} lead={lead}>
      <div className="glow-card rounded-2xl p-8 text-center">
        <div className="mx-auto mb-4 inline-block rounded-full border border-border bg-card/60 px-4 py-1 text-xs uppercase tracking-widest text-muted-foreground">
          In development
        </div>
        <p className="text-muted-foreground">
          {note ?? "This tool is being polished. Sign up to be notified the moment it launches."}
        </p>
      </div>
    </PageShell>
  );
}