"use client";

import { useState } from "react";
import localFont from "next/font/local";
import {
    House,
    MapPin,
    List,
    Image as ImageIcon,
    CurrencyDollar,
    ShieldCheck,
    CaretLeft,
    Check,
    Info
} from "@phosphor-icons/react/dist/ssr";
import { FormData, FormValue } from "../list-property/types";
import { PropertyType } from "../list-property/PropertyType";
import { PropertyPlaceType } from "../list-property/PropertyPlaceType";
import { PropertyLocation } from "../list-property/PropertyLocation";
import { PropertyCapacity } from "../list-property/PropertyCapacity";
import { PropertyAmenities } from "../list-property/PropertyAmenities";
import { PropertyDescription } from "../list-property/PropertyDescription";
import { PropertyPhotos } from "../list-property/PropertyPhotos";
import { PropertyPrice } from "../list-property/PropertyPrice";
import { PropertyInstantApproval } from "../list-property/PropertyInstantApproval";
import { SafetyDetails } from "../list-property/SafetyDetails";

const figtree = localFont({
    src: [
        {
            path: '../../../public/Fonts/figtree/figtree.ttf',
        },
    ],
})

const sidebarItemStyle = (active: boolean) =>
    `flex items-center gap-3 p-4 rounded-lg cursor-pointer transition-all ${active ? 'bg-black text-white' : 'hover:bg-gray-100 text-gray-700'}`;

const sectionTitleStyle = `${figtree.className} text-3xl font-bold mb-6`;

export default function ManageProperty() {
    const [activeSection, setActiveSection] = useState("details");
    const [formData, setFormData] = useState<FormData>({
        // Mock existing data
        title: "Cozy Cottage in the Hills",
        description: "This unique place has a style all its own. Located in the heart of the mountains, this cottage offers a perfect getaway.",
        propertyType: "house",
        placeType: "entire",
        location: "123 Mountain View Rd, Hilltop, CA",
        guests: 4,
        bedrooms: 2,
        beds: 3,
        bathrooms: 1,
        amenities: ["wifi", "kitchen", "parking"],
        price: "15000",
        instantBook: true,
        safety: ["camera"],
        photos: [
            "https://images.unsplash.com/photo-1499793983690-e29da59ef1c2?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80",
            "https://images.unsplash.com/photo-1502005229762-cf1b2da7c5d6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1974&q=80",
            "https://images.unsplash.com/photo-1484154218962-a1c002085d2f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80",
            "https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2069&q=80",
            "https://images.unsplash.com/photo-1505691938895-1758d7feb511?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80"
        ]
    });

    const updateData = (key: keyof FormData, value: FormValue) => {
        setFormData(prev => ({ ...prev, [key]: value }));
    };

    const sections = [
        { id: "details", label: "Property Details", icon: Info },
        { id: "location", label: "Location", icon: MapPin },
        { id: "amenities", label: "Amenities", icon: List },
        { id: "photos", label: "Photos", icon: ImageIcon },
        { id: "pricing", label: "Pricing & Booking", icon: CurrencyDollar },
        { id: "safety", label: "Safety", icon: ShieldCheck },
    ];

    const renderContent = () => {
        switch (activeSection) {
            case "details":
                return (
                    <div className="flex flex-col gap-12">
                        <div>
                            <h2 className={sectionTitleStyle}>Property Details</h2>
                            <PropertyDescription data={formData} updateData={updateData} />
                        </div>
                        <div className="border-t border-gray-200 pt-8">
                            <PropertyType data={formData} updateData={updateData} />
                        </div>
                        <div className="border-t border-gray-200 pt-8">
                            <PropertyPlaceType data={formData} updateData={updateData} />
                        </div>
                        <div className="border-t border-gray-200 pt-8">
                            <PropertyCapacity data={formData} updateData={updateData} />
                        </div>
                    </div>
                );
            case "location":
                return (
                    <div>
                        <h2 className={sectionTitleStyle}>Location</h2>
                        <PropertyLocation data={formData} updateData={updateData} />
                    </div>
                );
            case "amenities":
                return (
                    <div>
                        <h2 className={sectionTitleStyle}>Amenities</h2>
                        <PropertyAmenities data={formData} updateData={updateData} />
                    </div>
                );
            case "photos":
                return (
                    <div>
                        <h2 className={sectionTitleStyle}>Photos</h2>
                        <PropertyPhotos data={formData} updateData={updateData} />
                    </div>
                );
            case "pricing":
                return (
                    <div className="flex flex-col gap-12">
                        <div>
                            <h2 className={sectionTitleStyle}>Pricing</h2>
                            <PropertyPrice data={formData} updateData={updateData} />
                        </div>
                        <div className="border-t border-gray-200 pt-8">
                            <h2 className={`${figtree.className} text-2xl font-bold mb-6`}>Booking Settings</h2>
                            <PropertyInstantApproval data={formData} updateData={updateData} />
                        </div>
                    </div>
                );
            case "safety":
                return (
                    <div>
                        <h2 className={sectionTitleStyle}>Safety</h2>
                        <SafetyDetails data={formData} updateData={updateData} />
                    </div>
                );
            default:
                return null;
        }
    };

    return (
        <div className="min-h-screen bg-gray-50 flex flex-col">
            {/* Header */}
            <header className="bg-white border-b border-gray-200 px-8 py-4 flex items-center justify-between sticky top-0 z-20">
                <div className="flex items-center gap-4">
                    <button className="p-2 hover:bg-[#E7FE78] rounded-full transition-colors">
                        <CaretLeft size={24} />
                    </button>
                    <h1 className={`${figtree.className} text-xl font-bold`}>Manage Listing</h1>
                </div>
                <div className="flex items-center gap-4">
                    <span className="text-sm text-gray-500">Last saved: Just now</span>
                    <button className={`${figtree.className} flex items-center gap-2 bg-[#E7FE78] text-black px-4 py-2 rounded-lg shadow-[2px_2px_0px_rgba(0,0,0,1)] font-light italic border-2 border-black hover:scale-105 transition-all duration-300 cursor-pointer hover:shadow-[10px_10px_0px_rgba(0,0,0,1]`}>
                        Save Changes
                    </button>
                </div>
            </header>

            <div className="flex flex-1 max-w-7xl mx-auto w-full p-8 gap-8">
                {/* Sidebar */}
                <aside className="w-64 shrink-0 hidden lg:block sticky top-24 h-fit">
                    <nav className="flex flex-col gap-2">
                        {sections.map((section) => (
                            <div
                                key={section.id}
                                onClick={() => setActiveSection(section.id)}
                                className={sidebarItemStyle(activeSection === section.id)}
                            >
                                <section.icon size={24} weight={activeSection === section.id ? "fill" : "regular"} color={activeSection === section.id ? "#E7FE78" : "gray"}/>
                                <span className={`${figtree.className} font-medium`}>{section.label}</span>
                            </div>
                        ))}
                    </nav>
                </aside>

                {/* Main Content */}
                <main className="flex-1 bg-white rounded-xl border border-gray-200 shadow-sm p-8 md:p-12 min-h-[600px]">
                    {renderContent()}
                </main>
            </div>
        </div>
    );
}
