"use client";

import React, { useState } from "react";
import { 
  Tabs, 
  TabsContent, 
  TabsList, 
  TabsTrigger 
} from "../ui/tabs";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { Textarea } from "../ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
import { Checkbox } from "../ui/checkbox";
import { 
  Card, 
  CardContent
} from "../ui/card";

export function MissionsAdminPanel() {
  return (
    <div className="w-full">
      <Card className="border shadow-sm bg-white">
        <CardContent className="pt-6">
          <Tabs defaultValue="general" className="w-full">
            <TabsList className="mb-4 bg-gray-100">
              <TabsTrigger value="general" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">General</TabsTrigger>
              <TabsTrigger value="details" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">Details</TabsTrigger>
              <TabsTrigger value="attachments" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">Attachments</TabsTrigger>
              <TabsTrigger value="skills" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">Skills</TabsTrigger>
            </TabsList>
            
            <TabsContent value="general" className="space-y-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-1 text-gray-700">Title</label>
                  <Input placeholder="Project title" className="bg-white border-gray-300" />
                </div>
                
                <div>
                  <label className="block text-sm font-medium mb-1 text-gray-700">Featured Image</label>
                  <div className="border border-dashed rounded-md p-6 text-center bg-gray-50">
                    <Button variant="outline" className="mb-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50">Browse</Button>
                  </div>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium mb-1 text-gray-700">Categories</label>
                    <Select>
                      <SelectTrigger className="bg-white border-gray-300">
                        <SelectValue placeholder="Select category" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="education">Education</SelectItem>
                        <SelectItem value="technology">Technology</SelectItem>
                        <SelectItem value="environment">Environment</SelectItem>
                        <SelectItem value="health">Health</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium mb-1 text-gray-700">Project Type</label>
                    <Select>
                      <SelectTrigger className="bg-white border-gray-300">
                        <SelectValue placeholder="Select project type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="individual">Individual</SelectItem>
                        <SelectItem value="group">Group</SelectItem>
                        <SelectItem value="organization">Organization</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium mb-1 text-gray-700">Description</label>
                  <div className="border rounded-md border-gray-300">
                    <div className="bg-gray-50 p-2 border-b flex items-center space-x-2">
                      <span className="text-gray-700">Paragraphe</span>
                      <div className="flex items-center space-x-1">
                        <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">B</Button>
                        <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">I</Button>
                        <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">•</Button>
                        <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">1.</Button>
                        <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-700">"</Button>
                      </div>
                    </div>
                    <Textarea className="min-h-[200px] border-0 bg-white" />
                  </div>
                </div>
              </div>
            </TabsContent>
            
            <TabsContent value="details" className="space-y-6">
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium mb-1 text-gray-700">Project location type</label>
                    <Select>
                      <SelectTrigger className="bg-white border-gray-300">
                        <SelectValue placeholder="Select location type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="remote">Remote</SelectItem>
                        <SelectItem value="onsite">On Site</SelectItem>
                        <SelectItem value="hybrid">Hybrid</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium mb-1 text-gray-700">Volunteer Type</label>
                    <Select>
                      <SelectTrigger className="bg-white border-gray-300">
                        <SelectValue placeholder="Select volunteer type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="individual">Individual</SelectItem>
                        <SelectItem value="group">Group</SelectItem>
                        <SelectItem value="organization">Organization</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium mb-1 text-gray-700">Duration</label>
                    <Select>
                      <SelectTrigger className="bg-white border-gray-300">
                        <SelectValue placeholder="Select duration" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="short">Short Term (&lt; 1 month)</SelectItem>
                        <SelectItem value="medium">Medium Term (1-3 months)</SelectItem>
                        <SelectItem value="long">Long Term (&gt; 3 months)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium mb-1 text-gray-700">Experience</label>
                    <Select>
                      <SelectTrigger className="bg-white border-gray-300">
                        <SelectValue placeholder="Select required experience" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="beginner">Beginner</SelectItem>
                        <SelectItem value="intermediate">Intermediate</SelectItem>
                        <SelectItem value="expert">Expert</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium mb-1 text-gray-700">Friendly Address</label>
                    <Input placeholder="Enter address" className="bg-white border-gray-300" />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium mb-1 text-gray-700">Location</label>
                    <Select>
                      <SelectTrigger className="bg-white border-gray-300">
                        <SelectValue placeholder="Select %s" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="paris">Paris</SelectItem>
                        <SelectItem value="london">London</SelectItem>
                        <SelectItem value="newyork">New York</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium mb-1 text-gray-700">Language</label>
                    <Select>
                      <SelectTrigger className="bg-white border-gray-300">
                        <SelectValue placeholder="Select language" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="english">English</SelectItem>
                        <SelectItem value="french">French</SelectItem>
                        <SelectItem value="spanish">Spanish</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium mb-1 text-gray-700">Level</label>
                    <Select>
                      <SelectTrigger className="bg-white border-gray-300">
                        <SelectValue placeholder="Select level" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="beginner">Beginner</SelectItem>
                        <SelectItem value="intermediate">Intermediate</SelectItem>
                        <SelectItem value="advanced">Advanced</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-medium mb-1 text-gray-700">English Level</label>
                  <Select>
                    <SelectTrigger className="bg-white border-gray-300">
                      <SelectValue placeholder="Select English level" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="beginner">Beginner</SelectItem>
                      <SelectItem value="intermediate">Intermediate</SelectItem>
                      <SelectItem value="advanced">Advanced</SelectItem>
                      <SelectItem value="fluent">Fluent</SelectItem>
                      <SelectItem value="native">Native</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </TabsContent>
            
            <TabsContent value="attachments" className="space-y-6">
              <div>
                <label className="block text-sm font-medium mb-1 text-gray-700">Attachments</label>
                <div className="border border-dashed rounded-md p-6 text-center bg-gray-50">
                  <Button variant="outline" className="mb-2 bg-white text-gray-700 border-gray-300 hover:bg-gray-50">Browse</Button>
                  <p className="text-sm text-gray-500">Upload file .pdf, .doc, .docx</p>
                </div>
              </div>
            </TabsContent>
            
            <TabsContent value="skills" className="space-y-6">
              <div>
                <div className="flex justify-between mb-4">
                  <h3 className="text-lg font-medium text-gray-700">Skills</h3>
                  <Button variant="outline" size="sm" className="bg-white text-gray-700 border-gray-300 hover:bg-gray-50">Select / Deselect All</Button>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="flex items-center space-x-2">
                    <Checkbox id="photoshop" className="border-gray-300" />
                    <label htmlFor="photoshop" className="text-sm text-gray-700">Adobe Photoshop</label>
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    <Checkbox id="xd" className="border-gray-300" />
                    <label htmlFor="xd" className="text-sm text-gray-700">Adobe XD</label>
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    <Checkbox id="android" className="border-gray-300" />
                    <label htmlFor="android" className="text-sm text-gray-700">Android Developer</label>
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    <Checkbox id="artist" className="border-gray-300" />
                    <label htmlFor="artist" className="text-sm text-gray-700">Artist</label>
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    <Checkbox id="computer" className="border-gray-300" />
                    <label htmlFor="computer" className="text-sm text-gray-700">Computer</label>
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    <Checkbox id="developer" className="border-gray-300" />
                    <label htmlFor="developer" className="text-sm text-gray-700">Developer</label>
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    <Checkbox id="frontend" className="border-gray-300" />
                    <label htmlFor="frontend" className="text-sm text-gray-700">Front end Developer</label>
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    <Checkbox id="ios" className="border-gray-300" />
                    <label htmlFor="ios" className="text-sm text-gray-700">iOS Developer</label>
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    <Checkbox id="support" className="border-gray-300" />
                    <label htmlFor="support" className="text-sm text-gray-700">Support Agent</label>
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    <Checkbox id="writer" className="border-gray-300" />
                    <label htmlFor="writer" className="text-sm text-gray-700">Writer</label>
                  </div>
                </div>
              </div>
            </TabsContent>
          </Tabs>
          
          <div className="mt-8 flex justify-end">
            <Button className="bg-blue-600 hover:bg-blue-700 text-white">
              Save & Preview
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="ml-2">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
              </svg>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
} 