import React, { useState } from "react";
import {
  ChartBarIcon,
  ArrowTrendingUpIcon,
  CheckCircleIcon,
  ClockIcon,
  ArrowDownTrayIcon,
} from "@heroicons/react/24/outline";
import Card from "../../../shared/components/ui/Card";
import Button from "../../../shared/components/ui/Button";
import Badge from "../../../shared/components/ui/Badge";
import Progress from "../../../shared/components/ui/Progress";

export default function ReportsPage() {
  const [timeRange, setTimeRange] = useState("30d");

  const velocityData = [
    { week: "Week 1", completed: 24, created: 30 },
    { week: "Week 2", completed: 32, created: 28 },
    { week: "Week 3", completed: 41, created: 35 },
    { week: "Week 4", completed: 38, created: 22 },
  ];

  const breakdownData = [
    { label: "Done", count: 1384, color: "bg-emerald-500", percentage: 65 },
    { label: "In Progress", count: 248, color: "bg-[#3B82F6]", percentage: 22 },
    { label: "In Review", count: 96, color: "bg-amber-500", percentage: 8 },
    { label: "Backlog", count: 42, color: "bg-slate-600", percentage: 5 },
  ];

  return (
    <div className="space-y-8 p-8 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight text-white">Reports & Analytics</h1>
          <p className="text-sm text-slate-400 mt-1">
            Analyze workspace performance, velocity, and delivery metrics.
          </p>
        </div>

        <div className="flex items-center gap-3">
          <div className="flex bg-slate-900 border border-slate-800 rounded-xl p-1 text-xs">
            {["7d", "30d", "90d"].map((range) => (
              <button
                key={range}
                onClick={() => setTimeRange(range)}
                className={`px-3 py-1.5 rounded-lg font-medium transition ${
                  timeRange === range
                    ? "bg-[#3B82F6] text-white"
                    : "text-slate-400 hover:text-white"
                }`}
              >
                {range.toUpperCase()}
              </button>
            ))}
          </div>

          <Button
            variant="secondary"
            leftIcon={<ArrowDownTrayIcon className="h-4 w-4" />}
          >
            Export CSV
          </Button>
        </div>
      </div>

      {/* Analytics Summary Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="space-y-3">
          <div className="flex justify-between items-center text-xs text-slate-400">
            <span>Sprint Velocity</span>
            <Badge variant="emerald">↑ 18%</Badge>
          </div>
          <div className="text-3xl font-bold text-white">35.4 pts</div>
          <p className="text-xs text-slate-500">Average story points delivered per sprint</p>
        </Card>

        <Card className="space-y-3">
          <div className="flex justify-between items-center text-xs text-slate-400">
            <span>Completion Rate</span>
            <Badge variant="emerald">94.2%</Badge>
          </div>
          <div className="text-3xl font-bold text-emerald-400">1,384 Tasks</div>
          <p className="text-xs text-slate-500">Tasks resolved on schedule this period</p>
        </Card>

        <Card className="space-y-3">
          <div className="flex justify-between items-center text-xs text-slate-400">
            <span>Cycle Time</span>
            <Badge variant="amber">2.4 Days</Badge>
          </div>
          <div className="text-3xl font-bold text-white">2.4d / Task</div>
          <p className="text-xs text-slate-500">Time from In Progress to Done</p>
        </Card>
      </div>

      {/* Task Distribution & Velocity Breakdown */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Status Distribution */}
        <Card className="space-y-6">
          <div className="flex items-center justify-between border-b border-slate-800 pb-4">
            <h3 className="font-semibold text-base text-white">Task Distribution</h3>
            <ChartBarIcon className="h-5 w-5 text-slate-500" />
          </div>

          <div className="space-y-4">
            {breakdownData.map((item) => (
              <div key={item.label} className="space-y-1.5">
                <div className="flex justify-between text-xs">
                  <div className="flex items-center gap-2">
                    <span className={`h-2.5 w-2.5 rounded-full ${item.color}`} />
                    <span className="text-slate-300 font-medium">{item.label}</span>
                  </div>
                  <span className="text-slate-400">{item.count} ({item.percentage}%)</span>
                </div>
                <Progress value={item.percentage} />
              </div>
            ))}
          </div>
        </Card>

        {/* Velocity Stream */}
        <Card className="lg:col-span-2 space-y-6">
          <div className="flex items-center justify-between border-b border-slate-800 pb-4">
            <h3 className="font-semibold text-base text-white">Completion Velocity</h3>
            <ArrowTrendingUpIcon className="h-5 w-5 text-slate-500" />
          </div>

          <div className="space-y-4">
            {velocityData.map((v) => (
              <div
                key={v.week}
                className="p-4 rounded-xl bg-slate-950 border border-slate-800 flex items-center justify-between"
              >
                <span className="text-sm font-semibold text-slate-200">{v.week}</span>
                <div className="flex items-center gap-6 text-xs">
                  <div className="flex items-center gap-2">
                    <span className="text-slate-400">Created:</span>
                    <span className="text-amber-400 font-semibold">{v.created}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-slate-400">Completed:</span>
                    <span className="text-emerald-400 font-semibold">{v.completed}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}