import React, { useState } from 'react';
import { Card, CardContent } from '@/src/components/ui/Card';
import { Input } from '@/src/components/ui/Input';
import { Button } from '@/src/components/ui/Button';
import { Badge } from '@/src/components/ui/Badge';
import { 
  Search, 
  Filter, 
  FileText, 
  Download, 
  Eye, 
  MessageSquare,
  Calendar,
  Building
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';

const documents = [
  { 
    id: 'GR-2023-01', 
    title: 'Guidelines for Flood Management and Evacuation Procedures', 
    type: 'GR', 
    department: 'Disaster Management', 
    date: '2023-06-15',
    summary: 'Comprehensive guidelines for district administrations regarding flood preparedness, evacuation protocols, and relief camp management.'
  },
  { 
    id: 'ACT-1976', 
    title: 'Maharashtra Irrigation Act, 1976', 
    type: 'Act', 
    department: 'Water Resources', 
    date: '1976-08-05',
    summary: 'An Act to unify and amend the law relating to irrigation in the State of Maharashtra.'
  },
  { 
    id: 'CIR-2024-45', 
    title: 'Standard Operating Procedure for Dam Gate Operations during Monsoon', 
    type: 'Circular', 
    department: 'Water Resources', 
    date: '2024-05-10',
    summary: 'Updated SOPs for dam engineers regarding phased water discharge and coordination with downstream authorities.'
  },
  { 
    id: 'GR-2022-89', 
    title: 'Compensation Policy for Crop Damage due to Floods', 
    type: 'GR', 
    department: 'Revenue & Forest', 
    date: '2022-09-22',
    summary: 'Revised compensation rates and assessment methodology for agricultural losses caused by natural calamities including floods.'
  },
  { 
    id: 'ACT-2005', 
    title: 'Maharashtra Water Resources Regulatory Authority Act, 2005', 
    type: 'Act', 
    department: 'Water Resources', 
    date: '2005-05-04',
    summary: 'Act to provide for the establishment of the Maharashtra Water Resources Regulatory Authority to regulate water resources within the State.'
  },
];

export function Repository() {
  const [searchQuery, setSearchQuery] = useState('');
  const [activeFilter, setActiveFilter] = useState('All');
  const navigate = useNavigate();

  const filteredDocs = documents.filter(doc => {
    const matchesSearch = doc.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          doc.id.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesFilter = activeFilter === 'All' || doc.type === activeFilter;
    return matchesSearch && matchesFilter;
  });

  const handleAskAI = (docTitle: string) => {
    navigate(`/ai-assistant?q=Summarize the key points of ${encodeURIComponent(docTitle)}`);
  };

  return (
    <div className="space-y-6 max-w-6xl mx-auto">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-slate-900">Centralized Repository</h1>
          <p className="text-slate-500">Search and access GRs, Acts, and Circulars</p>
        </div>
        <Button onClick={() => navigate('/ai-assistant')} className="bg-indigo-600 hover:bg-indigo-700 text-white">
          <MessageSquare className="mr-2 h-4 w-4" />
          Ask AI Assistant
        </Button>
      </div>

      <Card className="border-none shadow-md bg-white/50 backdrop-blur-sm">
        <CardContent className="p-4 sm:p-6">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-3 h-5 w-5 text-slate-400" />
              <Input 
                type="text" 
                placeholder="Search by title, GR number, or keywords..." 
                className="pl-10 h-12 text-base bg-white"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <Button variant="outline" className="h-12 px-6 bg-white shrink-0">
              <Filter className="mr-2 h-4 w-4" />
              Advanced Filters
            </Button>
          </div>

          <div className="flex flex-wrap gap-2 mt-4">
            {['All', 'GR', 'Act', 'Circular'].map(filter => (
              <Badge 
                key={filter}
                variant={activeFilter === filter ? 'default' : 'secondary'}
                className="cursor-pointer px-3 py-1 text-sm"
                onClick={() => setActiveFilter(filter)}
              >
                {filter}
              </Badge>
            ))}
          </div>
        </CardContent>
      </Card>

      <div className="space-y-4">
        {filteredDocs.map((doc) => (
          <Card key={doc.id} className="overflow-hidden transition-all hover:shadow-md border-slate-200">
            <CardContent className="p-0">
              <div className="flex flex-col sm:flex-row">
                <div className="p-6 flex-1">
                  <div className="flex items-start justify-between">
                    <div>
                      <div className="flex items-center space-x-2 mb-2">
                        <Badge variant={
                          doc.type === 'GR' ? 'default' : 
                          doc.type === 'Act' ? 'destructive' : 'secondary'
                        }>
                          {doc.type}
                        </Badge>
                        <span className="text-xs font-medium text-slate-500">{doc.id}</span>
                      </div>
                      <h3 className="text-lg font-semibold text-slate-900 mb-2 leading-tight">
                        {doc.title}
                      </h3>
                      <p className="text-sm text-slate-600 mb-4 line-clamp-2">
                        {doc.summary}
                      </p>
                    </div>
                  </div>
                  
                  <div className="flex flex-wrap items-center gap-4 text-xs text-slate-500">
                    <div className="flex items-center">
                      <Building className="mr-1 h-3.5 w-3.5" />
                      {doc.department}
                    </div>
                    <div className="flex items-center">
                      <Calendar className="mr-1 h-3.5 w-3.5" />
                      {doc.date}
                    </div>
                  </div>
                </div>
                
                <div className="bg-slate-50 border-t sm:border-t-0 sm:border-l border-slate-100 p-4 sm:p-6 flex sm:flex-col items-center justify-center gap-3 sm:w-48">
                  <Button variant="outline" size="sm" className="w-full justify-start bg-white">
                    <Eye className="mr-2 h-4 w-4" /> View
                  </Button>
                  <Button variant="outline" size="sm" className="w-full justify-start bg-white">
                    <Download className="mr-2 h-4 w-4" /> Download
                  </Button>
                  <Button 
                    variant="secondary" 
                    size="sm" 
                    className="w-full justify-start bg-indigo-50 text-indigo-700 hover:bg-indigo-100 border-indigo-100"
                    onClick={() => handleAskAI(doc.title)}
                  >
                    <MessageSquare className="mr-2 h-4 w-4" /> Ask AI
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
        {filteredDocs.length === 0 && (
          <div className="text-center py-12">
            <FileText className="mx-auto h-12 w-12 text-slate-300 mb-4" />
            <h3 className="text-lg font-medium text-slate-900">No documents found</h3>
            <p className="text-slate-500">Try adjusting your search or filters.</p>
          </div>
        )}
      </div>
    </div>
  );
}