import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import Layout from "@/components/Layout";
import SEO from "@/components/SEO";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { useAuth } from "@/contexts/AuthContext";
import TrackUploadModal from "@/components/ethos/TrackUploadModal";
import TrackMetadataForm from "@/components/ethos/TrackMetadataForm";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { useAethexToast } from "@/hooks/use-aethex-toast";
import { Upload, Music, Settings } from "lucide-react";

const SKILLS = [
  "Synthwave",
  "Orchestral",
  "SFX Design",
  "Game Audio",
  "Ambient",
  "Electronic",
  "Cinematic",
  "Jazz",
  "Hip-Hop",
  "Folk",
];

interface ArtistProfile {
  skills: string[];
  for_hire: boolean;
  bio?: string;
  portfolio_url?: string;
  sample_price_track?: number;
  sample_price_sfx?: number;
  sample_price_score?: number;
  turnaround_days?: number;
}

export default function ArtistSettings() {
  const { user } = useAuth();
  const navigate = useNavigate();
  const toast = useAethexToast();

  const [profile, setProfile] = useState<ArtistProfile>({
    skills: [],
    for_hire: true,
  });
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [uploadModalOpen, setUploadModalOpen] = useState(false);
  const [currentFile, setCurrentFile] = useState<File | null>(null);
  const [showMetadataForm, setShowMetadataForm] = useState(false);

  useEffect(() => {
    if (!user) {
      navigate("/login");
      return;
    }

    const fetchProfile = async () => {
      try {
        const res = await fetch(`/api/ethos/artists?id=${user.id}`, {
          headers: { "x-user-id": user.id },
        });

        if (res.ok) {
          const data = await res.json();
          setProfile({
            skills: data.skills || [],
            for_hire: data.for_hire ?? true,
            bio: data.bio,
            portfolio_url: data.portfolio_url,
            sample_price_track: data.sample_price_track,
            sample_price_sfx: data.sample_price_sfx,
            sample_price_score: data.sample_price_score,
            turnaround_days: data.turnaround_days,
          });
        }
      } catch (error) {
        console.error("Failed to fetch profile:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchProfile();
  }, [user, navigate]);

  const toggleSkill = (skill: string) => {
    setProfile((prev) => ({
      ...prev,
      skills: prev.skills.includes(skill)
        ? prev.skills.filter((s) => s !== skill)
        : [...prev.skills, skill],
    }));
  };

  const handleSave = async () => {
    if (!user) return;

    setSaving(true);
    try {
      const res = await fetch(`/api/ethos/artists`, {
        method: "PUT",
        headers: {
          "x-user-id": user.id,
          "Content-Type": "application/json",
        },
        body: JSON.stringify(profile),
      });

      if (res.ok) {
        toast.success({
          title: "Profile updated",
          description: "Your Ethos artist profile has been saved",
        });
      } else {
        throw new Error("Failed to save profile");
      }
    } catch (error) {
      toast.error({
        title: "Error",
        description: String(error),
      });
    } finally {
      setSaving(false);
    }
  };

  const handleFileSelected = (file: File) => {
    setCurrentFile(file);
    setShowMetadataForm(true);
  };

  const handleMetadataSubmit = async (metadata: any) => {
    if (!user || !currentFile) return;

    try {
      // TODO: Upload file to Supabase Storage
      // For now, just create track record with placeholder file_url
      const res = await fetch(`/api/ethos/tracks`, {
        method: "POST",
        headers: {
          "x-user-id": user.id,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ...metadata,
          file_url: `ethos-tracks/${user.id}/${currentFile.name}`,
          duration_seconds: Math.floor(currentFile.size / 16000), // Rough estimate
        }),
      });

      if (res.ok) {
        toast.success({
          title: "Track uploaded",
          description: "Your track has been added to your portfolio",
        });
        setShowMetadataForm(false);
        setCurrentFile(null);
      } else {
        throw new Error("Failed to upload track");
      }
    } catch (error) {
      toast.error({
        title: "Error",
        description: String(error),
      });
    }
  };

  if (loading) {
    return <Layout><div className="py-20 text-center">Loading settings...</div></Layout>;
  }

  return (
    <>
      <SEO pageTitle="Artist Settings - Ethos Guild" />
      <Layout>
        <div className="bg-slate-950 text-foreground min-h-screen">
          <div className="container mx-auto px-4 max-w-4xl py-12">
            <div className="space-y-8">
              {/* Header */}
              <div>
                <h1 className="text-3xl font-bold text-white flex items-center gap-3 mb-2">
                  <Settings className="h-8 w-8" />
                  Artist Settings
                </h1>
                <p className="text-slate-400">
                  Manage your Ethos Guild profile, portfolio, and services
                </p>
              </div>

              {/* Profile Section */}
              <Card className="bg-slate-900/50 border-slate-800">
                <CardHeader>
                  <CardTitle className="text-white">Profile Information</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label className="text-white">Bio</Label>
                    <Textarea
                      value={profile.bio || ""}
                      onChange={(e) =>
                        setProfile({ ...profile, bio: e.target.value })
                      }
                      placeholder="Tell us about yourself, your musical style, and experience..."
                      className="bg-slate-800 border-slate-700 h-24"
                    />
                  </div>

                  <div className="space-y-2">
                    <Label className="text-white">Portfolio URL</Label>
                    <Input
                      value={profile.portfolio_url || ""}
                      onChange={(e) =>
                        setProfile({ ...profile, portfolio_url: e.target.value })
                      }
                      placeholder="https://yourportfolio.com"
                      type="url"
                      className="bg-slate-800 border-slate-700"
                    />
                  </div>

                  <label className="flex items-center gap-2 p-3 rounded-lg bg-slate-800/50 border border-slate-700 cursor-pointer">
                    <Checkbox
                      checked={profile.for_hire}
                      onCheckedChange={(checked) =>
                        setProfile({ ...profile, for_hire: checked as boolean })
                      }
                      className="border-slate-600"
                    />
                    <span className="text-sm text-slate-300">
                      I'm available for commissions
                    </span>
                  </label>
                </CardContent>
              </Card>

              {/* Skills Section */}
              <Card className="bg-slate-900/50 border-slate-800">
                <CardHeader>
                  <CardTitle className="text-white">Skills</CardTitle>
                  <CardDescription>Select the skills you specialize in</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                    {SKILLS.map((skill) => (
                      <label
                        key={skill}
                        className="flex items-center gap-2 p-2 rounded-lg bg-slate-800/50 border border-slate-700 cursor-pointer hover:border-slate-600 transition"
                      >
                        <Checkbox
                          checked={profile.skills.includes(skill)}
                          onCheckedChange={() => toggleSkill(skill)}
                          className="border-slate-600"
                        />
                        <span className="text-sm text-slate-300">{skill}</span>
                      </label>
                    ))}
                  </div>
                </CardContent>
              </Card>

              {/* Services & Pricing */}
              {profile.for_hire && (
                <Card className="bg-slate-900/50 border-slate-800">
                  <CardHeader>
                    <CardTitle className="text-white">Services & Pricing</CardTitle>
                    <CardDescription>
                      Set your sample pricing for common services
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div className="space-y-2">
                        <Label className="text-white">Custom Track</Label>
                        <Input
                          type="number"
                          value={profile.sample_price_track || ""}
                          onChange={(e) =>
                            setProfile({
                              ...profile,
                              sample_price_track: Number(e.target.value) || undefined,
                            })
                          }
                          placeholder="500"
                          className="bg-slate-800 border-slate-700"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label className="text-white">SFX Pack</Label>
                        <Input
                          type="number"
                          value={profile.sample_price_sfx || ""}
                          onChange={(e) =>
                            setProfile({
                              ...profile,
                              sample_price_sfx: Number(e.target.value) || undefined,
                            })
                          }
                          placeholder="150"
                          className="bg-slate-800 border-slate-700"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label className="text-white">Full Score</Label>
                        <Input
                          type="number"
                          value={profile.sample_price_score || ""}
                          onChange={(e) =>
                            setProfile({
                              ...profile,
                              sample_price_score: Number(e.target.value) || undefined,
                            })
                          }
                          placeholder="2000"
                          className="bg-slate-800 border-slate-700"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label className="text-white">Turnaround Time (days)</Label>
                      <Input
                        type="number"
                        value={profile.turnaround_days || ""}
                        onChange={(e) =>
                          setProfile({
                            ...profile,
                            turnaround_days: Number(e.target.value) || undefined,
                          })
                        }
                        placeholder="5"
                        className="bg-slate-800 border-slate-700"
                        min="1"
                      />
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* Upload Track */}
              <Card className="bg-slate-900/50 border-slate-800">
                <CardHeader>
                  <CardTitle className="text-white flex items-center gap-2">
                    <Music className="h-5 w-5" />
                    Upload Track
                  </CardTitle>
                  <CardDescription>Add a new track to your portfolio</CardDescription>
                </CardHeader>
                <CardContent>
                  <Button
                    onClick={() => setUploadModalOpen(true)}
                    className="bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-700 hover:to-purple-700"
                  >
                    <Upload className="h-4 w-4 mr-2" />
                    Upload New Track
                  </Button>
                </CardContent>
              </Card>

              {/* Save Button */}
              <div className="flex gap-3">
                <Button
                  onClick={handleSave}
                  disabled={saving}
                  className="bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-700 hover:to-purple-700 flex-1"
                >
                  {saving ? "Saving..." : "Save Settings"}
                </Button>
              </div>
            </div>
          </div>

          <TrackUploadModal
            open={uploadModalOpen}
            onOpenChange={setUploadModalOpen}
            onFileSelected={handleFileSelected}
          />

          {/* Metadata Form Modal */}
          {showMetadataForm && currentFile && (
            <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
              <Card className="bg-slate-900 border-slate-800 max-w-2xl w-full">
                <CardHeader>
                  <CardTitle className="text-white">Track Details</CardTitle>
                </CardHeader>
                <CardContent>
                  <TrackMetadataForm
                    onSubmit={handleMetadataSubmit}
                    isLoading={false}
                  />
                </CardContent>
              </Card>
            </div>
          )}
        </div>
      </Layout>
    </>
  );
}