
'use client';

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Users,
  Package,
  TrendingDown,
  Mail,
  GitBranch,
  Palette,
  BarChart,
  Clock,
  ArrowRight,
  CheckCircle,
} from 'lucide-react';

export default function Phase3Page() {
  const { data: session, status } = useSession() || {};
  const router = useRouter();

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/auth/signin');
    }
  }, [status, router]);

  if (status === 'loading') {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading...</p>
        </div>
      </div>
    );
  }

  if (!session) {
    return null;
  }

  const features = [
    // Tier 1: Revenue & Growth
    {
      tier: 'Tier 1: Revenue & Growth',
      items: [
        {
          title: 'Referral Rewards Engine',
          description: 'Track and manage referral codes, conversions, and rewards',
          icon: Users,
          href: '/phase3/referrals',
          status: 'active',
          impact: '3x organic growth, reduce CAC by 60%',
        },
        {
          title: 'Multi-Job Bundling',
          description: 'Bundle multiple jobs for contractors with route optimization',
          icon: Package,
          href: '/phase3/bundles',
          status: 'active',
          impact: '35% increase in average contract value',
        },
        {
          title: 'Quote Rejection Intelligence',
          description: 'Analyze rejections and create recovery campaigns',
          icon: TrendingDown,
          href: '/phase3/quote-rejections',
          status: 'active',
          impact: 'Recover 20% of lost quotes',
        },
        {
          title: 'Recovery Campaigns',
          description: 'Automated win-back campaigns for rejected quotes',
          icon: Mail,
          href: '/phase3/recovery-campaigns',
          status: 'active',
          impact: 'Improve win rates significantly',
        },
      ],
    },
    // Tier 2: Intelligence & Automation
    {
      tier: 'Tier 2: Intelligence & Automation',
      items: [
        {
          title: 'Quote Rerouting Engine',
          description: 'Intelligent quote routing with escalation workflows',
          icon: GitBranch,
          href: '/phase3/routing',
          status: 'active',
          impact: '50% reduction in quote latency',
        },
        {
          title: 'White-Label Configuration',
          description: 'Multi-tenant branding and regional customization',
          icon: Palette,
          href: '/phase3/white-label',
          status: 'active',
          impact: 'Enable franchise model, scale globally',
        },
      ],
    },
    // Tier 3: Analytics & Optimization
    {
      tier: 'Tier 3: Analytics & Optimization',
      items: [
        {
          title: 'Marketing ROI Dashboard',
          description: 'Track campaign performance and ROI across channels',
          icon: BarChart,
          href: '/phase3/marketing',
          status: 'active',
          impact: '50% improvement in ROAS',
        },
        {
          title: 'Payment Latency Analyzer',
          description: 'Track and optimize quote-to-payment timeline',
          icon: Clock,
          href: '/phase3/payment-latency',
          status: 'active',
          impact: '30% reduction in DSO',
        },
      ],
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      <div className="container mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-4xl font-bold text-gray-900 mb-2">Phase 3: Advanced Features</h1>
          <p className="text-lg text-gray-600">
            Revenue optimization, intelligent automation, and advanced analytics
          </p>
          <div className="flex flex-wrap gap-2 mt-4">
            <Badge variant="outline" className="bg-green-50">
              <CheckCircle className="h-3 w-3 mr-1" />
              10 Features Active
            </Badge>
            <Badge variant="outline" className="bg-blue-50">
              All Tiers Implemented
            </Badge>
            <Badge variant="outline" className="bg-purple-50">
              Production Ready
            </Badge>
          </div>
        </div>

        {/* Feature Cards by Tier */}
        {features.map((tier, tierIndex) => (
          <div key={tierIndex} className="mb-12">
            <h2 className="text-2xl font-bold text-gray-800 mb-6">{tier.tier}</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {tier.items.map((feature, index) => {
                const Icon = feature.icon;
                return (
                  <Card
                    key={index}
                    className="hover:shadow-lg transition-all duration-200 cursor-pointer group border-2 hover:border-blue-300"
                    onClick={() => router.push(feature.href)}
                  >
                    <CardHeader>
                      <div className="flex items-start justify-between mb-2">
                        <div className="p-3 bg-blue-100 rounded-lg group-hover:bg-blue-200 transition-colors">
                          <Icon className="h-6 w-6 text-blue-600" />
                        </div>
                        <Badge
                          variant="outline"
                          className="bg-green-50 text-green-700 border-green-200"
                        >
                          {feature.status}
                        </Badge>
                      </div>
                      <CardTitle className="text-xl">{feature.title}</CardTitle>
                      <CardDescription className="text-sm">
                        {feature.description}
                      </CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-3">
                        <div className="p-3 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg">
                          <p className="text-xs font-medium text-gray-600 mb-1">Expected Impact</p>
                          <p className="text-sm font-semibold text-gray-900">{feature.impact}</p>
                        </div>
                        <Button
                          variant="ghost"
                          className="w-full group-hover:bg-blue-50 transition-colors"
                        >
                          Open Dashboard
                          <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          </div>
        ))}

        {/* Success Metrics Overview */}
        <Card className="mt-8 bg-gradient-to-br from-blue-600 to-purple-600 text-white border-0">
          <CardHeader>
            <CardTitle className="text-2xl text-white">Phase 3 Success Metrics</CardTitle>
            <CardDescription className="text-blue-100">
              Expected improvements across all business areas
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="p-4 bg-white/10 rounded-lg backdrop-blur-sm">
                <h3 className="text-sm font-medium text-blue-100 mb-2">Revenue Growth</h3>
                <p className="text-3xl font-bold">+35%</p>
                <p className="text-sm text-blue-100 mt-1">Average contract value increase</p>
              </div>
              <div className="p-4 bg-white/10 rounded-lg backdrop-blur-sm">
                <h3 className="text-sm font-medium text-blue-100 mb-2">Operational Efficiency</h3>
                <p className="text-3xl font-bold">-50%</p>
                <p className="text-sm text-blue-100 mt-1">Quote latency reduction</p>
              </div>
              <div className="p-4 bg-white/10 rounded-lg backdrop-blur-sm">
                <h3 className="text-sm font-medium text-blue-100 mb-2">Customer Acquisition</h3>
                <p className="text-3xl font-bold">-60%</p>
                <p className="text-sm text-blue-100 mt-1">CAC reduction via referrals</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
