"use client";

import React, { useState } from 'react';
import { Product } from '@/types/types';
import { Star } from 'lucide-react';

interface TabsProps {
  product: Product;
}

export function Tabs({ product }: TabsProps) {
  const [activeTab, setActiveTab] = useState<'opis' | 'dane' | 'opinie'>('opis');

  return (
    <div className="mt-16 bg-white rounded-3xl border border-border overflow-hidden">
      {/* Nawigacja */}
      <div className="flex border-b border-border">
        {(['opis', 'dane', 'opinie'] as const).map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={`flex-1 py-4 text-sm md:text-base font-bold uppercase tracking-wider transition-colors ${
              activeTab === tab 
                ? 'bg-slate-50 text-primary border-b-2 border-primary' 
                : 'bg-white text-text-muted hover:bg-slate-50 hover:text-primary'
            }`}
          >
            {tab === 'opis' && 'Opis produktu'}
            {tab === 'dane' && 'Dane techniczne'}
            {tab === 'opinie' && 'Opinie'}
          </button>
        ))}
      </div>

      {/* Zawartość */}
      <div className="p-8 md:p-12">
        {/* Opis */}
        {activeTab === 'opis' && (
          <div className="prose prose-slate max-w-none">
            <h3 className="text-2xl font-bold text-primary font-heading mb-4">Szczegółowe informacje</h3>
            <p className="text-lg text-text-muted leading-relaxed">
              {product.description}
            </p>
            {product.heating && (
              <p className="mt-4 font-semibold text-accent">
                Ten model posiada funkcję efektywnego ogrzewania, dzięki czemu sprawdzi się doskonale jako dodatkowe źródło ciepła w okresach przejściowych lub główny system grzewczy dla wybranych pomieszczeń.
              </p>
            )}
          </div>
        )}

        {/* Dane techniczne */}
        {activeTab === 'dane' && (
          <div>
            <h3 className="text-2xl font-bold text-primary font-heading mb-6">Specyfikacja techniczna</h3>
            {product.specs ? (
              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse">
                  <tbody>
                    {Object.entries(product.specs).map(([key, value], idx) => (
                      <tr key={idx} className="border-b border-border hover:bg-slate-50 transition-colors">
                        <th className="py-4 px-4 font-semibold text-primary w-1/2">{key}</th>
                        <td className="py-4 px-4 text-text-muted w-1/2">{value as React.ReactNode}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ) : (
              <p className="text-text-muted">Brak szczegółowych danych technicznych dla tego modelu.</p>
            )}
          </div>
        )}

        {/* Opinie */}
        {activeTab === 'opinie' && (
          <div>
            <div className="flex items-center gap-4 mb-8">
              <div className="text-4xl font-extrabold text-primary font-heading">4.9</div>
              <div className="flex flex-col">
                <div className="flex text-yellow-400">
                  <Star className="w-5 h-5 fill-current" />
                  <Star className="w-5 h-5 fill-current" />
                  <Star className="w-5 h-5 fill-current" />
                  <Star className="w-5 h-5 fill-current" />
                  <Star className="w-5 h-5 fill-current" />
                </div>
                <span className="text-sm text-text-muted font-medium mt-1">Na podstawie 12 opinii</span>
              </div>
            </div>

            <div className="space-y-6">
              {/* Przykładowa opinia */}
              <div className="p-6 bg-slate-50 rounded-2xl border border-border">
                <div className="flex justify-between items-start mb-3">
                  <div>
                    <span className="font-bold text-primary">Janusz z Wrocławia</span>
                    <span className="text-xs text-text-muted block mt-0.5">Potwierdzony zakup z montażem</span>
                  </div>
                  <div className="flex text-yellow-400">
                    <Star className="w-4 h-4 fill-current" />
                    <Star className="w-4 h-4 fill-current" />
                    <Star className="w-4 h-4 fill-current" />
                    <Star className="w-4 h-4 fill-current" />
                    <Star className="w-4 h-4 fill-current" />
                  </div>
                </div>
                <p className="text-text-muted text-sm leading-relaxed">
                  Sprzęt najwyższej klasy. Bardzo cichy, w ogóle go nie słychać w sypialni. Montaż wykonany przez panów z AirProject przebiegł super szybko i czyściutko. Polecam!
                </p>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}