import React, { useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
import { Upload, Database, Dna, FileCode, ArrowRight } from 'lucide-react';

const RAPIDEngine = () => {
  const [selectedModule, setSelectedModule] = useState('genomics');
  const [inputType, setInputType] = useState('fasta');
  const [referenceType, setReferenceType] = useState('user-defined');
  
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <div className="flex items-center space-x-4">
            <Dna className="h-10 w-10 text-blue-600" />
            <div>
              <h1 className="text-3xl font-bold text-gray-900">RAPID-engine</h1>
              <p className="text-gray-600">Resistance Analysis and Prediction through Integrated Data Engine</p>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 py-8">
        <div className="space-y-8">
          {/* Module Selection */}
          <Card>
            <CardHeader>
              <CardTitle>Select Analysis Module</CardTitle>
              <CardDescription>Choose between genomics and transcriptomics analysis</CardDescription>
            </CardHeader>
            <CardContent>
              <Tabs defaultValue="genomics" onValueChange={setSelectedModule}>
                <TabsList className="grid w-full grid-cols-2">
                  <TabsTrigger value="genomics">Genomics</TabsTrigger>
                  <TabsTrigger value="transcriptomics">Transcriptomics</TabsTrigger>
                </TabsList>
                <TabsContent value="genomics" className="mt-4">
                  <p>Analyze genomic data for SNP detection, SNPEff annotation, and GWAS analysis</p>
                </TabsContent>
                <TabsContent value="transcriptomics" className="mt-4">
                  <p>Perform differential expression analysis and WGCNA on transcriptomic data</p>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>

          {/* Input Selection */}
          <Card>
            <CardHeader>
              <CardTitle>Input Data</CardTitle>
              <CardDescription>Select your input file format</CardDescription>
            </CardHeader>
            <CardContent>
              <RadioGroup defaultValue="fasta" onValueChange={setInputType}>
                <div className="flex flex-col space-y-4">
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="fasta" id="fasta" />
                    <Label htmlFor="fasta">FASTA</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="fastq-single" id="fastq-single" />
                    <Label htmlFor="fastq-single">FASTQ (Single-end)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="fastq-paired" id="fastq-paired" />
                    <Label htmlFor="fastq-paired">FASTQ (Paired-end)</Label>
                  </div>
                </div>
              </RadioGroup>
            </CardContent>
          </Card>

          {/* Reference Selection */}
          <Card>
            <CardHeader>
              <CardTitle>Reference Database</CardTitle>
              <CardDescription>Choose your reference database type</CardDescription>
            </CardHeader>
            <CardContent>
              <RadioGroup defaultValue="user-defined" onValueChange={setReferenceType}>
                <div className="flex flex-col space-y-4">
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="user-defined" id="user-defined" />
                    <Label htmlFor="user-defined">User-defined Reference</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="universal" id="universal" />
                    <Label htmlFor="universal">Universal Reference</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="pan-ref" id="pan-ref" />
                    <Label htmlFor="pan-ref">Pan Reference</Label>
                  </div>
                </div>
              </RadioGroup>
            </CardContent>
          </Card>

          {/* File Upload Section */}
          <Card>
            <CardHeader>
              <CardTitle>Upload Files</CardTitle>
              <CardDescription>Upload your input files for analysis</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                <Upload className="mx-auto h-12 w-12 text-gray-400" />
                <div className="mt-4">
                  <Button>Select Files</Button>
                </div>
                <p className="mt-2 text-sm text-gray-600">
                  or drag and drop files here
                </p>
              </div>
            </CardContent>
          </Card>

          {/* Analysis Options */}
          <Card>
            <CardHeader>
              <CardTitle>Analysis Options</CardTitle>
              <CardDescription>Select the analyses to perform</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {selectedModule === 'genomics' ? (
                  <>
                    <Button variant="outline" className="justify-start">
                      <Database className="mr-2 h-4 w-4" /> SNP Detection
                    </Button>
                    <Button variant="outline" className="justify-start">
                      <FileCode className="mr-2 h-4 w-4" /> SNPEff Annotation
                    </Button>
                    <Button variant="outline" className="justify-start">
                      <Database className="mr-2 h-4 w-4" /> GWAS Analysis
                    </Button>
                  </>
                ) : (
                  <>
                    <Button variant="outline" className="justify-start">
                      <Database className="mr-2 h-4 w-4" /> DEGs Analysis
                    </Button>
                    <Button variant="outline" className="justify-start">
                      <FileCode className="mr-2 h-4 w-4" /> WGCNA
                    </Button>
                  </>
                )}
              </div>
            </CardContent>
          </Card>

          {/* Submit Button */}
          <div className="flex justify-end">
            <Button className="px-8">
              Start Analysis <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </div>
      </main>
    </div>
  );
};

export default RAPIDEngine;