use leptos::prelude::*;
use crate::components::prelude::*;

#[derive(Debug, Clone)]
pub struct ReviewPlatform {
    pub name: &'static str,
    pub url: &'static str,
}

const REVIEW_PLATFORMS: &[ReviewPlatform] = &[
    ReviewPlatform {
        name: "lolz.live",
        url: "https://lolz.live/threads/6814638",
    },
    ReviewPlatform {
        name: "mipped.com",
        url: "https://mipped.com/f/threads/vproxy-rezidentnye-proksi-vsego-za-1-5-1gb-bolee-150-stran-smena-pula-ip-ezhednevno.276009/",
    },
    ReviewPlatform {
        name: "zenno.club",
        url: "https://zenno.club/discussion/threads/vproxy-rezidentnye-proksi-vsego-za-1-5-1gb-bolee-150-stran-smena-pula-ip-ezhednevno.119438/",
    },
    ReviewPlatform {
        name: "fb-killa.pro",
        url: "https://fb-killa.pro/threads/vproxy-rezidentskie-proksi-vsego-za-1-5-1gb-bolee-150-stran-smena-pula-ip-ezhednevno.23161/",
    },
    ReviewPlatform {
        name: "community.bablosoft.com",
        url: "https://community.bablosoft.com/topic/27955/vproxy-%D1%80%D0%B5%D0%B7%D0%B8%D0%B4%D0%B5%D0%BD%D1%82%D0%BD%D1%8B%D0%B5-%D0%BF%D1%80%D0%BE%D0%BA%D1%81%D0%B8-%D0%B2%D1%81%D0%B5%D0%B3%D0%BE-%D0%B7%D0%B0-1-5-1gb-%D0%B1%D0%BE%D0%BB%D0%B5%D0%B5-150-%D1%81%D1%82%D1%80%D0%B0%D0%BD-%D1%81%D0%BC%D0%B5%D0%BD%D0%B0-%D0%BF%D1%83%D0%BB%D0%B0-ip-%D0%B5%D0%B6%D0%B5%D0%B4%D0%BD%D0%B5%D0%B2%D0%BD%D0%BE/2?_=1715725715935",
    },
    ReviewPlatform {
        name: "bhf.pro",
        url: "https://bhf.pro/threads/690021/",
    },
    ReviewPlatform {
        name: "vlmi",
        url: "https://v1.vlmi.top/threads/vproxy-rezidentnye-proksi-vsego-za-1-5-1gb-bolee-150-stran-smena-pula-ip-ezhednevno.53070/#post-363936",
    },
];

#[component]
pub fn ReviewsList(
    #[prop(optional)] id: Option<&'static str>,
    #[prop(optional)] class: Option<&'static str>,
) -> impl IntoView {
    let base_classes = "flex flex-col items-center w-full";
    let final_classes = match class {
        Some(c) => format!("{} {}", base_classes, c),
        None => base_classes.to_string(),
    };

    view! {
        <section
            class=final_classes
            id=id.unwrap_or("reviews-list")
        >
            <div class="flex flex-col items-center gap-6 w-full max-w-[512px] mb-16" id="reviews-container">
                <h1 
                    class="w-full text-center font-semibold text-5xl leading-[54px] tracking-[-0.02em] text-[rgba(255,249,247,0.95)]"
                    id="reviews-title"
                >
                    {t8r!("Customer Reviews")}
                </h1>
                
                <p 
                    class="w-full text-center font-normal text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.4)]"
                    id="reviews-description"
                >
                    {t8r!("See what our customers say about VProxy services on various review platforms. Your feedback helps us improve and grow.")}
                </p>
            </div>
            
          <div class="mx-auto flex flex-row flex-wrap items-center justify-center gap-4 w-full max-w-[775px]" id="links-container">
              {REVIEW_PLATFORMS.iter().enumerate().map(|(index, platform)| {
                  let platform_name = platform.name;
                  let platform_url = platform.url;
                  
                  view! {
                      <a
                          href=platform_url
                          target="_blank"
                          rel="noopener noreferrer"
                          class="flex flex-row justify-between items-center p-3.5 gap-2 w-[247px] h-[52px] border border-[rgba(255,249,247,0.4)] rounded-2xl hover:border-[rgba(255,249,247,0.6)] transition-colors duration-200 group"
                          id=format!("review-link-{}", index)
                      >
                          <span 
                              class="font-semibold text-lg leading-6 tracking-[-0.02em] text-[rgba(255,249,247,0.4)] group-hover:text-[rgba(255,249,247,0.6)] transition-colors duration-200 flex-1 text-center"
                              id=format!("review-text-{}", index)
                          >
                              {platform_name}
                          </span>
                          
                          <div 
                              class="w-[22px] h-[22px] flex items-center justify-center"
                              id=format!("review-icon-{}", index)
                          >
                              <svg 
                                  width="22" 
                                  height="22" 
                                  viewBox="0 0 22 22" 
                                  fill="none" 
                                  xmlns="http://www.w3.org/2000/svg"
                                  class="w-full h-full"
                              >
                                  <path 
                                      d="M7 15L15 7M15 7H9M15 7V13" 
                                      stroke="rgba(255,249,247,0.4)" 
                                      stroke-width="2" 
                                      stroke-linecap="round" 
                                      stroke-linejoin="round"
                                      class="group-hover:stroke-[rgba(255,249,247,0.6)] transition-colors duration-200"
                                  />
                              </svg>
                          </div>
                      </a>
                  }
              }).collect::<Vec<_>>()}
          </div>
        </section>
    }
}
