import { useState, useEffect } from 'react';
import { gql } from '@apollo/client';
import { useQuery, useMutation } from '@apollo/client/react';



import { useUserData, useAuthenticationStatus } from '@nhost/react';

// GraphQL Queries and Mutations
const GET_USER_PROFILE = gql`
 
 query GetUserProfile{
    user_profiles{
      id
      display_name
      created_at
      metadata
    }
  }
`;

const UPDATE_USER_PROFILE = gql`
  mutation UpdateUserProfile($userId: uuid!, $displayName: String!, $metadata: jsonb) {
    update_user_profiles_by_pk(
      pk_columns: { id: $userId }
      _set: { display_name: $displayName, metadata: $metadata }
    ) {
      id
      display_name
      metadata
    }
  }
`;

const GET_USER_CAMPAIGNS = gql`
  query GetUserCampaigns($userId: uuid!) {
    campaigns(where: { user_id: { _eq: $userId } }) {
      id
      name
      status
      keywords_count
      performance_metrics
      created_at
      updated_at
    }
  }
`;

const CREATE_CAMPAIGN = gql`
  mutation CreateCampaign($userId: uuid!, $name: String!, $keywords: jsonb) {
    insert_campaigns_one(object: {
      user_id: $userId,
      name: $name,
      keywords: $keywords,
      status: "draft",
      keywords_count: 0
    }) {
      id
      name
      status
      created_at
    }
  }
`;

const UPDATE_CAMPAIGN = gql`
  mutation UpdateCampaign($campaignId: uuid!, $name: String, $status: String) {
    update_campaigns_by_pk(
      pk_columns: { id: $campaignId }
      _set: { name: $name, status: $status }
    ) {
      id
      name
      status
      updated_at
    }
  }
`;

const DELETE_CAMPAIGN = gql`
  mutation DeleteCampaign($campaignId: uuid!) {
    delete_campaigns_by_pk(id: $campaignId) {
      id
      name
    }
  }
`;

const Settings = () => {
  const [activeSection, setActiveSection] = useState("profile");
  const [activeSubSection, setActiveSubSection] = useState("payment-history");
  const [formData, setFormData] = useState({
    displayName: '',
    email: ''
  });

  // NHost Authentication
  const user = useUserData();
  const { isAuthenticated } = useAuthenticationStatus();

  // GraphQL Queries
  const { data: profileData, loading: profileLoading, refetch: refetchProfile } = useQuery(GET_USER_PROFILE, {
    variables: { userId: user?.id },
    skip: !user?.id
  });

  const { data: campaignsData, loading: campaignsLoading, refetch: refetchCampaigns } = useQuery(GET_USER_CAMPAIGNS, {
    variables: { userId: user?.id },
    skip: !user?.id
  });

  // GraphQL Mutations
  const [updateUserProfile, { loading: updatingProfile }] = useMutation(UPDATE_USER_PROFILE);
  const [createCampaign, { loading: creatingCampaign }] = useMutation(CREATE_CAMPAIGN);
  const [updateCampaign] = useMutation(UPDATE_CAMPAIGN);
  const [deleteCampaign] = useMutation(DELETE_CAMPAIGN);

  // Initialize form data when profile loads
  useEffect(() => {
    if (profileData?.user_profiles) {
      const userProfile = profileData?.user_profiles[0];
      setFormData({
        displayName: userProfile?.display_name || '',
        email: userProfile?.email || ''
      });
    }
  }, [profileData]);

  const handleSectionClick = (sectionId: string) => {
    setActiveSection(sectionId);
    if (sectionId === "billing") {
      setActiveSubSection("payment-history");
    }
  };

  const handleSubSectionClick = (subSection: string) => {
    setActiveSubSection(subSection);
  };

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleSaveProfile = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!user?.id) return;

    try {
      await updateUserProfile({
        variables: {
          userId: user.id,
          displayName: formData.displayName,
          metadata: { last_updated: new Date().toISOString() }
        }
      });
      await refetchProfile();
      // You can add a toast notification here for success
    } catch (error) {
      console.error('Error updating profile:', error);
      // Handle error (show toast, etc.)
    }
  };

  const handleCreateCampaign = async () => {
    if (!user?.id) return;

    try {
      await createCampaign({
        variables: {
          userId: user.id,
          name: `New Campaign ${new Date().toLocaleDateString()}`,
          keywords: []
        }
      });
      await refetchCampaigns();
    } catch (error) {
      console.error('Error creating campaign:', error);
    }
  };

  const handleUpdateCampaign = async (campaignId: string, updates: { name?: string; status?: string }) => {
    try {
      await updateCampaign({
        variables: {
          campaignId,
          ...updates
        }
      });
      await refetchCampaigns();
    } catch (error) {
      console.error('Error updating campaign:', error);
    }
  };

  const handleDeleteCampaign = async (campaignId: string) => {
    if (!confirm('Are you sure you want to delete this campaign?')) return;

    try {
      await deleteCampaign({
        variables: { campaignId }
      });
      await refetchCampaigns();
    } catch (error) {
      console.error('Error deleting campaign:', error);
    }
  };

  const sidebarItems = [
    {
      id: "profile",
      label: "Profile",
      icon: (
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
        </svg>
      ),
      hasSubItems: false
    },
    {
      id: "campaigns",
      label: "Campaigns",
      icon: (
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
        </svg>
      ),
      hasSubItems: false
    },
    {
      id: "billing",
      label: "Billing",
      icon: (
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
          <path fillRule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clipRule="evenodd" />
        </svg>
      ),
      hasSubItems: true,
      subItems: [
        "Billing info",
        "Update",
        "Monthly Engagement",
        "Billing Date",
        "Payment History",
        "Cancel Membership"
      ]
    },
    {
      id: "help-desk",
      label: "Help Desk",
      icon: (
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
        </svg>
      ),
      hasSubItems: false
    },
    {
      id: "feature-request",
      label: "Feature Request",
      icon: (
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z" clipRule="evenodd" />
        </svg>
      ),
      hasSubItems: false
    }
  ];

  if (!isAuthenticated) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-900">Please log in to access settings</h2>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
      <div className="flex flex-col lg:flex-row gap-8">
        {/* Sidebar */}
        <div className="w-full lg:w-64 flex-shrink-0">
          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-6 lg:mb-8">Settings</h1>
          
          <nav className="space-y-2">
            {sidebarItems.map((item) => (
              <div key={item.id}>
                <button
                  onClick={() => handleSectionClick(item.id)}
                  className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors ${
                    activeSection === item.id
                      ? "bg-blue-50 text-blue-600"
                      : "text-gray-700 hover:bg-gray-50"
                  }`}
                >
                  {item.icon}
                  <span className="font-medium">{item.label}</span>
                  {item.hasSubItems && (
                    <svg className="w-4 h-4 ml-auto" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                    </svg>
                  )}
                </button>
                
                {item.hasSubItems && activeSection === item.id && (
                  <div className="ml-8 mt-2 space-y-1">
                    {item.subItems?.map((subItem) => (
                      <button
                        key={subItem}
                        onClick={() => handleSubSectionClick(subItem.toLowerCase().replace(/\s+/g, "-"))}
                        className={`w-full flex items-center px-4 py-2 rounded-lg text-left transition-colors ${
                          activeSubSection === subItem.toLowerCase().replace(/\s+/g, "-")
                            ? "bg-blue-600 text-white"
                            : "text-gray-600 hover:bg-gray-50"
                        }`}
                      >
                        {activeSubSection === subItem.toLowerCase().replace(/\s+/g, "-") && (
                          <div className="w-1 h-6 bg-blue-600 rounded-full mr-3"></div>
                        )}
                        <span className="text-sm">{subItem}</span>
                      </button>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </nav>
        </div>

        {/* Main Content */}
        <div className="flex-1 min-h-screen">
          {activeSection === "profile" && (
            <div className="bg-white">
              <h2 className="text-3xl font-bold text-gray-900 mb-2">Basic Information</h2>
              <p className="text-gray-600 mb-8">
                View and update your personal details and account information.
              </p>

              {profileLoading ? (
                <div className="text-center py-8">Loading profile...</div>
              ) : (
                <form onSubmit={handleSaveProfile} className="space-y-6">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Name
                    </label>
                    <input
                      type="text"
                      value={formData.displayName}
                      onChange={(e) => handleInputChange('displayName', e.target.value)}
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    />
                  </div>

                  {/* <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Email
                    </label>
                    <input
                      type="email"
                      value={formData.email}
                      disabled
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50"
                    />
                    <p className="text-sm text-gray-500 mt-1">Email cannot be changed</p>
                  </div> */}

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Member Since
                    </label>
                    <input
                      type="text"
                      value={new Date(profileData?.user_profiles[0]?.created_at).toLocaleDateString() || 'N/A'}
                      disabled
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-gray-50"
                    />
                  </div>

                  <div className="flex justify-end">
                    <button
                      type="submit"
                      disabled={updatingProfile}
                      className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
                    >
                      {updatingProfile ? 'Saving...' : 'Save'}
                    </button>
                  </div>
                </form>
              )}
            </div>
          )}

          {activeSection === "campaigns" && (
            <div className="bg-white">
              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
                <div>
                  <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Campaigns</h2>
                  <p className="text-sm sm:text-base text-gray-600">
                    Manage your keyword campaigns and track performance.
                  </p>
                </div>
                <button 
                  onClick={handleCreateCampaign}
                  disabled={creatingCampaign}
                  className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors whitespace-nowrap self-start sm:self-auto disabled:opacity-50"
                >
                  {creatingCampaign ? 'Creating...' : 'Create Campaign'}
                </button>
              </div>

              {campaignsLoading ? (
                <div className="text-center py-8">Loading campaigns...</div>
              ) : (
                <div className="space-y-4">
                  {campaignsData?.campaigns?.map((campaign: any) => (
                    <div key={campaign.id} className="border border-gray-200 rounded-lg p-4 sm:p-6 hover:border-blue-300 transition-colors">
                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div className="flex-1">
                          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mb-2">
                            <h3 className="text-base sm:text-lg font-semibold text-gray-900">{campaign.name}</h3>
                            <span className={`px-3 py-1 rounded-full text-xs font-medium self-start ${
                              campaign.status === "active" 
                                ? "bg-green-100 text-green-700" 
                                : campaign.status === "paused"
                                ? "bg-yellow-100 text-yellow-700"
                                : "bg-gray-100 text-gray-700"
                            }`}>
                              {campaign.status}
                            </span>
                          </div>
                          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-6 text-sm text-gray-600">
                            <span>{campaign.keywords_count || 0} keywords</span>
                            <span>Created: {new Date(campaign.created_at).toLocaleDateString()}</span>
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          <button 
                            onClick={() => handleUpdateCampaign(campaign.id, { 
                              name: prompt('Enter new campaign name:', campaign.name) || campaign.name 
                            })}
                            className="p-2 text-gray-400 hover:text-blue-600 transition-colors"
                          >
                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                              <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                            </svg>
                          </button>
                          <button 
                            onClick={() => handleDeleteCampaign(campaign.id)}
                            className="p-2 text-gray-400 hover:text-red-600 transition-colors"
                          >
                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </div>
                  ))}
                  
                  {(!campaignsData?.campaigns || campaignsData.campaigns.length === 0) && (
                    <div className="text-center py-8 text-gray-500">
                      No campaigns found. Create your first campaign!
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default Settings;