import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import ApiResponse from "@/components/ApiResponse";
import { krowSDK } from "@/api/krowSDK";
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

const InvokeLLM = () => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    prompt: "Extract the total amount from the attached invoice.",
    response_json_schema: JSON.stringify({ type: "object", properties: { total_amount: { type: "number" } } }, null, 2),
    file_urls: "https://example.com/invoice.pdf",
  });

  const handleChange = (e) => {
    const { id, value } = e.target;
    setFormData(prev => ({ ...prev, [id]: value }));
  };

  const handleInvokeLLM = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    setResponse(null);
    try {
      const params = {
        ...formData,
        response_json_schema: JSON.parse(formData.response_json_schema),
        file_urls: formData.file_urls.split(',').map(url => url.trim()),
      };
      const res = await krowSDK.integrations.Core.InvokeLLM(params);
      setResponse(res);
    } catch (err) {
      setError(err.response?.data || err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h1 className="text-3xl font-bold text-slate-900 mb-4">Invoke LLM</h1>
      <p className="text-slate-600 mb-6">Tests the `integrations.Core.InvokeLLM` endpoint.</p>
      
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle>Test `/invokeLLM`</CardTitle>
          <CardDescription>Calls a large language model (e.g., Vertex AI).</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleInvokeLLM} className="space-y-4">
            <div>
              <Label htmlFor="prompt">Prompt</Label>
              <Textarea id="prompt" value={formData.prompt} onChange={handleChange} rows={4} />
            </div>
            <div>
              <Label htmlFor="response_json_schema">Response JSON Schema</Label>
              <Textarea id="response_json_schema" value={formData.response_json_schema} onChange={handleChange} rows={6} className="font-mono" />
            </div>
            <div>
              <Label htmlFor="file_urls">File URLs (comma-separated)</Label>
              <Input id="file_urls" value={formData.file_urls} onChange={handleChange} />
            </div>
            <Button type="submit" disabled={loading}>
              {loading ? "Invoking..." : "Invoke LLM"}
            </Button>
          </form>
        </CardContent>
      </Card>

      <ApiResponse response={response} error={error} loading={loading} />
    </div>
  );
};

export default InvokeLLM;
