import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend, BarChart, Bar, Cell } from 'recharts';
import { StatCard } from '../ui/StatCard';
import { Users, Truck, Smartphone } from 'lucide-react';

const driverGrowth = [
  { date: '06/01', 活跃APP: 15, 绑定车辆: 2 },
  { date: '06/02', 活跃APP: 14, 绑定车辆: 2 },
  { date: '06/03', 活跃APP: 13, 绑定车辆: 1 },
  { date: '06/04', 活跃APP: 12, 绑定车辆: 2 },
  { date: '06/05', 活跃APP: 11, 绑定车辆: 1 },
  { date: '06/06', 活跃APP: 10, 绑定车辆: 1 },
  { date: '06/07', 活跃APP: 10, 绑定车辆: 1 },
  { date: '06/08', 活跃APP: 9, 绑定车辆: 1 },
  { date: '06/09', 活跃APP: 4, 绑定车辆: 0 },
];

const driverByStation = [
  { name: '嘉兴嘉锦', value: 10 },
  { name: '嘉兴嘉燃', value: 8 },
  { name: '嘉燃经开', value: 5 },
  { name: '如皋华神', value: 3 },
  { name: '桐乡绿能', value: 2 },
  { name: '花桥/嘉善等', value: 2 },
];

export function UsersView() {
  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
       <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <StatCard
          title="累计入池APP用户总数"
          value="32 人"
          subValue="近期活跃司机达到16人"
          icon={Smartphone}
          highlight
        />
        <StatCard
          title="累计绑定车辆司机总数"
          value="19 人"
          subValue="系统全量历史转化留存"
          icon={Truck}
        />
        <StatCard
          title="总核验车辆绑定率"
          value="59 %"
          subValue="公司自营与核心车队"
          icon={Users}
        />
        <StatCard
          title="近期最佳外拓来源区"
          value="如皋/桐乡"
          subValue="如皋及桐乡累计贡献外围散户活跃"
          icon={Users}
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm">
          <div className="mb-6">
              <h3 className="text-lg font-bold text-slate-800">平台APP渗透与车辆绑定追踪</h3>
              <p className="text-sm text-slate-500 mt-1">每日活跃司机与新增绑定车辆动态</p>
          </div>
          <div className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={driverGrowth} margin={{ top: 10, right: 10, left: -25, bottom: 0 }}>
                <CartesianGrid vertical={false} stroke="#f1f5f9" strokeDasharray="3 3"/>
                <XAxis dataKey="date" axisLine={false} tickLine={false} tick={{fill: '#64748b', fontSize: 12}} dy={10} />
                <YAxis axisLine={false} tickLine={false} tick={{fill: '#64748b', fontSize: 12}} />
                <Tooltip cursor={{stroke: '#e2e8f0', strokeWidth: 2}} contentStyle={{ borderRadius: '12px', border: '1px solid #e2e8f0' }}/>
                <Legend verticalAlign="top" height={36} iconType="circle" wrapperStyle={{ fontSize: '12px' }} />
                <Line type="monotone" dataKey="绑定车辆" stroke="#6366f1" strokeWidth={3} dot={{r: 4}} activeDot={{r: 6}} />
                <Line type="monotone" dataKey="活跃APP" stroke="#14b8a6" strokeWidth={3} dot={{r: 4}} activeDot={{r: 6}} />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm">
          <div className="mb-6">
              <h3 className="text-lg font-bold text-slate-800">全站存量司机资源池分布</h3>
              <p className="text-sm text-slate-500 mt-1">嘉燃与嘉锦双站司机活跃度领先，周边站点持续拓展中</p>
          </div>
          <div className="h-[300px]">
             <ResponsiveContainer width="100%" height="100%">
                <BarChart data={driverByStation} layout="vertical" margin={{ top: 0, right: 30, left: 20, bottom: 0 }}>
                  <XAxis type="number" hide />
                  <YAxis dataKey="name" type="category" axisLine={false} tickLine={false} tick={{fill: '#475569', fontSize: 12, fontWeight: 500}} width={80} />
                  <Tooltip cursor={{fill: '#f8fafc'}} contentStyle={{ borderRadius: '12px', border: '1px solid #e2e8f0' }}/>
                  <Bar dataKey="value" radius={[0, 6, 6, 0]} barSize={28}>
                    {driverByStation.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={index === 0 ? '#f59e0b' : '#94a3b8'} />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
          </div>
        </div>
      </div>
    </div>
  );
}