import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { BarChart3, Target, Clock, TrendingUp, CheckCircle } from 'lucide-react'
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts'
import { Spinner } from '@/components/common/Spinner'
import { EmptyState } from '@/components/common/EmptyState'
import { AnalyticsIllustration } from '@/components/common/EmptyStateIllustrations'
import { analyticsApi } from '@/api'
import { usePermissions } from '@/hooks/usePermissions'
import type { PersonalAnalyticsResponse, AnalyticsPeriod } from '@/types'

const OUTCOME_COLORS: Record<string, string> = {
  resolved: '#34d399',
  escalated: '#f87171',
  workaround: '#eab308',
  unresolved: '#94a3b8',
}

const PERIOD_OPTIONS: { value: AnalyticsPeriod; label: string }[] = [
  { value: '7d', label: 'Last 7 days' },
  { value: '30d', label: 'Last 30 days' },
  { value: '90d', label: 'Last 90 days' },
]

export default function MyAnalyticsPage() {
  const { isAccountOwner, isSuperAdmin } = usePermissions()
  const [period, setPeriod] = useState<AnalyticsPeriod>('30d')
  const [data, setData] = useState<PersonalAnalyticsResponse | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setLoading(true)
    analyticsApi
      .getPersonalAnalytics(period)
      .then(setData)
      .catch(console.error)
      .finally(() => setLoading(false))
  }, [period])

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <Spinner />
      </div>
    )
  }

  if (!data) {
    return (
      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
        <EmptyState
          illustration={<AnalyticsIllustration />}
          title="Analytics unavailable"
          description="Failed to load analytics data. Please try again."
        />
      </div>
    )
  }

  if (data.summary.total_sessions === 0) {
    return (
      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
        <EmptyState
          illustration={<AnalyticsIllustration />}
          title="Track your troubleshooting performance"
          description="Analytics show resolution times, common paths, and team efficiency. Data appears automatically as you complete sessions."
          action={
            <Link
              to="/trees"
              className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
            >
              Run Your First Session
            </Link>
          }
          learnMoreLink="/guides/analytics"
        />
      </div>
    )
  }

  const { summary, time_series, top_flows } = data
  const outcomeBreakdown = summary.outcome_breakdown

  return (
    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <span title="My Analytics">
            <BarChart3 size={24} className="text-foreground" />
          </span>
          <h1 className="text-2xl font-bold font-heading text-foreground">My Analytics</h1>
        </div>

        <div className="flex items-center gap-3">
          {(isAccountOwner || isSuperAdmin) && (
            <Link
              to="/analytics"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Team Analytics
            </Link>
          )}
          <select
            value={period}
            onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
            className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary/20"
          >
            {PERIOD_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* Stat Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          icon={TrendingUp}
          label="My Sessions"
          value={summary.total_sessions.toLocaleString()}
        />
        <StatCard
          icon={Target}
          label="My Completion Rate"
          value={`${(summary.completion_rate * 100).toFixed(1)}%`}
        />
        <StatCard
          icon={Clock}
          label="Median Duration"
          value={`${summary.median_duration_minutes} min`}
        />
        <StatCard
          icon={CheckCircle}
          label="Outcomes Resolved"
          value={outcomeBreakdown.resolved.toLocaleString()}
        />
      </div>

      {/* Area Chart — Sessions over Time */}
      <div className="bg-card border border-border rounded-xl p-6">
        <h2 className="text-sm font-semibold text-foreground mb-4">
          My Sessions Over Time
        </h2>
        <ResponsiveContainer width="100%" height={300}>
          <AreaChart data={time_series}>
            <CartesianGrid
              strokeDasharray="3 3"
              stroke="var(--color-border)"
              vertical={false}
            />
            <XAxis
              dataKey="date"
              tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
              tickLine={false}
              axisLine={{ stroke: 'var(--color-border)' }}
              tickFormatter={(value: string) => {
                const d = new Date(value)
                return `${d.getMonth() + 1}/${d.getDate()}`
              }}
            />
            <YAxis
              tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
              tickLine={false}
              axisLine={false}
              allowDecimals={false}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: 'var(--color-card)',
                border: '1px solid var(--color-border)',
                borderRadius: '8px',
                color: 'var(--color-foreground)',
                fontSize: '13px',
              }}
              labelFormatter={(value) => {
                const d = new Date(String(value))
                return d.toLocaleDateString(undefined, {
                  month: 'short',
                  day: 'numeric',
                  year: 'numeric',
                })
              }}
            />
            <Area
              type="monotone"
              dataKey="resolved"
              stackId="1"
              stroke={OUTCOME_COLORS.resolved}
              fill={OUTCOME_COLORS.resolved}
              fillOpacity={0.3}
            />
            <Area
              type="monotone"
              dataKey="escalated"
              stackId="1"
              stroke={OUTCOME_COLORS.escalated}
              fill={OUTCOME_COLORS.escalated}
              fillOpacity={0.3}
            />
            <Area
              type="monotone"
              dataKey="workaround"
              stackId="1"
              stroke={OUTCOME_COLORS.workaround}
              fill={OUTCOME_COLORS.workaround}
              fillOpacity={0.3}
            />
            <Area
              type="monotone"
              dataKey="unresolved"
              stackId="1"
              stroke={OUTCOME_COLORS.unresolved}
              fill={OUTCOME_COLORS.unresolved}
              fillOpacity={0.3}
            />
          </AreaChart>
        </ResponsiveContainer>

        {/* Chart legend */}
        <div className="flex items-center gap-6 mt-3 justify-center">
          {Object.entries(OUTCOME_COLORS).map(([key, color]) => (
            <div key={key} className="flex items-center gap-1.5">
              <div
                className="h-2.5 w-2.5 rounded-full"
                style={{ backgroundColor: color }}
              />
              <span className="text-xs text-muted-foreground capitalize">
                {key}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* Two-Column: Top Flows & Outcome Distribution */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* My Top Flows */}
        <div className="bg-card border border-border rounded-xl p-6">
          <h2 className="text-sm font-semibold text-foreground mb-4">
            My Top Flows
          </h2>
          {top_flows.length === 0 ? (
            <p className="text-sm text-muted-foreground">No flow data for this period.</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-border">
                    <th className="text-left py-2 text-foreground font-medium">
                      Name
                    </th>
                    <th className="text-right py-2 text-foreground font-medium">
                      Sessions
                    </th>
                    <th className="text-right py-2 text-foreground font-medium">
                      Completion
                    </th>
                    <th className="text-right py-2 text-foreground font-medium">
                      Median
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {top_flows.map((flow) => (
                    <tr
                      key={flow.tree_id}
                      className="border-b border-border last:border-0"
                    >
                      <td className="py-2 text-muted-foreground truncate max-w-[200px]">
                        {flow.name}
                      </td>
                      <td className="py-2 text-right text-muted-foreground">
                        {flow.sessions}
                      </td>
                      <td className="py-2 text-right text-muted-foreground">
                        {(flow.completion_rate * 100).toFixed(1)}%
                      </td>
                      <td className="py-2 text-right text-muted-foreground">
                        {flow.median_duration_minutes} min
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>

        {/* Outcome Distribution */}
        <div className="bg-card border border-border rounded-xl p-6">
          <h2 className="text-sm font-semibold text-foreground mb-4">
            Outcome Distribution
          </h2>
          {summary.total_sessions === 0 ? (
            <p className="text-sm text-muted-foreground">No session data for this period.</p>
          ) : (
            <div className="space-y-3">
              {(
                Object.entries(outcomeBreakdown) as [string, number][]
              ).map(([outcome, count]) => {
                const total = Object.values(outcomeBreakdown).reduce(
                  (sum, v) => sum + v,
                  0
                )
                const pct = total > 0 ? (count / total) * 100 : 0

                return (
                  <div key={outcome}>
                    <div className="flex items-center justify-between mb-1">
                      <div className="flex items-center gap-2">
                        <div
                          className="h-2.5 w-2.5 rounded-full shrink-0"
                          style={{
                            backgroundColor:
                              OUTCOME_COLORS[outcome] ?? '#94a3b8',
                          }}
                        />
                        <span className="text-sm text-muted-foreground capitalize">
                          {outcome}
                        </span>
                      </div>
                      <span className="text-sm text-foreground font-medium">
                        {count} ({pct.toFixed(1)}%)
                      </span>
                    </div>
                    <div className="h-2 rounded-full bg-border overflow-hidden">
                      <div
                        className="h-full rounded-full transition-all duration-500"
                        style={{
                          width: `${pct}%`,
                          backgroundColor:
                            OUTCOME_COLORS[outcome] ?? '#94a3b8',
                        }}
                      />
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

function StatCard({
  icon: Icon,
  label,
  value,
}: {
  icon: React.ComponentType<{ size?: number; className?: string }>
  label: string
  value: string
}) {
  return (
    <div className="bg-card border border-border rounded-xl p-6">
      <div className="flex items-center gap-2 mb-2">
        <Icon size={16} className="text-muted-foreground" />
        <span className="text-sm text-muted-foreground">{label}</span>
      </div>
      <p className="text-3xl font-bold text-foreground">{value}</p>
    </div>
  )
}