import { useState } from 'react';
import { BarChart, Activity, BookOpen, Calculator, MessageCircle } from 'lucide-react';

export default function Dashboard() {
  const [posts] = useState([
    {
      id: 1,
      author: "Devon Lane",
      time: "23h",
      content: "Hello all, I'm posting this message to get advice on my test practice. Please click here to view.",
      likes: 24,
      comments: 8,
      shares: 2
    },
    // More posts would follow the same structure
  ]);

  const subjects = [
    { name: "Physical Science", icon: <Activity className="w-5 h-5" />, progress: 85 },
    { name: "Literature Arts", icon: <BookOpen className="w-5 h-5" />, progress: 72 },
    { name: "Mathematics", icon: <Calculator className="w-5 h-5" />, progress: 68 },
  ];

  const attendance = [
    { month: 'Jul', present: 90, absent: 10 },
    { month: 'Aug', present: 85, absent: 15 },
    { month: 'Sep', present: 95, absent: 5 },
    { month: 'Oct', present: 88, absent: 12 },
    { month: 'Nov', present: 92, absent: 8 },
    { month: 'Dec', present: 87, absent: 13 },
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 py-8">
        {/* Header */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
            <div className="flex items-center gap-4">
              <div className="w-16 h-16 rounded-full bg-gray-200" />
              <div>
                <h1 className="text-xl font-semibold">John Kwame Doe</h1>
                <p className="text-gray-500 text-sm">john.doe@gmail.com</p>
              </div>
            </div>
            <div className="mt-4 md:mt-0">
              <div className="text-sm text-gray-500">Student ID</div>
              <div className="font-medium">STK-3043-09</div>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left Column */}
          <div className="lg:col-span-2">
            {/* Subjects */}
            <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
              <h2 className="text-lg font-semibold mb-4">Subjects</h2>
              <div className="space-y-4">
                {subjects.map((subject, index) => (
                  <div key={index} className="flex items-center gap-4">
                    <div className="p-2 bg-blue-50 rounded-lg">
                      {subject.icon}
                    </div>
                    <div className="flex-1">
                      <div className="flex justify-between mb-1">
                        <span className="text-sm font-medium">{subject.name}</span>
                        <span className="text-sm text-gray-500">{subject.progress}%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div
                          className="bg-blue-600 h-2 rounded-full"
                          style={{ width: `${subject.progress}%` }}
                        />
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Attendance Chart */}
            <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
              <h2 className="text-lg font-semibold mb-4">Attendance</h2>
              <div className="h-64">
                <div className="flex h-full">
                  {attendance.map((month, index) => (
                    <div key={index} className="flex-1 flex flex-col justify-end items-center gap-2">
                      <div className="w-full flex flex-col gap-1">
                        <div
                          className="w-4/5 mx-auto bg-blue-500 rounded"
                          style={{ height: `${month.present}px` }}
                        />
                        <div
                          className="w-4/5 mx-auto bg-red-300 rounded"
                          style={{ height: `${month.absent}px` }}
                        />
                      </div>
                      <span className="text-xs text-gray-500">{month.month}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Feed */}
            <div className="bg-white rounded-lg shadow-sm p-6">
              <div className="flex justify-between items-center mb-6">
                <h2 className="text-lg font-semibold">What's Happening?</h2>
                <button className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm">
                  Post Now
                </button>
              </div>
              <div className="space-y-6">
                {posts.map((post) => (
                  <div key={post.id} className="border-b pb-4">
                    <div className="flex items-start gap-3">
                      <div className="w-10 h-10 rounded-full bg-gray-200" />
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <span className="font-medium">{post.author}</span>
                          <span className="text-gray-500 text-sm">• {post.time}</span>
                        </div>
                        <p className="text-gray-600 mt-1">{post.content}</p>
                        <div className="flex items-center gap-4 mt-3">
                          <button className="text-gray-500 text-sm flex items-center gap-1">
                            ♥ {post.likes}
                          </button>
                          <button className="text-gray-500 text-sm flex items-center gap-1">
                            <MessageCircle className="w-4 h-4" /> {post.comments}
                          </button>
                          <button className="text-gray-500 text-sm flex items-center gap-1">
                            ↗ {post.shares}
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Right Column */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
              <h2 className="text-lg font-semibold mb-4">Upcoming Events</h2>
              <div className="space-y-4">
                {['Test First Week', 'Independence Day', 'Public Holiday', 'End of Term'].map((event, index) => (
                  <div key={index} className="flex items-center gap-3">
                    <div className="w-2 h-2 rounded-full bg-blue-500" />
                    <span className="text-gray-600">{event}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-white rounded-lg shadow-sm p-6">
              <h2 className="text-lg font-semibold mb-4">Student Access Panel</h2>
              <div className="space-y-3">
                <button className="w-full px-4 py-2 text-left text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
                  Advanced Intelligence
                </button>
                <button className="w-full px-4 py-2 text-left text-sm text-gray-600 hover:bg-gray-50 rounded-lg">
                  Advanced Performance
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}