import React, { useState } from 'react';
import { motion } from 'motion/react';
import { Search, History, Globe, Shield, Calendar, ExternalLink, ArrowLeft, Info } from 'lucide-react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from './ui/card';
import { Badge } from './ui/badge';
import { ScrollArea } from './ui/scroll-area';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';

interface ArchiveResult {
  id: string;
  source: string;
  url: string;
  timestamp: string;
  status: 'verified' | 'suspicious' | 'unknown';
  snippet: string;
}

export const ArchiveSearch: React.FC<{ onBack: () => void }> = ({ onBack }) => {
  const [query, setQuery] = useState('');
  const [isSearching, setIsSearching] = useState(false);
  const [results, setResults] = useState<ArchiveResult[]>([]);

  const handleSearch = () => {
    if (!query) return;
    setIsSearching(true);
    
    // Simulated deep archive search
    setTimeout(() => {
      setResults([
        {
          id: '1',
          source: 'Wayback Machine',
          url: `https://web.archive.org/web/*/${query}`,
          timestamp: '2018-05-12T14:30:00Z',
          status: 'verified',
          snippet: 'First indexed snapshot found. Domain registration matches historical WHOIS data.'
        },
        {
          id: '2',
          source: 'Common Crawl',
          url: 'https://commoncrawl.org/search',
          timestamp: '2019-11-20T09:15:00Z',
          status: 'verified',
          snippet: 'Content structure consistent with 2019 standards. No malicious redirects detected in historical crawl.'
        },
        {
          id: '3',
          source: 'Archive.today',
          url: `https://archive.is/${query}`,
          timestamp: '2021-02-05T18:45:00Z',
          status: 'suspicious',
          snippet: 'Snapshot shows significant content shift. Possible domain squatting or expired domain takeover detected.'
        }
      ]);
      setIsSearching(false);
    }, 1500);
  };

  return (
    <div className="flex flex-col h-full bg-zinc-950 text-zinc-300 font-mono p-6">
      <div className="flex items-center gap-4 mb-8">
        <Button variant="ghost" size="icon" onClick={onBack} className="hover:bg-zinc-800">
          <ArrowLeft className="w-5 h-5" />
        </Button>
        <div>
          <h1 className="text-2xl font-bold text-primary tracking-tight">Deep Archive Search</h1>
          <p className="text-xs text-zinc-500 uppercase tracking-widest">Host Legitimacy & Content Verification</p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 flex-1 overflow-hidden">
        {/* Search Panel */}
        <div className="lg:col-span-1 flex flex-col gap-6">
          <Card className="bg-zinc-900 border-zinc-800">
            <CardHeader>
              <CardTitle className="text-sm font-bold flex items-center gap-2">
                <Search className="w-4 h-4 text-primary" />
                Archive Query
              </CardTitle>
              <CardDescription className="text-[10px] text-zinc-500 uppercase">
                Enter domain or URL to verify historical state
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Input 
                  placeholder="example.com" 
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  className="bg-zinc-950 border-zinc-800 focus-visible:ring-primary"
                />
              </div>
              <Button 
                onClick={handleSearch} 
                disabled={isSearching}
                className="w-full bg-primary hover:bg-primary/90 text-zinc-950 font-bold"
              >
                {isSearching ? 'Scanning Archives...' : 'Execute Deep Search'}
              </Button>
            </CardContent>
          </Card>

          <Card className="bg-zinc-900 border-zinc-800 flex-1">
            <CardHeader>
              <CardTitle className="text-sm font-bold flex items-center gap-2">
                <Info className="w-4 h-4 text-primary" />
                Verification Logic
              </CardTitle>
            </CardHeader>
            <CardContent className="text-[11px] space-y-4 text-zinc-400 leading-relaxed">
              <p>
                <span className="text-primary font-bold">1. Temporal Consistency:</span> Compares current content creation dates against the earliest known archive snapshots.
              </p>
              <p>
                <span className="text-primary font-bold">2. Host Legitimacy:</span> Cross-references historical WHOIS records with archive metadata to detect domain ownership gaps.
              </p>
              <p>
                <span className="text-primary font-bold">3. Content Drift:</span> Analyzes structural changes in DOM over time to identify potential malicious takeovers of legitimate domains.
              </p>
            </CardContent>
          </Card>
        </div>

        {/* Results Panel */}
        <div className="lg:col-span-2 flex flex-col overflow-hidden">
          <Tabs defaultValue="results" className="h-full flex flex-col">
            <TabsList className="bg-zinc-900 border-zinc-800 self-start mb-4">
              <TabsTrigger value="results" className="text-xs data-[state=active]:bg-zinc-800">Search Results</TabsTrigger>
              <TabsTrigger value="timeline" className="text-xs data-[state=active]:bg-zinc-800">Historical Timeline</TabsTrigger>
            </TabsList>

            <TabsContent value="results" className="flex-1 overflow-hidden m-0">
              <ScrollArea className="h-full pr-4">
                <div className="space-y-4">
                  {results.length > 0 ? (
                    results.map((result) => (
                      <motion.div
                        key={result.id}
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                      >
                        <Card className="bg-zinc-900 border-zinc-800 hover:border-primary/30 transition-colors">
                          <CardContent className="p-4">
                            <div className="flex justify-between items-start mb-2">
                              <div className="flex items-center gap-2">
                                <Globe className="w-4 h-4 text-primary" />
                                <span className="text-sm font-bold">{result.source}</span>
                                <Badge variant={result.status === 'verified' ? 'default' : result.status === 'suspicious' ? 'destructive' : 'outline'} className="text-[9px] uppercase h-4">
                                  {result.status}
                                </Badge>
                              </div>
                              <span className="text-[10px] text-zinc-500 font-mono">
                                {new Date(result.timestamp).toLocaleString()}
                              </span>
                            </div>
                            <p className="text-xs text-zinc-400 mb-3 line-clamp-2">
                              {result.snippet}
                            </p>
                            <div className="flex items-center justify-between">
                              <code className="text-[10px] text-zinc-500 truncate max-w-[70%]">
                                {result.url}
                              </code>
                              <Button variant="ghost" size="sm" className="h-7 text-[10px] gap-1 hover:bg-zinc-800">
                                <a href={result.url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1">
                                  View Snapshot <ExternalLink className="w-3 h-3" />
                                </a>
                              </Button>
                            </div>
                          </CardContent>
                        </Card>
                      </motion.div>
                    ))
                  ) : (
                    <div className="h-64 flex flex-col items-center justify-center text-zinc-600 border-2 border-dashed border-zinc-800 rounded-lg">
                      <History className="w-12 h-12 mb-2 opacity-20" />
                      <p className="text-sm">No active search results</p>
                      <p className="text-[10px] uppercase tracking-widest">Execute query to begin forensic scan</p>
                    </div>
                  )}
                </div>
              </ScrollArea>
            </TabsContent>

            <TabsContent value="timeline" className="flex-1 m-0">
              <div className="h-full flex items-center justify-center text-zinc-600 border border-zinc-800 rounded-lg bg-zinc-900/50">
                <div className="text-center">
                  <Calendar className="w-12 h-12 mx-auto mb-2 opacity-20" />
                  <p className="text-sm">Timeline Visualization</p>
                  <p className="text-[10px] uppercase tracking-widest">Requires active domain query</p>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  );
};