"use client"

import React from "react"
import { useRouter } from "next/navigation"
import { redirect } from "next/navigation"

import { useWalletStore } from "@/lib/wallet-store"
import { useTrustData } from "@/hooks/use-trust-data"
import { InfoCircle, ExternalLink, Shield, LockKeyhole, Award, CoinsStacked } from "@/icons"
import { ArrowRight, CheckCircle, Clock, Edit, MessageSquare, VoteIcon, User, Info } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ConnectWalletButton } from "@/components/connect-wallet-button"

// Mock data
const mockPerspectives = [
  {
    id: 1,
    title: "Improve bike lane safety",
    issue: "Infrastructure",
    date: "2024-02-10",
    status: "Synthesized",
  },
  {
    id: 2,
    title: "Expand library hours",
    issue: "Education",
    date: "2024-01-25",
    status: "Synthesized",
  },
  {
    id: 3,
    title: "Community garden proposal",
    issue: "Environmental Policy",
    date: "2024-01-15",
    status: "Pending",
  },
]

const mockVotes = [
  {
    id: 1,
    insight: "Increase Park Funding",
    vote: "Yes",
    date: "2024-02-15",
  },
  {
    id: 2,
    insight: "Public Transportation Expansion",
    vote: "Yes",
    date: "2024-02-10",
  },
  {
    id: 3,
    insight: "After-School Programs",
    vote: "Yes",
    date: "2024-01-28",
  },
  {
    id: 4,
    insight: "Bike Lane Network",
    vote: "No",
    date: "2024-01-20",
  },
]

export default function ProfilePage() {
  const router = useRouter()
  const {
    walletConnected,
    walletAddress,
    username,
    isVerified,
    country,
    citizenshipVerified,
    eligibilityVerified,
    verificationStatus,
    perspectivesSubmittedToday,
    connectWallet
  } = useWalletStore()
  const { trustScore, dailyLimit, trustActions, isLoading } = useTrustData()

  // Redirect to login if not connected
  if (!walletConnected) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen p-6 space-y-8 bg-gray-50">
        <div className="p-8 bg-white rounded-lg shadow-md w-full max-w-md">
          <h1 className="text-2xl font-bold text-center mb-6">Connect Wallet to View Profile</h1>
          <p className="text-gray-600 mb-6 text-center">
            Please connect your wallet to access your profile and view your participation metrics.
          </p>
          <button
            onClick={() => connectWallet()}
            className="w-full py-3 px-4 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition duration-200"
          >
            Connect Wallet
          </button>
        </div>
      </div>
    )
  }

  const getTrustLevel = (score: number) => {
    if (score >= 80) return "Gold"
    if (score >= 60) return "Silver"
    if (score >= 40) return "Bronze"
    if (score >= 20) return "Starter"
    return "New"
  }

  const trustLevel = getTrustLevel(trustScore)

  const trustColor = {
    Gold: "text-yellow-600 bg-yellow-100 border-yellow-300",
    Silver: "text-gray-600 bg-gray-100 border-gray-300",
    Bronze: "text-amber-700 bg-amber-100 border-amber-300",
    Starter: "text-blue-600 bg-blue-100 border-blue-300",
    New: "text-green-600 bg-green-100 border-green-300"
  }[trustLevel]

  const progressPercent = Math.min(100, Math.max(0, trustScore))

  // Get the badge style based on verification status
  const getVerificationBadge = () => {
    if (!isVerified) {
      return (
        <button
          onClick={() => router.push('/profile/verify')}
          className="flex items-center px-3 py-1 text-orange-600 bg-orange-100 rounded-full border border-orange-300 hover:bg-orange-200 transition dark:bg-orange-950 dark:border-orange-800 dark:text-orange-400 dark:hover:bg-orange-900"
        >
          <LockKeyhole className="w-4 h-4 mr-1" />
          <span className="text-sm font-medium">Verify Now</span>
        </button>
      );
    }

    if (verificationStatus === "Fully Eligible") {
      return (
        <div className="flex items-center px-3 py-1 text-green-600 bg-green-100 rounded-full border border-green-300 dark:bg-green-950 dark:border-green-800 dark:text-green-400">
          <Shield className="w-4 h-4 mr-1" />
          <span className="text-sm font-medium">Fully Eligible</span>
        </div>
      );
    }

    if (verificationStatus === "Verified" || citizenshipVerified) {
      return (
        <div className="flex items-center px-3 py-1 text-blue-600 bg-blue-100 rounded-full border border-blue-300 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-400">
          <Shield className="w-4 h-4 mr-1" />
          <span className="text-sm font-medium">Citizenship Verified</span>
        </div>
      );
    }

    return (
      <button
        onClick={() => router.push('/profile/verify')}
        className="flex items-center px-3 py-1 text-orange-600 bg-orange-100 rounded-full border border-orange-300 hover:bg-orange-200 transition dark:bg-orange-950 dark:border-orange-800 dark:text-orange-400 dark:hover:bg-orange-900"
      >
        <LockKeyhole className="w-4 h-4 mr-1" />
        <span className="text-sm font-medium">Verify Now</span>
      </button>
    );
  };

  return (
    <div className="container mx-auto px-4 py-8 max-w-5xl">
      {!isVerified && (
        <div className="mb-6 rounded-lg p-4 border border-amber-300 bg-amber-50 dark:bg-amber-950/30 dark:border-amber-800">
          <div className="flex items-start">
            <Info className="h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
            <div className="ml-3">
              <h3 className="text-sm font-medium text-amber-800 dark:text-amber-400">Verify to participate fully</h3>
              <p className="mt-1 text-sm text-amber-700 dark:text-amber-500">
                Without verification, you're in read-only mode with limited actions. Verify your identity to unlock all features.
              </p>
              <div className="mt-3">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => router.push('/profile/verify')}
                  className="bg-amber-600 text-white hover:bg-amber-700 border-amber-700 dark:bg-amber-800 dark:border-amber-700 dark:hover:bg-amber-700 dark:text-white"
                >
                  Verify Identity
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Profile Info Section */}
        <div className="lg:col-span-1">
          <div className="bg-card rounded-lg shadow-md p-6 mb-6 dark:border dark:border-border">
            <div className="flex flex-col items-center mb-6">
              <div className="w-24 h-24 bg-muted rounded-full mb-4 flex items-center justify-center text-muted-foreground text-xl">
                {username ? username[0].toUpperCase() : "?"}
              </div>
              <h2 className="text-xl font-bold">{username || "Anonymous User"}</h2>
              <p className="text-muted-foreground text-sm mb-2 break-all">{walletAddress}</p>

              <div className="flex items-center mt-2">
                {getVerificationBadge()}
              </div>

              {country && (
                <div className="mt-3 text-sm text-muted-foreground">
                  Country: {country}
                </div>
              )}
            </div>

            {/* Trust Score Section */}
            <div className="mb-6">
              <h3 className="text-lg font-semibold mb-3">Trust Score</h3>
              <div className="flex items-center mb-2">
                <span className="font-medium text-lg">{trustScore}</span>
                <span className="text-muted-foreground text-sm ml-1">/ 100</span>
              </div>

              <div className="w-full bg-muted rounded-full h-2.5">
                <div
                  className="bg-primary h-2.5 rounded-full"
                  style={{ width: `${progressPercent}%` }}
                ></div>
              </div>

              <div className="mt-4">
                <div className="flex justify-between text-sm text-muted-foreground mb-2">
                  <span>Daily Perspective Limit:</span>
                  <span className="font-medium">{dailyLimit}</span>
                </div>
                <div className="flex justify-between text-sm text-muted-foreground">
                  <span>Perspectives Submitted Today:</span>
                  <span className="font-medium">{perspectivesSubmittedToday}</span>
                </div>
              </div>
            </div>

            {/* How to earn trust section for unverified users */}
            {!isVerified && (
              <div className="border-t pt-4 dark:border-border">
                <h3 className="text-lg font-semibold mb-3 flex items-center">
                  <InfoCircle className="w-4 h-4 mr-1 text-blue-500" />
                  How to Earn Trust
                </h3>
                <ul className="space-y-2">
                  {trustActions.map((action, index) => (
                    <li key={index} className="flex justify-between text-sm">
                      <span>{action.action}</span>
                      <span className="font-medium text-green-600 dark:text-green-400">+{action.points} points</span>
                    </li>
                  ))}
                </ul>
                <div className="mt-4 p-3 bg-blue-50 rounded-md text-sm text-blue-700 dark:bg-blue-950 dark:text-blue-400 dark:border dark:border-blue-900">
                  <p className="flex items-start">
                    <InfoCircle className="w-4 h-4 mr-1 mt-0.5 flex-shrink-0" />
                    <span>Higher trust scores increase your daily submission limit. Verified users have unlimited submissions.</span>
                  </p>
                </div>
              </div>
            )}

            {/* Verification status details for verified users */}
            {isVerified && (
              <div className="border-t pt-4 dark:border-border">
                <h3 className="text-lg font-semibold mb-3 flex items-center">
                  <Shield className="w-4 h-4 mr-1 text-green-500" />
                  Verification Status
                </h3>
                <ul className="space-y-2">
                  <li className="flex items-start text-sm">
                    <CheckCircle className={`w-4 h-4 mr-2 ${citizenshipVerified ? "text-green-600" : "text-gray-400"} dark:${citizenshipVerified ? "text-green-400" : "text-gray-600"} mt-0.5`} />
                    <span>Citizenship Verification: {citizenshipVerified ? "Verified" : "Not Verified"}</span>
                  </li>
                  <li className="flex items-start text-sm">
                    <CheckCircle className={`w-4 h-4 mr-2 ${eligibilityVerified ? "text-green-600" : "text-gray-400"} dark:${eligibilityVerified ? "text-green-400" : "text-gray-600"} mt-0.5`} />
                    <span>Eligibility Verification: {eligibilityVerified ? "Verified" : "Not Verified"}</span>
                  </li>
                </ul>
                {!eligibilityVerified && citizenshipVerified && (
                  <div className="mt-4">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => router.push('/profile/verify')}
                      className="w-full"
                    >
                      Complete Eligibility Verification
                    </Button>
                  </div>
                )}
              </div>
            )}

            {/* Privileges for verified users */}
            {isVerified && (
              <div className="border-t pt-4 dark:border-border">
                <h3 className="text-lg font-semibold mb-3 flex items-center">
                  <Shield className="w-4 h-4 mr-1 text-green-500" />
                  Verified Privileges
                </h3>
                <ul className="space-y-2">
                  <li className="flex items-start text-sm">
                    <CoinsStacked className="w-4 h-4 mr-2 text-green-600 dark:text-green-400 mt-0.5" />
                    <span>Unlimited daily perspective submissions</span>
                  </li>
                  <li className="flex items-start text-sm">
                    <CoinsStacked className="w-4 h-4 mr-2 text-green-600 dark:text-green-400 mt-0.5" />
                    <span>Ability to moderate flagged content</span>
                  </li>
                  <li className="flex items-start text-sm">
                    <CoinsStacked className="w-4 h-4 mr-2 text-green-600 dark:text-green-400 mt-0.5" />
                    <span>Higher voting power in consensus</span>
                  </li>
                  <li className="flex items-start text-sm">
                    <CoinsStacked className="w-4 h-4 mr-2 text-green-600 dark:text-green-400 mt-0.5" />
                    <span>Access to verified-only discussions</span>
                  </li>
                </ul>
                <button
                  onClick={() => { }}
                  className="w-full mt-4 py-2 px-4 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-md text-sm font-medium hover:from-green-600 hover:to-green-700 transition dark:from-green-600 dark:to-green-700 dark:hover:from-green-700 dark:hover:to-green-800"
                >
                  View Moderation Dashboard
                </button>
              </div>
            )}
          </div>
        </div>

        {/* Activity Section */}
        <div className="lg:col-span-2">
          <div className="bg-card rounded-lg shadow-md p-6 mb-6 dark:border dark:border-border">
            <h2 className="text-xl font-bold mb-6">Your Activity</h2>

            {/* Tabs */}
            <div className="border-b mb-6 dark:border-border">
              <ul className="flex flex-wrap -mb-px">
                <li className="mr-2">
                  <a href="#" className="inline-block p-4 text-primary border-b-2 border-primary rounded-t-lg">
                    My Perspectives
                  </a>
                </li>
                <li className="mr-2">
                  <a href="#" className="inline-block p-4 text-muted-foreground hover:text-foreground border-b-2 border-transparent rounded-t-lg">
                    My Votes
                  </a>
                </li>
                <li className="mr-2">
                  <a href="#" className="inline-block p-4 text-muted-foreground hover:text-foreground border-b-2 border-transparent rounded-t-lg">
                    Delegation
                  </a>
                </li>
              </ul>
            </div>

            {/* Perspectives Table */}
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-border">
                <thead className="bg-muted">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                      Title
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                      Date
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                      Status
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {mockPerspectives.map((perspective) => (
                    <tr key={perspective.id}>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm font-medium">{perspective.title}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-muted-foreground">{perspective.date}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${perspective.status === "Synthesized"
                          ? "bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-400"
                          : "bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-400"
                          }`}>
                          {perspective.status}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <a href="#" className="text-primary hover:text-primary/80 flex items-center">
                          View <ExternalLink className="w-3 h-3 ml-1" />
                        </a>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Call to Action for creating new perspectives */}
            <div className="mt-6 p-4 bg-primary/10 rounded-lg border border-primary/20">
              <div className="flex items-start">
                <div className="flex-shrink-0">
                  <InfoCircle className="h-5 w-5 text-primary" />
                </div>
                <div className="ml-3">
                  <h3 className="text-sm font-medium text-foreground dark:text-primary-foreground">Share your perspective</h3>
                  <div className="mt-2 text-sm text-muted-foreground dark:text-primary-foreground/80">
                    <p>Have something to say on a current topic? Share your perspective and contribute to the discourse.</p>
                  </div>
                  <div className="mt-3">
                    <a
                      href="/submit"
                      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                    >
                      Submit New Perspective
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* New section: User Privileges based on verification status */}
      <div className="mt-8 bg-card rounded-lg shadow-md p-6 dark:border dark:border-border">
        <h2 className="text-xl font-bold mb-6">Platform Privileges</h2>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {/* Unverified privileges */}
          <div className="border rounded-lg p-4 dark:border-border">
            <div className="flex items-center mb-3">
              <div className="h-8 w-8 rounded-full bg-gray-200 dark:bg-gray-800 flex items-center justify-center mr-3">
                <User className="h-4 w-4 text-gray-600 dark:text-gray-400" />
              </div>
              <h3 className="text-md font-semibold">Unverified User</h3>
            </div>
            <ul className="space-y-2 text-sm">
              <li className="flex items-start">
                <CheckCircle className={`w-4 h-4 mr-2 ${!isVerified ? "text-gray-600" : "text-gray-400"} mt-0.5`} />
                <span>View public perspectives and insights</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className={`w-4 h-4 mr-2 ${!isVerified ? "text-gray-600" : "text-gray-400"} mt-0.5`} />
                <span>Submit {dailyLimit} perspectives per day</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className={`w-4 h-4 mr-2 ${!isVerified ? "text-gray-600" : "text-gray-400"} mt-0.5`} />
                <span>Limited voting power (0.5x)</span>
              </li>
            </ul>
            {!isVerified && (
              <div className="mt-4">
                <Badge variant="outline" className="text-gray-600 dark:text-gray-400 border-gray-400">
                  Current Status
                </Badge>
              </div>
            )}
          </div>

          {/* Verified (citizenship only) privileges */}
          <div className="border rounded-lg p-4 dark:border-border" style={{
            borderColor: citizenshipVerified && !eligibilityVerified ? 'rgb(217, 119, 6)' : undefined,
            backgroundColor: citizenshipVerified && !eligibilityVerified ? 'rgba(251, 191, 36, 0.1)' : undefined
          }}>
            <div className="flex items-center mb-3">
              <div className="h-8 w-8 rounded-full bg-amber-200 dark:bg-amber-800 flex items-center justify-center mr-3">
                <Shield className="h-4 w-4 text-amber-600 dark:text-amber-400" />
              </div>
              <h3 className="text-md font-semibold">Verified Citizen</h3>
            </div>
            <ul className="space-y-2 text-sm">
              <li className="flex items-start">
                <CheckCircle className={`w-4 h-4 mr-2 ${citizenshipVerified && !eligibilityVerified ? "text-amber-600" : "text-gray-400"} dark:${citizenshipVerified && !eligibilityVerified ? "text-amber-400" : "text-gray-600"} mt-0.5`} />
                <span>All unverified privileges</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className={`w-4 h-4 mr-2 ${citizenshipVerified && !eligibilityVerified ? "text-amber-600" : "text-gray-400"} dark:${citizenshipVerified && !eligibilityVerified ? "text-amber-400" : "text-gray-600"} mt-0.5`} />
                <span>Submit up to 20 perspectives per day</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className={`w-4 h-4 mr-2 ${citizenshipVerified && !eligibilityVerified ? "text-amber-600" : "text-gray-400"} dark:${citizenshipVerified && !eligibilityVerified ? "text-amber-400" : "text-gray-600"} mt-0.5`} />
                <span>Standard voting power (1x)</span>
              </li>
            </ul>
            {citizenshipVerified && !eligibilityVerified && (
              <div className="mt-4">
                <Badge variant="outline" className="text-amber-700 dark:text-amber-400 border-amber-500">
                  Current Status
                </Badge>
              </div>
            )}
          </div>

          {/* Fully Eligible privileges */}
          <div className="border rounded-lg p-4 dark:border-border" style={{
            borderColor: citizenshipVerified && eligibilityVerified ? 'rgb(22, 163, 74)' : undefined,
            backgroundColor: citizenshipVerified && eligibilityVerified ? 'rgba(34, 197, 94, 0.1)' : undefined
          }}>
            <div className="flex items-center mb-3">
              <div className="h-8 w-8 rounded-full bg-green-200 dark:bg-green-800 flex items-center justify-center mr-3">
                <Shield className="h-4 w-4 text-green-600 dark:text-green-400" />
              </div>
              <h3 className="text-md font-semibold">Fully Eligible</h3>
            </div>
            <ul className="space-y-2 text-sm">
              <li className="flex items-start">
                <CheckCircle className={`w-4 h-4 mr-2 ${citizenshipVerified && eligibilityVerified ? "text-green-600" : "text-gray-400"} dark:${citizenshipVerified && eligibilityVerified ? "text-green-400" : "text-gray-600"} mt-0.5`} />
                <span>All verified privileges</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className={`w-4 h-4 mr-2 ${citizenshipVerified && eligibilityVerified ? "text-green-600" : "text-gray-400"} dark:${citizenshipVerified && eligibilityVerified ? "text-green-400" : "text-gray-600"} mt-0.5`} />
                <span>Unlimited perspective submissions</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className={`w-4 h-4 mr-2 ${citizenshipVerified && eligibilityVerified ? "text-green-600" : "text-gray-400"} dark:${citizenshipVerified && eligibilityVerified ? "text-green-400" : "text-gray-600"} mt-0.5`} />
                <span>Enhanced voting power (1.5x)</span>
              </li>
              <li className="flex items-start">
                <CheckCircle className={`w-4 h-4 mr-2 ${citizenshipVerified && eligibilityVerified ? "text-green-600" : "text-gray-400"} dark:${citizenshipVerified && eligibilityVerified ? "text-green-400" : "text-gray-600"} mt-0.5`} />
                <span>Access to moderation tools</span>
              </li>
            </ul>
            {citizenshipVerified && eligibilityVerified && (
              <div className="mt-4">
                <Badge variant="outline" className="text-green-700 dark:text-green-400 border-green-500">
                  Current Status
                </Badge>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}