'use client';

import React, { useState } from 'react';
import {
  BarChart3,
  Bell,
  TrendingUp,
  PieChart,
  FileSpreadsheet,
  Calendar,
  Download,
  Target,
  CheckCircle2,
  Clock,
  LineChart,
  Activity,
  Layers
} from 'lucide-react';

export default function ReportingPage() {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (email) {
      setSubmitted(true);
      setEmail('');
    }
  };

  const upcomingFeatures = [
    { icon: LineChart, title: 'Pipeline Analytics', description: 'Track deal flow, conversion rates, and revenue forecasts across your pipeline' },
    { icon: Activity, title: 'Outreach Performance', description: 'Measure email open rates, response rates, and engagement over time' },
    { icon: PieChart, title: 'Deal Breakdown', description: 'Visualize your portfolio by property type, stage, market, and more' },
    { icon: Target, title: 'Goal Tracking', description: 'Set targets and track progress with customizable KPI dashboards' },
    { icon: Calendar, title: 'Time-Based Reports', description: 'Compare performance weekly, monthly, quarterly, or custom date ranges' },
    { icon: Download, title: 'Export & Share', description: 'Export to PDF, Excel, or CSV. Schedule automated report delivery' },
  ];

  return (
    <div className="space-y-8">
      {/* Hero Section */}
      <div className="clay-card shadow-lg border border-border/50 max-w-4xl mx-auto text-center p-8 lg:p-12 mb-8">
        {/* Animated Icon Stack */}
        <div className="relative w-24 h-24 mx-auto mb-8">
          <div className="absolute inset-0 clay-icon-btn w-24 h-24 flex items-center justify-center bg-gradient-to-br from-purple-50 to-violet-100">
            <BarChart3 className="w-12 h-12 text-primary" />
          </div>
          <div className="absolute -top-2 -right-2 w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center border border-emerald-200 shadow-sm">
            <TrendingUp className="w-4 h-4 text-emerald-600" />
          </div>
          <div className="absolute -bottom-2 -left-2 w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center border border-blue-200 shadow-sm">
            <PieChart className="w-4 h-4 text-blue-600" />
          </div>
        </div>

        {/* Badge */}
        <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-primary/10 text-primary rounded-full text-sm font-medium mb-6">
          <Clock className="w-4 h-4" />
          Coming Q2 2026
        </div>

        <h1 className="text-3xl lg:text-4xl font-bold text-foreground mb-4">
          Analytics & Reporting
        </h1>
        <p className="text-lg text-slate-500 mb-4 max-w-2xl mx-auto leading-relaxed">
          Turn your CRE data into actionable insights. Get beautiful dashboards,
          custom reports, and the metrics you need to grow your business.
        </p>
        <p className="text-slate-500 mb-8 max-w-xl mx-auto">
          Track pipeline health, measure outreach effectiveness, and identify
          opportunities with powerful analytics built specifically for commercial real estate.
        </p>

        {/* Email Signup */}
        {!submitted ? (
          <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-4">
            <input
              type="email"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="flex-1 px-4 py-3 rounded-xl border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50"
              required
            />
            <button type="submit" className="clay-btn-primary px-6 py-3 font-medium inline-flex items-center justify-center gap-2">
              <Bell className="w-4 h-4" />
              Notify Me
            </button>
          </form>
        ) : (
          <div className="flex items-center justify-center gap-2 text-emerald-600 bg-emerald-50 px-6 py-3 rounded-xl max-w-md mx-auto mb-4">
            <CheckCircle2 className="w-5 h-5" />
            <span className="font-medium">You&apos;re on the list! We&apos;ll notify you when it&apos;s ready.</span>
          </div>
        )}
        <p className="text-sm text-slate-500">
          Be first to access reporting when it launches. No spam, just updates.
        </p>
      </div>

      {/* Features Preview */}
      <div className="max-w-4xl mx-auto">
        <h2 className="text-xl font-semibold text-foreground text-center mb-6">
          What&apos;s Coming
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {upcomingFeatures.map((feature, index) => (
            <div
              key={index}
              className="clay-card p-5 opacity-75 border border-dashed border-border/70"
            >
              <div className="w-10 h-10 bg-muted rounded-lg flex items-center justify-center mb-3">
                <feature.icon className="w-5 h-5 text-muted-foreground" />
              </div>
              <h3 className="font-medium text-foreground mb-1">{feature.title}</h3>
              <p className="text-sm text-slate-500">{feature.description}</p>
            </div>
          ))}
        </div>

        {/* Dashboard Preview (Disabled/Grayed) */}
        <div className="clay-card p-6 mt-8 opacity-50 pointer-events-none select-none border border-dashed border-border">
          <div className="flex items-center gap-2 mb-6 text-muted-foreground">
            <Layers className="w-5 h-5" />
            <span className="font-medium">Dashboard Preview</span>
            <span className="ml-auto text-xs bg-muted px-2 py-1 rounded">Coming Soon</span>
          </div>

          {/* Stats Row */}
          <div className="grid grid-cols-4 gap-4 mb-6">
            {['Total Deals', 'Pipeline Value', 'Conversion Rate', 'Avg. Deal Size'].map((label, i) => (
              <div key={i} className="bg-muted/30 rounded-xl p-4 border border-muted-foreground/10">
                <div className="h-3 w-16 bg-muted/50 rounded mb-2" />
                <div className="h-6 w-20 bg-muted/50 rounded mb-1" />
                <div className="h-2 w-12 bg-muted/50 rounded" />
              </div>
            ))}
          </div>

          {/* Charts Row */}
          <div className="grid grid-cols-2 gap-4">
            {/* Line Chart Placeholder */}
            <div className="bg-muted/30 rounded-xl p-4 border border-muted-foreground/10">
              <div className="h-3 w-24 bg-muted/50 rounded mb-4" />
              <div className="h-32 flex items-end gap-1 px-2">
                {[40, 65, 45, 80, 55, 90, 70, 85, 60, 95, 75, 88].map((h, i) => (
                  <div
                    key={i}
                    className="flex-1 bg-muted/50 rounded-t"
                    style={{ height: `${h}%` }}
                  />
                ))}
              </div>
            </div>

            {/* Pie Chart Placeholder */}
            <div className="bg-muted/30 rounded-xl p-4 border border-muted-foreground/10">
              <div className="h-3 w-28 bg-muted/50 rounded mb-4" />
              <div className="flex items-center justify-center">
                <div className="w-28 h-28 rounded-full border-8 border-muted/50 relative">
                  <div className="absolute inset-0 rounded-full" style={{
                    background: 'conic-gradient(from 0deg, rgb(var(--muted) / 0.7) 0deg 120deg, rgb(var(--muted) / 0.5) 120deg 220deg, rgb(var(--muted) / 0.3) 220deg 360deg)'
                  }} />
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Report Types */}
        <div className="clay-card p-6 mt-6">
          <div className="flex items-center gap-2 mb-4">
            <FileSpreadsheet className="w-5 h-5 text-primary" />
            <h3 className="font-semibold text-foreground">Available Report Types</h3>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {[
              'Pipeline Summary',
              'Outreach Activity',
              'Deal Velocity',
              'Win/Loss Analysis',
              'Market Breakdown',
              'Team Performance',
            ].map((report, index) => (
              <div key={index} className="flex items-center gap-2 text-sm text-slate-500">
                <CheckCircle2 className="w-4 h-4 text-emerald-500" />
                {report}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}