import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
import { Button } from "./ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "./ui/card";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "./ui/select";
import { Separator } from "./ui/separator";
import { Textarea } from "./ui/textarea";
import React, { useState, useEffect } from 'react';
import UpdateAvatar from './UpdateAvatar';

interface SessionData {
  [key: string]: any;
}

interface UserData {
  success: boolean;
  session_data: SessionData;
  user_avatar: string;
}


export default function ProfilePage() {
  const [userData, setUserData] = useState<UserData | null>(null);
  const [invoiceList, setInvoiceList] = useState<any[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchSessionData = async () => {
      try {
        const response = await fetch(
          'http://localhost:2058/host-api/v1/users/get-profile-data/', 
          {
            credentials: 'include', // Crucial for cookies
            headers: { 'Accept': 'application/json' }
          }
        );
        
        const data = await response.json();
        if (!response.ok || !data.success) {
          throw new Error(data.error || 'Session fetch failed');
        }
        setUserData(data);
        return data.session_data;
      } catch (error) {
        console.error('Fetch error:', error);
        throw error;
      }
    };
    const getInvoiceListData = async () => {
      try {
        const response = await fetch('http://localhost:2058/host-api/v1/invoice/invoice-info/', {
          method: 'GET',
          credentials: 'include', // Crucial for cookies
          headers: { 'Accept': 'application/json' }
        });
    
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
    
        const data = await response.json();
    
        if (!data.success) {
          throw new Error(data.message || 'Session fetch failed');
        }
    
        setInvoiceList(data.data); // Fix: Use `data.data` instead of `data`
        return data.data; // Fix: `session_data` does not exist in response
      } catch (error) {
        console.error('Fetch error:', error);
        throw error;
      }
    };
    


    fetchSessionData();
    getInvoiceListData();
  }, []);

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!userData) {
    return <div>Loading profile data...</div>;
  }
  return (
    <div className="space-y-6 container mx-auto">
      {/* <div>
        <h3 className="text-lg font-medium">Profile</h3>
        <p className="text-sm text-muted-foreground">Update your profile settings.</p>
      </div> */}
      <Separator />
      <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
        <div className="flex-1 lg:max-w-2xl">
          <Card>
            <CardHeader>
              <CardTitle>Personal Information</CardTitle>
              <CardDescription>
                Update your personal information and avatar.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex items-center space-x-4">
                <Avatar className="h-16 w-16">
                  <AvatarImage src={userData.session_data?.user_avatar} />
                  <AvatarFallback>JP</AvatarFallback>
                </Avatar>
                <UpdateAvatar />
  
              </div>

              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="firstName">Full Name</Label>
                  <Input id="firstName" defaultValue={userData.session_data?.user_name || 'Jhon'} />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="phone">Phone</Label>
                  <Input id="phone" defaultValue={userData.session_data?.user_vatar || ''} />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input id="email" type="email" defaultValue={userData.session_data?.user_email || ''} />
              </div>

              {/* <div className="space-y-2">
                <Label htmlFor="bio">Bio</Label>
                <Textarea
                  id="bio"
                  defaultValue="I'm a software developer based in New York."
                  className="resize-none"
                  rows={5}
                />
              </div> */}
            </CardContent>
          </Card>
          <Card className="mt-6">
            <CardHeader>
                <CardTitle>Billing Information</CardTitle>
                <CardDescription>
                  View your billing history.
                </CardDescription>
                {/* <CardContent> */}
                <table className="w-full">
                  <thead>
                    <tr>
                      <th className="text-left">Invoice ID</th>
                      <th className="text-left">Date</th>
                      <th className="text-left">Description</th>
                      <th className="text-right">Amount</th>
                      <th className="text-center">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {/* {
                      invoiceList.map((invoice) => (
                        <tr key={invoice.id}>
                          <td>{invoice.invoice_id}</td>
                          <td>{invoice.date}</td>
                          <td>{invoice.description}</td>
                          <td className="text-right">{invoice.amount}</td>
                          <td className="text-center"><a href="">Print</a></td>
                        </tr>
                      ))
                    } */}
                    <tr>
                      <td>dcdicdicib</td>
                      <td>2023-10-01</td>
                      <td>Subscription Fee</td>
                      <td className="text-right">$10.00</td>
                      <td className="text-center"><a href="">Print</a></td>
                    </tr>
                    <tr>
                      <td>dcibcdici</td>
                      <td>2023-09-01</td>
                      <td>Subscription Fee</td>
                      <td className="text-right">$10.00</td>
                      <td className="text-center"><a href="" >Print</a></td>
                    </tr>
                  </tbody>
                  </table>
              {/* </CardContent> */}
            </CardHeader>
          </Card>
          {/* <Card className="mt-6">
            <CardHeader>
              <CardTitle>Preferences</CardTitle>
              <CardDescription>
                Configure your application preferences.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <Label htmlFor="language">Language</Label>
                <Select defaultValue="english">
                  <SelectTrigger id="language">
                    <SelectValue placeholder="Select language" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="english">English</SelectItem>
                    <SelectItem value="french">French</SelectItem>
                    <SelectItem value="german">German</SelectItem>
                    <SelectItem value="spanish">Spanish</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="timezone">Timezone</Label>
                <Select defaultValue="est">
                  <SelectTrigger id="timezone">
                    <SelectValue placeholder="Select timezone" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
                    <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
                    <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
                    <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card> */}
        </div>

        <div className="flex-1 space-y-6 lg:max-w-md">
          <Card>
            <CardHeader>
              <CardTitle>Security</CardTitle>
              <CardDescription>
                Update your password and security settings.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="currentPassword">Current password</Label>
                <Input id="currentPassword" type="password" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="newPassword">New password</Label>
                <Input id="newPassword" type="password" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="confirmPassword">Confirm password</Label>
                <Input id="confirmPassword" type="password" />
              </div>
              <Button className="mt-4">Update password</Button>
            </CardContent>
          </Card>
          <Card className="mt-6">
            <CardHeader>
              <CardTitle>Danger Zone</CardTitle>
              <CardDescription>
                These actions are irreversible. Proceed with caution.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col space-y-4">
                <Button className="bg-red-500 hover:bg-red-600">Delete account</Button>
                <Button variant="outline">Export data</Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}