import { getCurrentUser } from "@/lib/auth"
import { getJobsByPlumberId, getPlumberEarnings } from "@/lib/plumber-jobs"
import StatsCard from "@/components/dashboard/stats-card"
import JobCard from "@/components/plumber/job-card"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Briefcase, DollarSign, Star, Clock, TrendingUp, Calendar, CheckCircle } from "lucide-react"
import Link from "next/link"

export default async function PlumberDashboard() {
  const user = await getCurrentUser()
  const jobs = user ? getJobsByPlumberId(user.id) : []
  const earnings = user ? getPlumberEarnings(user.id) : null

  const pendingJobs = jobs.filter((job) => job.status === "pending")
  const todayJobs = jobs.filter((job) => {
    const today = new Date().toISOString().split("T")[0]
    return job.scheduledDate === today
  })
  const upcomingJobs = jobs.filter((job) => {
    const today = new Date().toISOString().split("T")[0]
    return job.scheduledDate > today && job.status === "accepted"
  })

  return (
    <div className="space-y-6">
      {/* Welcome Section */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-[var(--dark-color)] mb-2">مرحباً، {user?.name}</h1>
        <p className="text-[var(--parg-color)]">إليك نظرة عامة على مهامك وأرباحك</p>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <StatsCard
          title="المهام المعلقة"
          value={pendingJobs.length}
          icon={Clock}
          color="var(--main-color)"
          description="تحتاج للرد"
        />

        <StatsCard
          title="مهام اليوم"
          value={todayJobs.length}
          icon={Calendar}
          color="var(--name-item)"
          description="مجدولة اليوم"
        />

        <StatsCard
          title="المهام المكتملة"
          value={earnings?.completedJobs || 0}
          icon={CheckCircle}
          color="#10b981"
          description="إجمالي المهام"
        />

        <StatsCard
          title="متوسط التقييم"
          value={earnings?.averageRating?.toFixed(1) || "0.0"}
          icon={Star}
          color="var(--main-color)"
          description={`من ${earnings?.totalReviews || 0} تقييم`}
        />
      </div>

      {/* Earnings Overview */}
      {earnings && (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card className="border-[var(--border-color)]">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[var(--parg-color)] mb-1">الأرباح الإجمالية</p>
                  <p className="text-2xl font-bold text-[var(--dark-color)]">{earnings.totalEarnings} جنيه</p>
                </div>
                <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                  <DollarSign className="w-6 h-6 text-green-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="border-[var(--border-color)]">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[var(--parg-color)] mb-1">أرباح هذا الشهر</p>
                  <p className="text-2xl font-bold text-[var(--dark-color)]">{earnings.monthlyEarnings} جنيه</p>
                </div>
                <div className="w-12 h-12 bg-[var(--name-item)]/10 rounded-full flex items-center justify-center">
                  <TrendingUp className="w-6 h-6 text-[var(--name-item)]" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="border-[var(--border-color)]">
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-[var(--parg-color)] mb-1">أرباح هذا الأسبوع</p>
                  <p className="text-2xl font-bold text-[var(--dark-color)]">{earnings.weeklyEarnings} جنيه</p>
                </div>
                <div className="w-12 h-12 bg-[var(--main-color)]/10 rounded-full flex items-center justify-center">
                  <Calendar className="w-6 h-6 text-[var(--main-color)]" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Pending Jobs */}
        <Card className="border-[var(--border-color)]">
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-[var(--dark-color)]">المهام المعلقة ({pendingJobs.length})</CardTitle>
            <Link href="/plumber/jobs">
              <Button variant="outline" size="sm">
                عرض الكل
              </Button>
            </Link>
          </CardHeader>
          <CardContent>
            {pendingJobs.length > 0 ? (
              <div className="space-y-4">
                {pendingJobs.slice(0, 3).map((job) => (
                  <JobCard key={job.id} job={job} />
                ))}
              </div>
            ) : (
              <div className="text-center py-8">
                <Briefcase className="w-12 h-12 mx-auto text-[var(--parg-color)] mb-4" />
                <p className="text-[var(--parg-color)]">لا توجد مهام معلقة</p>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Today's Jobs */}
        <Card className="border-[var(--border-color)]">
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-[var(--dark-color)]">مهام اليوم ({todayJobs.length})</CardTitle>
            <Link href="/plumber/schedule">
              <Button variant="outline" size="sm">
                عرض الجدول
              </Button>
            </Link>
          </CardHeader>
          <CardContent>
            {todayJobs.length > 0 ? (
              <div className="space-y-4">
                {todayJobs.map((job) => (
                  <JobCard key={job.id} job={job} />
                ))}
              </div>
            ) : (
              <div className="text-center py-8">
                <Calendar className="w-12 h-12 mx-auto text-[var(--parg-color)] mb-4" />
                <p className="text-[var(--parg-color)]">لا توجد مهام مجدولة اليوم</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Quick Actions */}
      <Card className="border-[var(--border-color)]">
        <CardHeader>
          <CardTitle className="text-[var(--dark-color)]">إجراءات سريعة</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <Link href="/plumber/jobs">
              <Button className="w-full justify-start gap-3 bg-[var(--name-item)] hover:bg-[var(--name-item)]/90 text-white">
                <Briefcase className="w-5 h-5" />
                إدارة المهام
              </Button>
            </Link>

            <Link href="/plumber/schedule">
              <Button variant="outline" className="w-full justify-start gap-3 bg-transparent">
                <Calendar className="w-5 h-5" />
                عرض الجدول
              </Button>
            </Link>

            <Link href="/plumber/earnings">
              <Button variant="outline" className="w-full justify-start gap-3 bg-transparent">
                <DollarSign className="w-5 h-5" />
                تقرير الأرباح
              </Button>
            </Link>

            <Link href="/plumber/profile">
              <Button variant="outline" className="w-full justify-start gap-3 bg-transparent">
                <Star className="w-5 h-5" />
                تحديث الملف
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}