'use client';

import Link from 'next/link';
import { useState, useMemo } from 'react';
import { useJobs } from '@/contexts/JobsContext';
import { JobStatus } from '@/components/ScraperTest';

// Mock data for initial development - will be replaced with API data
const MOCK_CLIENTS = [
  { client_id: 'client-001', job_count: 45, success_rate: 94.2 },
  { client_id: 'client-002', job_count: 38, success_rate: 89.5 },
  { client_id: 'client-003', job_count: 27, success_rate: 96.3 },
  { client_id: 'client-004', job_count: 19, success_rate: 84.2 },
  { client_id: 'client-005', job_count: 12, success_rate: 91.7 },
];

function formatDuration(seconds: number): string {
  if (seconds < 60) return `${seconds.toFixed(1)}s`;
  const mins = Math.floor(seconds / 60);
  const secs = Math.round(seconds % 60);
  return `${mins}m ${secs}s`;
}

function extractBusinessName(job: JobStatus): string {
  if (job.business_name) return job.business_name;
  try {
    const urlObj = new URL(job.url);
    const query = urlObj.searchParams.get('query');
    return query ? decodeURIComponent(query) : 'Unknown Business';
  } catch {
    return 'Unknown Business';
  }
}

function formatDate(date: Date): string {
  return date.toLocaleDateString('en-US', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
}

function getErrorType(errorMessage: string | null): string {
  if (!errorMessage) return 'Unknown Error';
  const msg = errorMessage.toLowerCase();
  if (msg.includes('timeout')) return 'Timeout';
  if (msg.includes('network') || msg.includes('connection')) return 'Network Error';
  if (msg.includes('captcha') || msg.includes('bot')) return 'Bot Detection';
  if (msg.includes('element') || msg.includes('selector')) return 'Element Not Found';
  if (msg.includes('memory')) return 'Memory Error';
  return 'Scrape Error';
}

export default function DashboardPage() {
  const { jobs, isLoading } = useJobs();
  const [currentDate] = useState(new Date());

  // Calculate stats from jobs data
  const stats = useMemo(() => {
    const now = new Date();
    const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);

    // Jobs from last 24 hours
    const recentJobs = jobs.filter(
      (j) => new Date(j.created_at) >= oneDayAgo
    );

    // Currently running jobs
    const activeJobs = jobs.filter((j) => j.status === 'running');

    // Completed jobs from last 24h
    const completedRecent = recentJobs.filter(
      (j) => j.status === 'completed'
    );

    // Failed jobs from last 24h
    const failedRecent = recentJobs.filter(
      (j) => j.status === 'failed'
    );

    // Calculate success rate
    const totalWithOutcome = completedRecent.length + failedRecent.length;
    const successRate =
      totalWithOutcome > 0
        ? (completedRecent.length / totalWithOutcome) * 100
        : 0;

    // Calculate average duration for completed jobs
    const completedWithTime = jobs.filter(
      (j) => j.status === 'completed' && j.scrape_time !== null
    );
    const avgDuration =
      completedWithTime.length > 0
        ? completedWithTime.reduce((sum, j) => sum + (j.scrape_time || 0), 0) /
          completedWithTime.length
        : 0;

    // Previous 24h for trend comparison
    const twoDaysAgo = new Date(now.getTime() - 48 * 60 * 60 * 1000);
    const previousDayJobs = jobs.filter(
      (j) =>
        new Date(j.created_at) >= twoDaysAgo &&
        new Date(j.created_at) < oneDayAgo
    );

    const jobsTrend = recentJobs.length - previousDayJobs.length;

    return {
      totalJobs24h: recentJobs.length,
      jobsTrend,
      successRate: successRate.toFixed(1),
      activeJobs: activeJobs.length,
      avgDuration,
    };
  }, [jobs]);

  // Jobs by status counts
  const statusCounts = useMemo(() => {
    return {
      pending: jobs.filter((j) => j.status === 'pending').length,
      running: jobs.filter((j) => j.status === 'running').length,
      completed: jobs.filter((j) => j.status === 'completed').length,
      failed: jobs.filter((j) => j.status === 'failed').length,
      partial: jobs.filter((j) => j.status === 'partial').length,
    };
  }, [jobs]);

  // Recent failed jobs
  const recentFailedJobs = useMemo(() => {
    return jobs
      .filter((j) => j.status === 'failed' || j.status === 'partial')
      .sort(
        (a, b) =>
          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
      )
      .slice(0, 5);
  }, [jobs]);

  if (isLoading) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  return (
    <div className="h-full overflow-y-auto p-6">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900">ReviewIQ Dashboard</h1>
        <p className="text-sm text-gray-600 mt-1">{formatDate(currentDate)}</p>
      </div>

      {/* System Health Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {/* Total Jobs (24h) */}
        <div className="bg-white rounded-xl border-2 border-gray-200 p-5">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm font-medium text-gray-500">
              Total Jobs (24h)
            </span>
            <div className="p-2 bg-blue-100 rounded-lg">
              <svg
                className="w-5 h-5 text-blue-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
                />
              </svg>
            </div>
          </div>
          <div className="flex items-end gap-2">
            <span className="text-3xl font-bold text-gray-900">
              {stats.totalJobs24h}
            </span>
            {stats.jobsTrend !== 0 && (
              <span
                className={`flex items-center text-sm font-medium mb-1 ${
                  stats.jobsTrend > 0 ? 'text-green-600' : 'text-red-600'
                }`}
              >
                {stats.jobsTrend > 0 ? (
                  <svg
                    className="w-4 h-4"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M5 10l7-7m0 0l7 7m-7-7v18"
                    />
                  </svg>
                ) : (
                  <svg
                    className="w-4 h-4"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19 14l-7 7m0 0l-7-7m7 7V3"
                    />
                  </svg>
                )}
                {Math.abs(stats.jobsTrend)}
              </span>
            )}
          </div>
        </div>

        {/* Success Rate (24h) */}
        <div className="bg-white rounded-xl border-2 border-gray-200 p-5">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm font-medium text-gray-500">
              Success Rate (24h)
            </span>
            <div className="p-2 bg-green-100 rounded-lg">
              <svg
                className="w-5 h-5 text-green-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </div>
          </div>
          <div className="flex items-end gap-2">
            <span className="text-3xl font-bold text-gray-900">
              {stats.successRate}%
            </span>
          </div>
        </div>

        {/* Active Jobs */}
        <div className="bg-white rounded-xl border-2 border-gray-200 p-5">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm font-medium text-gray-500">
              Active Jobs
            </span>
            <div className="p-2 bg-yellow-100 rounded-lg">
              <svg
                className="w-5 h-5 text-yellow-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M13 10V3L4 14h7v7l9-11h-7z"
                />
              </svg>
            </div>
          </div>
          <div className="flex items-end gap-2">
            <span className="text-3xl font-bold text-gray-900">
              {stats.activeJobs}
            </span>
            {stats.activeJobs > 0 && (
              <span className="flex items-center text-sm font-medium text-yellow-600 mb-1">
                <div className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse mr-1" />
                Running
              </span>
            )}
          </div>
        </div>

        {/* Avg Duration */}
        <div className="bg-white rounded-xl border-2 border-gray-200 p-5">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm font-medium text-gray-500">
              Avg Duration
            </span>
            <div className="p-2 bg-purple-100 rounded-lg">
              <svg
                className="w-5 h-5 text-purple-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </div>
          </div>
          <div className="flex items-end gap-2">
            <span className="text-3xl font-bold text-gray-900">
              {stats.avgDuration > 0 ? formatDuration(stats.avgDuration) : '--'}
            </span>
          </div>
        </div>
      </div>

      {/* Jobs by Status */}
      <div className="bg-white rounded-xl border-2 border-gray-200 p-5 mb-6">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">
          Jobs by Status
        </h2>
        <div className="flex flex-wrap gap-3">
          <Link
            href="/jobs?status=pending"
            className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
          >
            <span className="w-3 h-3 rounded-full bg-gray-400" />
            <span className="font-medium text-gray-700">Pending</span>
            <span className="px-2 py-0.5 bg-gray-200 rounded-full text-sm font-bold text-gray-600">
              {statusCounts.pending}
            </span>
          </Link>
          <Link
            href="/jobs?status=running"
            className="flex items-center gap-2 px-4 py-2 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
          >
            <span className="w-3 h-3 rounded-full bg-blue-500 animate-pulse" />
            <span className="font-medium text-blue-700">Running</span>
            <span className="px-2 py-0.5 bg-blue-200 rounded-full text-sm font-bold text-blue-700">
              {statusCounts.running}
            </span>
          </Link>
          <Link
            href="/jobs?status=completed"
            className="flex items-center gap-2 px-4 py-2 bg-green-50 rounded-lg hover:bg-green-100 transition-colors"
          >
            <span className="w-3 h-3 rounded-full bg-green-500" />
            <span className="font-medium text-green-700">Completed</span>
            <span className="px-2 py-0.5 bg-green-200 rounded-full text-sm font-bold text-green-700">
              {statusCounts.completed}
            </span>
          </Link>
          <Link
            href="/jobs?status=partial"
            className="flex items-center gap-2 px-4 py-2 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors"
          >
            <span className="w-3 h-3 rounded-full bg-orange-500" />
            <span className="font-medium text-orange-700">Partial</span>
            <span className="px-2 py-0.5 bg-orange-200 rounded-full text-sm font-bold text-orange-700">
              {statusCounts.partial}
            </span>
          </Link>
          <Link
            href="/jobs?status=failed"
            className="flex items-center gap-2 px-4 py-2 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
          >
            <span className="w-3 h-3 rounded-full bg-red-500" />
            <span className="font-medium text-red-700">Failed</span>
            <span className="px-2 py-0.5 bg-red-200 rounded-full text-sm font-bold text-red-700">
              {statusCounts.failed}
            </span>
          </Link>
        </div>
      </div>

      {/* Two Column Layout */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Recent Problems */}
        <div className="bg-white rounded-xl border-2 border-gray-200 p-5">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-gray-900">
              Recent Problems
            </h2>
            <Link
              href="/jobs?status=failed"
              className="text-sm text-blue-600 hover:text-blue-700 font-medium"
            >
              View all
            </Link>
          </div>
          {recentFailedJobs.length === 0 ? (
            <div className="py-8 text-center text-gray-500">
              <svg
                className="w-12 h-12 mx-auto mb-3 opacity-30"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <p className="font-medium">No recent failures</p>
              <p className="text-sm mt-1">All systems running smoothly</p>
            </div>
          ) : (
            <div className="space-y-3">
              {recentFailedJobs.map((job) => (
                <Link
                  key={job.job_id}
                  href={`/jobs/${job.job_id}`}
                  className="block p-3 bg-red-50 border border-red-100 rounded-lg hover:border-red-300 transition-colors"
                >
                  <div className="flex items-start justify-between mb-1">
                    <span
                      className={`px-2 py-0.5 rounded text-xs font-semibold ${
                        job.status === 'failed'
                          ? 'bg-red-200 text-red-800'
                          : 'bg-orange-200 text-orange-800'
                      }`}
                    >
                      {getErrorType(job.error_message)}
                    </span>
                    <span className="text-xs text-gray-500">
                      {new Date(job.created_at).toLocaleTimeString()}
                    </span>
                  </div>
                  <p className="text-sm font-medium text-gray-800 truncate">
                    {extractBusinessName(job)}
                  </p>
                  <p className="text-xs text-gray-500 truncate mt-1">
                    {job.url}
                  </p>
                </Link>
              ))}
            </div>
          )}
        </div>

        {/* Top Clients */}
        <div className="bg-white rounded-xl border-2 border-gray-200 p-5">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-gray-900">Top Clients</h2>
            <Link
              href="/dashboard/clients"
              className="text-sm text-blue-600 hover:text-blue-700 font-medium"
            >
              View all
            </Link>
          </div>
          <div className="space-y-3">
            {MOCK_CLIENTS.map((client, index) => (
              <div
                key={client.client_id}
                className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
              >
                <div className="flex items-center gap-3">
                  <span className="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-xs font-bold">
                    {index + 1}
                  </span>
                  <div>
                    <p className="font-medium text-gray-800">
                      {client.client_id}
                    </p>
                    <p className="text-xs text-gray-500">
                      {client.job_count} jobs
                    </p>
                  </div>
                </div>
                <div className="text-right">
                  <p
                    className={`font-semibold ${
                      client.success_rate >= 90
                        ? 'text-green-600'
                        : client.success_rate >= 80
                        ? 'text-yellow-600'
                        : 'text-red-600'
                    }`}
                  >
                    {client.success_rate}%
                  </p>
                  <p className="text-xs text-gray-500">success</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Quick Actions */}
      <div className="mt-6 flex flex-wrap gap-3">
        <Link
          href="/new"
          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
        >
          <svg
            className="w-5 h-5"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 4v16m8-8H4"
            />
          </svg>
          New Scrape
        </Link>
        <Link
          href="/jobs"
          className="flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium"
        >
          <svg
            className="w-5 h-5"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
            />
          </svg>
          View All Jobs
        </Link>
        <Link
          href="/analytics"
          className="flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors font-medium"
        >
          <svg
            className="w-5 h-5"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
            />
          </svg>
          Analytics
        </Link>
      </div>
    </div>
  );
}