Plug-and-Play KYC Name-Check

// app/components/kyc-check.tsx
"use client"

import { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { AlertCircle, CheckCircle, Loader2 } from 'lucide-react';

export default function KycCheck() {
  const [query, setQuery] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [results, setResults] = useState([]);
  const [showDetails, setShowDetails] = useState(false);

  // API call function
  const checkName = async () => {
    try {
      const response = await fetch('https://muddhqdfszuawycsokbg.supabase.co/functions/v1/MPC/search', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          query: query
        })
      });
      
      return await response.json();
    } catch (error) {
      console.error('Error during name check:', error);
      throw error;
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!query.trim()) return;
    
    setIsLoading(true);
    setShowDetails(false);
    
    try {
      const data = await checkName();
      setResults(data);
    } catch (error) {
      console.error('Error:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleViewDetails = () => {
    setShowDetails(true);
  };
  
  return (
    <div className="w-full max-w-md mx-auto">
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="query" className="block text-sm font-medium mb-1">
            Name to Check
          </label>
          <Input
            id="query"
            placeholder="Enter name to check (e.g. ALI ZAKI MOHAMMED ALI)"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            required
            className="w-full"
          />
          <p className="text-xs text-muted-foreground mt-1">
            Enter a full name to check against global watchlists
          </p>
        </div>
        
        <div className="flex justify-end">
          <Button type="submit" disabled={isLoading || !query.trim()}>
            {isLoading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Checking
              </>
            ) : (
              "Check Name"
            )}
          </Button>
        </div>
      </form>

      {results && results.length > 0 ? (
        <div className="mt-6 p-4 border rounded-lg bg-red-50 dark:bg-red-900/20">
          <div className="flex items-center">
            <div className="rounded-full bg-red-100 dark:bg-red-900/40 p-2 mr-3">
              <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-400" />
            </div>
            <div className="flex-1">
              <h4 className="font-semibold text-red-600 dark:text-red-400">Potential Match Found</h4>
              <p className="text-sm text-red-700 dark:text-red-300">
                {results.length} {results.length === 1 ? 'match' : 'matches'} found on watchlists.
              </p>
            </div>
            {!showDetails && (
              <Button variant="outline" size="sm" onClick={handleViewDetails}>
                View Details
              </Button>
            )}
          </div>

          {showDetails && (
            <div className="mt-4 border-t border-red-200 dark:border-red-800 pt-4">
              <div className="bg-background/80 backdrop-blur-sm p-3 rounded text-sm">
                <h5 className="font-medium mb-2">Match Details</h5>
                <pre className="overflow-auto text-xs p-2 bg-slate-100 dark:bg-slate-800 rounded">
                  {JSON.stringify(results, null, 2)}
                </pre>
              </div>
            </div>
          )}
        </div>
      ) : results ? (
        <div className="mt-6 p-4 border rounded-lg bg-green-50 dark:bg-green-900/20">
          <div className="flex items-center">
            <div className="rounded-full bg-green-100 dark:bg-green-900/40 p-2 mr-3">
              <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400" />
            </div>
            <div>
              <h4 className="font-semibold text-green-600 dark:text-green-400">No Matches Found</h4>
              <p className="text-sm text-green-700 dark:text-green-300">
                This individual does not appear on any watchlists.
              </p>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}