import { Calendar as CalendarIcon, Clock, AlertTriangle, CheckCircle } from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

const Calendar = () => {
  const upcomingDeadlines = [
    {
      title: "Small Business Innovation Research Grant",
      deadline: "March 15, 2024",
      daysRemaining: 12,
      category: "Business",
      amount: "$150,000",
      status: "urgent"
    },
    {
      title: "Community Development Block Grant",
      deadline: "April 30, 2024",
      daysRemaining: 58,
      category: "Community", 
      amount: "$75,000",
      status: "warning"
    },
    {
      title: "Education Innovation Grant",
      deadline: "May 20, 2024",
      daysRemaining: 78,
      category: "Education",
      amount: "$25,000", 
      status: "normal"
    },
    {
      title: "Veteran Business Development Grant",
      deadline: "June 1, 2024",
      daysRemaining: 90,
      category: "Veterans",
      amount: "$100,000",
      status: "normal"
    }
  ];

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "urgent":
        return <AlertTriangle className="h-5 w-5 text-red-500" />;
      case "warning":
        return <Clock className="h-5 w-5 text-yellow-500" />;
      case "normal":
        return <CheckCircle className="h-5 w-5 text-green-500" />;
      default:
        return <CalendarIcon className="h-5 w-5 text-muted-foreground" />;
    }
  };

  const getStatusBadge = (status: string, days: number) => {
    if (days <= 14) {
      return <Badge className="bg-red-100 text-red-800">Urgent - {days} days left</Badge>;
    } else if (days <= 30) {
      return <Badge className="bg-yellow-100 text-yellow-800">Due Soon - {days} days left</Badge>;
    } else {
      return <Badge className="bg-green-100 text-green-800">{days} days left</Badge>;
    }
  };

  return (
    <div className="max-w-6xl mx-auto">
      <div className="flex items-center gap-3 mb-6">
        <CalendarIcon className="h-8 w-8 text-orange-600" />
        <h1 className="text-3xl font-bold">Deadline Calendar</h1>
      </div>
      
      <Card className="mb-8">
        <CardHeader>
          <CardTitle>Never Miss a Deadline</CardTitle>
          <CardDescription>
            Track all your grant application deadlines in one place
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-3 gap-6">
            <div className="text-center">
              <div className="flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mx-auto mb-3">
                <AlertTriangle className="h-8 w-8 text-red-600" />
              </div>
              <h3 className="font-semibold mb-2">Urgent Deadlines</h3>
              <p className="text-sm text-muted-foreground">Applications due within 14 days</p>
            </div>
            <div className="text-center">
              <div className="flex items-center justify-center w-16 h-16 bg-yellow-100 rounded-full mx-auto mb-3">
                <Clock className="h-8 w-8 text-yellow-600" />
              </div>
              <h3 className="font-semibold mb-2">Due Soon</h3>
              <p className="text-sm text-muted-foreground">Applications due within 30 days</p>
            </div>
            <div className="text-center">
              <div className="flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mx-auto mb-3">
                <CheckCircle className="h-8 w-8 text-green-600" />
              </div>
              <h3 className="font-semibold mb-2">Plenty of Time</h3>
              <p className="text-sm text-muted-foreground">Applications due in 30+ days</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <CalendarIcon className="h-5 w-5" />
            Upcoming Deadlines
          </CardTitle>
          <CardDescription>
            Your tracked grant application deadlines sorted by urgency
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {upcomingDeadlines.map((deadline, index) => (
              <div key={index} className="border rounded-lg p-4 hover:bg-accent/50 transition-colors">
                <div className="flex justify-between items-start mb-3">
                  <div className="flex items-start gap-3">
                    {getStatusIcon(deadline.status)}
                    <div className="flex-1">
                      <h3 className="font-semibold text-lg mb-1">{deadline.title}</h3>
                      <div className="flex items-center gap-4 text-sm text-muted-foreground mb-2">
                        <Badge variant="outline">{deadline.category}</Badge>
                        <span>Amount: {deadline.amount}</span>
                        <span className="flex items-center gap-1">
                          <CalendarIcon className="h-4 w-4" />
                          {deadline.deadline}
                        </span>
                      </div>
                    </div>
                  </div>
                  {getStatusBadge(deadline.status, deadline.daysRemaining)}
                </div>
                
                <div className="flex gap-2">
                  <Button size="sm">View Application</Button>
                  <Button size="sm" variant="outline">Set Reminder</Button>
                  <Button size="sm" variant="outline">Add to Organizer</Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <div className="grid md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Calendar View</CardTitle>
            <CardDescription>Monthly calendar with deadline highlights</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-center py-8 text-muted-foreground">
              <CalendarIcon className="h-16 w-16 mx-auto mb-4" />
              <p>Interactive calendar view coming soon</p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Reminder Settings</CardTitle>
            <CardDescription>Configure deadline notifications</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between py-2">
                <span>Email reminders</span>
                <Button size="sm" variant="outline">Configure</Button>
              </div>
              <div className="flex items-center justify-between py-2">
                <span>Push notifications</span>
                <Button size="sm" variant="outline">Enable</Button>
              </div>
              <div className="flex items-center justify-between py-2">
                <span>Weekly digest</span>
                <Button size="sm" variant="outline">Setup</Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default Calendar;