import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { BarChart2, TrendingUp, Users, Filter } from "lucide-react";
import EnhancedProjectCard from "@/components/EnhancedProjectCard";

interface DashboardInvestorProps {
  userId: string;
}

const DashboardInvestor: React.FC<DashboardInvestorProps> = ({ userId }) => {
  // Mock data
  const projects = [
    {
      id: 'proj1',
      title: 'Smart City Solutions',
      description: 'IoT platform for smart city management and infrastructure optimization',
      category: 'Infrastructure',
      team_size: 8,
      funding_status: 'Series B',
      status: 'active',
      created_at: '2023-05-10T14:48:00Z',
      skills_required: ['IoT', 'Smart City', 'Data Analytics'],
      profiles: { full_name: 'Emma Johnson', avatar_url: null }
    },
    {
      id: 'proj2',
      title: 'Quantum Computing OS',
      description: 'Operating system for quantum computers with practical applications',
      category: 'Technology',
      team_size: 12,
      funding_status: 'Series A',
      status: 'active',
      created_at: '2023-07-22T09:30:00Z',
      skills_required: ['Quantum Computing', 'Systems Programming', 'Algorithms'],
      profiles: { full_name: 'David Chen', avatar_url: null }
    },
    {
      id: 'proj3',
      title: 'Carbon Capture Tech',
      description: 'Revolutionary technology to capture carbon emissions from industrial processes',
      category: 'CleanTech',
      team_size: 7,
      funding_status: 'Seed',
      status: 'active',
      created_at: '2023-09-05T11:20:00Z',
      skills_required: ['Chemical Engineering', 'Environmental Science', 'Manufacturing'],
      profiles: { full_name: 'Sarah Brown', avatar_url: null }
    },
    {
      id: 'proj4',
      title: 'Agritech Drones',
      description: 'Drone technology for precision agriculture and crop management',
      category: 'Agriculture',
      team_size: 5,
      funding_status: 'Pre-seed',
      status: 'active',
      created_at: '2023-10-18T16:45:00Z',
      skills_required: ['Drone Technology', 'Agriculture', 'Computer Vision'],
      profiles: { full_name: 'Michael Wilson', avatar_url: null }
    }
  ];
  
  const watchlist = projects.slice(0, 3);

  return (
    <div className="space-y-8">
      {/* Investment Opportunities Section */}
      <section>
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-2xl font-bold">Investment Opportunities</h2>
          <Button variant="outline" size="sm">
            <Filter className="h-4 w-4 mr-2" /> Filter
          </Button>
        </div>
        
        {projects.length === 0 ? (
          <Card>
            <CardContent className="pt-6">
              <div className="text-center py-12">
                <BarChart2 className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
                <h3 className="text-lg font-medium mb-2">No projects available</h3>
                <p className="text-muted-foreground mb-6">
                  Check back later for new investment opportunities
                </p>
              </div>
            </CardContent>
          </Card>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {projects.map((project) => (
              <EnhancedProjectCard
                key={project.id}
                id={project.id}
                title={project.title || "Untitled Project"}
                description={project.description || ""}
                category={project.category || ""}
                members={project.team_size || 1}
                funding={project.funding_status || ""}
                investment={project.funding_status || ""}
                founder={project.profiles?.full_name || "Unknown"}
                founderAvatar={project.profiles?.avatar_url || undefined}
                skills={project.skills_required || []}
                created_at={project.created_at}
                status={project.status || ""}
              />
            ))}
          </div>
        )}
      </section>
      
      {/* Watchlist Section */}
      <section>
        <h2 className="text-2xl font-bold mb-4">Your Watchlist</h2>
        
        {watchlist.length === 0 ? (
          <Card>
            <CardContent className="pt-6">
              <div className="text-center py-8">
                <TrendingUp className="mx-auto h-10 w-10 text-muted-foreground mb-4" />
                <h3 className="text-lg font-medium mb-2">Your watchlist is empty</h3>
                <p className="text-muted-foreground mb-4">
                  Save interesting projects to track their progress
                </p>
                <Button asChild variant="outline">
                  <Link to="/projects">Browse Projects</Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {watchlist.map((project) => (
              <Card key={project.id} className="hover:shadow-md transition-shadow">
                <CardHeader className="pb-2">
                  <CardTitle className="text-base">{project.title || "Untitled Project"}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
                    {project.description || "No description provided"}
                  </p>
                  <div className="flex justify-between items-center">
                    <div className="text-sm">
                      <span className="font-medium">Status:</span> {project.status || "Unknown"}
                    </div>
                    <Button asChild size="sm" variant="outline">
                      <Link to={`/project/${project.id}`}>View</Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </section>
      
      {/* Market Insights Section */}
      <section>
        <h2 className="text-2xl font-bold mb-4">Market Insights</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Trending Industries</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <span>AI & Machine Learning</span>
                  <span className="text-green-600 flex items-center">
                    <TrendingUp className="h-4 w-4 mr-1" /> 24%
                  </span>
                </div>
                <div className="flex justify-between items-center">
                  <span>Clean Energy</span>
                  <span className="text-green-600 flex items-center">
                    <TrendingUp className="h-4 w-4 mr-1" /> 18%
                  </span>
                </div>
                <div className="flex justify-between items-center">
                  <span>Healthcare Tech</span>
                  <span className="text-green-600 flex items-center">
                    <TrendingUp className="h-4 w-4 mr-1" /> 15%
                  </span>
                </div>
              </div>
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Recent Funding Rounds</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <div>
                    <p className="font-medium">TechFusion AI</p>
                    <p className="text-sm text-muted-foreground">Series B</p>
                  </div>
                  <span className="font-medium">$25M</span>
                </div>
                <div className="flex justify-between items-center">
                  <div>
                    <p className="font-medium">GreenSpark Energy</p>
                    <p className="text-sm text-muted-foreground">Seed Round</p>
                  </div>
                  <span className="font-medium">$3.5M</span>
                </div>
                <div className="flex justify-between items-center">
                  <div>
                    <p className="font-medium">MediSync Platform</p>
                    <p className="text-sm text-muted-foreground">Series A</p>
                  </div>
                  <span className="font-medium">$12M</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>
      
      {/* Quick Links Section */}
      <section>
        <h2 className="text-2xl font-bold mb-4">Quick Actions</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <Card className="hover:shadow-md transition-shadow">
            <CardContent className="p-6">
              <Link to="/projects" className="flex flex-col items-center text-center">
                <BarChart2 className="h-8 w-8 mb-3 text-primary" />
                <h3 className="font-medium mb-1">Browse Projects</h3>
                <p className="text-sm text-muted-foreground">Find new investment opportunities</p>
              </Link>
            </CardContent>
          </Card>
          
          <Card className="hover:shadow-md transition-shadow">
            <CardContent className="p-6">
              <Link to="/entrepreneurs" className="flex flex-col items-center text-center">
                <Users className="h-8 w-8 mb-3 text-primary" />
                <h3 className="font-medium mb-1">Meet Founders</h3>
                <p className="text-sm text-muted-foreground">Connect with entrepreneurs</p>
              </Link>
            </CardContent>
          </Card>
          
          <Card className="hover:shadow-md transition-shadow">
            <CardContent className="p-6">
              <Link to="/profile" className="flex flex-col items-center text-center">
                <TrendingUp className="h-8 w-8 mb-3 text-primary" />
                <h3 className="font-medium mb-1">Update Profile</h3>
                <p className="text-sm text-muted-foreground">Enhance your investor profile</p>
              </Link>
            </CardContent>
          </Card>
        </div>
      </section>
    </div>
  );
};

export default DashboardInvestor;