import React, { useEffect, useState } from "react";
import { View, ActivityIndicator, ScrollView, Image } from "react-native";
import { ScreenWrapper } from "@/components/ScreenWrapper";
import { StandardHeader } from "@/components/StandardHeader";
import { Text } from "@/components/ui/text";
import { Card, CardContent } from "@/components/ui/card";
import { api } from "@/lib/api";

export default function CompanyDetailsScreen() {
  const [loading, setLoading] = useState(true);
  const [company, setCompany] = useState<any>(null);

  useEffect(() => {
    const load = async () => {
      try {
        setLoading(true);
        const res = await api.company.get();
        setCompany(res?.data ?? res);
      } finally {
        setLoading(false);
      }
    };
    load();
  }, []);

  return (
    <ScreenWrapper className="bg-background">
      <StandardHeader title="Company details" showBack />

      {loading ? (
        <View className="flex-1 items-center justify-center">
          <ActivityIndicator />
        </View>
      ) : (
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
        >
          {/* Logo */}
          {company?.logoPath && (
            <View className="items-center mb-6">
              <View className="h-20 w-20 rounded-full overflow-hidden bg-muted">
                <Image
                  source={{ uri: company.logoPath }}
                  className="h-full w-full"
                  resizeMode="cover"
                />
              </View>
            </View>
          )}

          {/* Basic Info */}
          <Card className="mb-3">
            <CardContent className="py-4">
              <View className="mb-3">
                <Text variant="muted" className="text-xs font-semibold">
                  Company Name
                </Text>
                <Text variant="h4" className="text-foreground mt-1">
                  {company?.name ?? "—"}
                </Text>
              </View>

              {company?.tin && (
                <View>
                  <Text variant="muted" className="text-xs font-semibold">
                    TIN
                  </Text>
                  <Text className="text-foreground mt-1">
                    {company.tin}
                  </Text>
                </View>
              )}
            </CardContent>
          </Card>

          {/* Contact */}
          <Card className="mb-3">
            <CardContent className="py-4">
              <Text variant="muted" className="text-xs font-semibold mb-3">
                Contact Information
              </Text>

              <View className="gap-3">
                <View>
                  <Text variant="muted" className="text-xs font-semibold">
                    Phone
                  </Text>
                  <Text className="text-foreground mt-1">
                    {company?.phone ?? "—"}
                  </Text>
                </View>

                <View>
                  <Text variant="muted" className="text-xs font-semibold">
                    Email
                  </Text>
                  <Text className="text-foreground mt-1">
                    {company?.email ?? "—"}
                  </Text>
                </View>

                {company?.website && (
                  <View>
                    <Text variant="muted" className="text-xs font-semibold">
                      Website
                    </Text>
                    <Text className="text-foreground mt-1">
                      {company.website}
                    </Text>
                  </View>
                )}
              </View>
            </CardContent>
          </Card>

          {/* Address */}
          <Card className="mb-3">
            <CardContent className="py-4">
              <Text variant="muted" className="text-xs font-semibold mb-3">
                Address
              </Text>

              <View className="gap-3">
                <View>
                  <Text variant="muted" className="text-xs font-semibold">
                    Street Address
                  </Text>
                  <Text className="text-foreground mt-1">
                    {company?.address ?? "—"}
                  </Text>
                </View>

                <View className="flex-row gap-4">
                  <View className="flex-1">
                    <Text variant="muted" className="text-xs font-semibold">
                      City
                    </Text>
                    <Text className="text-foreground mt-1">
                      {company?.city ?? "—"}
                    </Text>
                  </View>

                  <View className="flex-1">
                    <Text variant="muted" className="text-xs font-semibold">
                      State
                    </Text>
                    <Text className="text-foreground mt-1">
                      {company?.state ?? "—"}
                    </Text>
                  </View>
                </View>

                <View className="flex-row gap-4">
                  <View className="flex-1">
                    <Text variant="muted" className="text-xs font-semibold">
                      Zip Code
                    </Text>
                    <Text className="text-foreground mt-1">
                      {company?.zipCode ?? "—"}
                    </Text>
                  </View>

                  <View className="flex-1">
                    <Text variant="muted" className="text-xs font-semibold">
                      Country
                    </Text>
                    <Text className="text-foreground mt-1">
                      {company?.country ?? "—"}
                    </Text>
                  </View>
                </View>
              </View>
            </CardContent>
          </Card>

          {/* System Info */}
          <Card className="mb-3">
            <CardContent className="py-4">
              <Text variant="muted" className="text-xs font-semibold mb-3">
                System Information
              </Text>

              <View className="gap-3">
                <View>
                  <Text variant="muted" className="text-xs font-semibold">
                    User ID
                  </Text>
                  <Text className="text-foreground mt-1 font-mono text-sm">
                    {company?.userId ?? "—"}
                  </Text>
                </View>

                <View>
                  <Text variant="muted" className="text-xs font-semibold">
                    Created
                  </Text>
                  <Text className="text-foreground mt-1">
                    {company?.createdAt ? new Date(company.createdAt).toLocaleString() : "—"}
                  </Text>
                </View>

                <View>
                  <Text variant="muted" className="text-xs font-semibold">
                    Last Updated
                  </Text>
                  <Text className="text-foreground mt-1">
                    {company?.updatedAt ? new Date(company.updatedAt).toLocaleString() : "—"}
                  </Text>
                </View>
              </View>
            </CardContent>
          </Card>

        
        </ScrollView>
      )}
    </ScreenWrapper>
  );
}