"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { DatePicker } from "@/components/ui/date-picker";

export interface QueryParams {
  subject: string;
  predicate: string;
  includeSourceMetadata: boolean;
  asOf?: number; // Unix timestamp for time-travel queries
}

interface QueryFormProps {
  onSubmit: (params: QueryParams) => void;
  isLoading: boolean;
}

export function QueryForm({ onSubmit, isLoading }: QueryFormProps) {
  const [subject, setSubject] = useState("");
  const [predicate, setPredicate] = useState("");
  const [includeSourceMetadata, setIncludeSourceMetadata] = useState(true);
  const [asOfDate, setAsOfDate] = useState<Date | undefined>(undefined);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (subject.trim() && predicate.trim()) {
      onSubmit({
        subject: subject.trim(),
        predicate: predicate.trim(),
        includeSourceMetadata,
        // Convert Date to Unix timestamp (seconds)
        asOf: asOfDate ? Math.floor(asOfDate.getTime() / 1000) : undefined,
      });
    }
  };

  const canSubmit = subject.trim().length > 0 && predicate.trim().length > 0 && !isLoading;

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="space-y-2">
          <label htmlFor="subject" className="text-sm font-medium text-foreground">
            Subject
          </label>
          <Input
            id="subject"
            placeholder="e.g., semaglutide:gastroparesis_risk"
            value={subject}
            onChange={(e) => setSubject(e.target.value)}
            disabled={isLoading}
          />
          <p className="text-xs text-muted-foreground">
            The entity you want to query
          </p>
        </div>
        <div className="space-y-2">
          <label htmlFor="predicate" className="text-sm font-medium text-foreground">
            Predicate
          </label>
          <Input
            id="predicate"
            placeholder="e.g., risk_level"
            value={predicate}
            onChange={(e) => setPredicate(e.target.value)}
            disabled={isLoading}
          />
          <p className="text-xs text-muted-foreground">
            The property or relationship to analyze
          </p>
        </div>
      </div>

      {/* Time Travel Date Picker */}
      <div className="space-y-2">
        <label htmlFor="as-of-date" className="text-sm font-medium text-foreground">
          Time Travel (Optional)
        </label>
        <DatePicker
          value={asOfDate}
          onChange={setAsOfDate}
          disabled={isLoading}
          max={new Date()}
          placeholder="Query as of date..."
        />
        <p className="text-xs text-muted-foreground">
          See what the knowledge graph knew at a specific point in time
        </p>
      </div>

      <div className="flex items-center justify-between">
        <label className="flex items-center gap-2 text-sm">
          <input
            type="checkbox"
            checked={includeSourceMetadata}
            onChange={(e) => setIncludeSourceMetadata(e.target.checked)}
            disabled={isLoading}
            className="rounded border-border"
          />
          <span className="text-muted-foreground">Include source metadata</span>
        </label>

        <Button type="submit" disabled={!canSubmit}>
          {isLoading ? (
            <>
              <svg
                className="animate-spin -ml-1 mr-2 h-4 w-4"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
              >
                <circle
                  className="opacity-25"
                  cx="12"
                  cy="12"
                  r="10"
                  stroke="currentColor"
                  strokeWidth="4"
                />
                <path
                  className="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                />
              </svg>
              Querying...
            </>
          ) : (
            "Query Claims"
          )}
        </Button>
      </div>
    </form>
  );
}
